@supports selector()

The @supports rule's ability to check for selector support is surprisingly robust! While often used to test for property: value pair compatibility, the selector() function extends its capabilities to evaluate selector support. This is done by simply placing the selector within the parentheses:

@supports selector(:nth-child(1 of .foo)) {
  /* Styles applied if the selector is supported */
}

The :nth-child(n of .foo) selector, a "selector list argument" compatible with :nth-child family selectors, serves as a good example. Currently, only Safari supports this specific selector.

Consider a scenario where you need to style a list with separators and zebra striping. Ideally, you'd use a selector like this to achieve the zebra striping while ignoring separators:

li:nth-child(odd of .list-item) {
  background: lightgoldenrodyellow;
}

However, due to limited browser support, you can use @supports to conditionally apply this style:

@supports selector(:nth-child(1 of .foo)) {
  li {
    padding: 0.25em;
  }
  li:nth-child(odd of .list-item) {
    background: lightgoldenrodyellow;
  }
  li.separator {
    list-style: none;
    margin: 0.25em 0;
  }
}
@supports not selector(:nth-child(1 of .foo)) {
  li.separator {
    height: 1px;
    list-style: none;
    border-top: 1px dashed purple;
    margin: 0.25em 0;
  }
}

This provides a fallback style for browsers lacking support for the advanced selector. An improved syntax, potentially using @when and @else, could simplify this:

/* Hypothetical future syntax */
@when supports(selector(:nth-child(1 of .foo))) {
  /* Styles for supporting browsers */
} @else {
  /* Fallback styles */
}

A JavaScript API also exists for testing selector support:

CSS.supports("selector(:nth-child(1 of .foo))")

This method returns true in Safari and false in Chrome (at the time of writing).

While the @supports rule is powerful, the number of CSS selectors with inconsistent cross-browser support, and the number of use cases requiring @supports for those selectors, is relatively small. Many previously problematic selectors, such as ::marker and case-insensitive attribute selectors, now enjoy broad support. Selectors like :fullscreen or :-webkit-full-screen might offer interesting and useful applications due to their unique lack of support in iOS Safari.

The above is the detailed content of @supports selector(). For more information, please follow other related articles on the PHP Chinese website!