探客时代
SupportsCSS
Live, in-browser detection of modern CSS support for selectors, features, a...
README
SupportsCSS
Live, in-browser detection of modern CSS support for selectors, features, and at-rules. Applies support-based classes, exposes a results object, and allows custom tests.
Inspired by the legacy of Modernizr, this script evaluates a user's browser for cutting-edge modern CSS support beyond the capabilities of@supports.
- Checks for selectors like :has(), properties like text-box-trim, features like relative color syntax, and at-rules like @layer - see full test suite
- Allows adding custom tests
- Exposes a results object to iterate over detected support, as well as individual results for quick conditional checks in JS
SupportsCSS is _not_ a polyfill, it is only feature detection. Continue using tools like PostCSS or LightningCSS for prefixing and other features like syntax lowering. SupportsCSS is a layer on top of those tools.
Installation & Usage
Review the full docs at SupportsCSS.dev.
Test Suite
| Feature | Global | Test |
|---|---|---|
| |---|---|---| | ||
| at-container | AtContainer | `window.CSSContainerRule` |
| at-container-style-properties | AtContainerStyleProperties | * |
| at-counter-style | AtCounterStyle | `window.CSSCounterStyleRule` |
| at-layer | AtLayer | `window.CSSLayerBlockRule` |
| at-property | AtProperty | `window.CSSPropertyRule` |
| at-scope | AtScope | `window.CSSScopeRule` |
| anchor | Anchor | `CSS.supports('left: |
| color-function | ColorFunction | `CSS.supports('color: |
| color-mix | ColorMix | `CSS.supports('color: |
| container-units | ContainerUnits | `CSS.supports('width: |
| dynamic-viewport-units | DynamicViewportUnits | `CSS.supports('width: |
| has | Has | `CSS.supports('selector(:has(+ |
| houdini-paint-api | HoudiniPaintApi | `window.CSS.paintWorklet` |
| individual-transforms | IndividualTransforms | `CSS.supports('transform: |
| logical-properties | LogicalProperties | `CSS.supports('border-start-start-radius: |
| media-range-syntax | MediaRangeSyntax | `window.matchMedia('(width |
| nesting | Nesting | `CSS.supports('selector(& |
| nth-of-s | NthOfS | `CSS.supports('selector(:nth-child(1 |
| overscroll-behavior | OverscrollBehavior | `CSS.supports('overscroll-behavior: |
| relative-color-syntax | RelativeColorSyntax | `CSS.supports('color: |
| scroll-timeline | ScrollTimeline | `CSS.supports('scroll-timeline-name: |
| subgrid | Subgrid | `CSS.supports('grid-template-rows: |
| text-box-trim | TextBoxTrim | `CSS.supports('(leading-trim: |
| trigonometry | Trigonometry | `CSS.supports('width: |
| view-timeline | ViewTimeline | `window.ViewTimeline` |
| view-transitions | ViewTransitions | `window.ViewTransition` |
How were these features selected?
Features were selected based on:
- @supports limitations
- instability of the spec
- freshness to the language
- impact on CSS architecture
- impact on progressive enhancement
Colophon
Created by Stephanie Eckles, author of ModernCSS.dev, SmolCSS.dev, and other front-end dev resources.
