Why Are CSS Rules Dropped Due to Invalid Selectors?

Invalid CSS Selector Causes Rule to be Dropped: Rationale

Background

In CSS Selectors Level 3, parsing errors lead to the discarding of rules containing invalid selectors. This behavior has been implemented consistently by browsers for years, ensuring predictable error handling.

Rationale

The rationale for discarding entire rules is multi-faceted:

1. Ambiguities in Selector Parsing: Commas and other punctuation can create parsing ambiguities. Naive parsers may struggle to determine the scope of a selector group or declaration block without incurring errors.
2. Consistency in Error Handling: Treating all parsing errors uniformly simplifies implementation and avoids the potential for inconsistent behavior across browsers.
3. Forward Compatibility: Acknowledging the future potential for new selector syntax prevents the introduction of more complex and ambiguous error-handling rules.

Example

To illustrate the issue, here is an example rule:

#menu li.last, #menu li:last-child {
  ...
}

In browsers like IE8 that lack :last-child support, the entire rule is discarded due to an invalid selector despite the validity of the first selector.

Alternative Approaches

Dropping unrecognized selectors without discarding the rule was considered. However, it introduced potential risks:

1. Unexpected Selector Behavior: Parsed selectors could be applied incorrectly, leading to unexpected layout or styling.
2. Implementation Complexity: Determining where to split invalid selectors from valid ones can be challenging and subject to error.

Exceptions

Some layout engines may exhibit differing behavior. WebKit ignores prefixed selectors, while others disregard the entire rule. These deviations emphasize the potential for cross-browser inconsistencies if error-handling rules are revised.

The above is the detailed content of Why Are CSS Rules Dropped Due to Invalid Selectors?. For more information, please follow other related articles on the PHP Chinese website!