CSS Feature Support Checker

Define width-to-height ratio for elements.

Two-dimensional layout systems with named areas and tracks.

One-dimensional flexible box layout system.

Grandchild elements that align to the tracks of a parent grid.

Spacing between Grid and Flexbox items.

Style children based on ancestor container dimensions rather than the viewport.

Control how replaced elements resize within containers.

Position replaced content within element box.

Define viewport region for replaced elements.

Clamp values between minimum and maximum.

Define size range for Grid tracks.

Automatically adjust Grid columns to available space.

Logical sizing properties for flow-relative dimensions.

Logical constraints for block dimensions.

Logical constraints for inline dimensions.

Control form field intrinsic sizing behavior.

Logical inline margins that adapt to writing mode.

Logical block margins that adapt to writing mode.

Logical inline padding that adapts to writing mode.

Logical block padding that adapts to writing mode.

Logical inline borders that adapt to writing mode.

Logical block borders that adapt to writing mode.

Shorthand for top, right, bottom, left positioning.

Logical inline positioning offsets.

Logical block positioning offsets.

Logical border radius properties for corners.

Customize color of form controls.

Wide gamut color for high-end HDR panels.

Device-independent color space with perceptual uniformity.

Perceptually uniform color space covering all visible colors.

Perceptually uniform colors for accessible UI contrast.

Hue-Whiteness-Blackness color notation.

Blend colors with declarative compositing math.

Derive colors from existing color values.

Choose colors based on color scheme automatically.

Control color space for gradients and animations.

Apply filters to the area behind an element.

Apply graphical effects like blur and color manipulation.

Control how element content blends with background.

Blend multiple background layers together.

Create complex shapes by clipping elements.

Use images as masks to control element visibility.

Fine-grained axis control via font-variation-settings.

Create drop caps without complex positioning.

Select predefined color palettes from color fonts.

Trim font ascent/descent to tighten vertical rhythm.

Control which font metrics are used for text box edges.

Automatically balance text across lines for better readability.

Avoid orphans and improve text appearance in paragraphs.

Minimize reflow during editing by stabilizing line breaks.

Control how white space is collapsed in text.

Control whether text wraps at soft wrap opportunities.

Synchronize animation progress to scroll offsets.

Trigger effects as elements intersect a scrollport.

Control animation progress range along timeline.

Ensure browsers can address 120Hz+ animation-timing-function.

Smooth page and state transitions with native browser support.

Animate translate, rotate, scale independently in keyframes.

Enable smooth animations to auto height/width values.

Define scroll snapping behavior for containers.

Control alignment of snap positions.

Force scroll container to stop at snap points.

Enable smooth scrolling animations.

Define scroll snap area margins.

Define scroll container padding for snap positioning.

Control scroll chaining and bounce effects.

Customize scrollbar colors.

Control scrollbar width or hide scrollbars.

Reserve space for scrollbars to prevent layout shifts.

Extend clipping bounds beyond content box.

Reference an anchor element for positioning.

Define position relative to anchor element areas.

Specify fallback positions when primary position fails.

Define motion path for element positioning.

Control position along motion path.

Control rotation along motion path.

Select parent elements based on children state (parent selector).

Match multiple selectors with forgiving syntax.

Like :is() but with zero specificity for easier overrides.

Style focus only when keyboard navigation is detected.

Style elements when they or descendants have focus.

Nest selectors without preprocessors for better readability.

Define and use custom CSS variables with -- prefix.

Reference custom properties using the var() function.

Classic viewport units for responsive layouts.

Dynamic units that account for mobile browser chrome visibility.

Viewport units using smallest possible viewport size.

Viewport units using largest possible viewport size.

Dynamic viewport units for inline and block dimensions.

Dynamic viewport minimum and maximum dimension units.

Container query unit relative to container width.

Container query unit relative to container height.

Container query units for inline and block dimensions.

Container query minimum and maximum dimension units.

Use env(safe-area-inset-*) to account for notches and system UI on devices.

Defer rendering of off-screen content for performance.

Set placeholder size for content-visibility elements.

Scale element and its contents.

Enable user resizing of elements with logical values.

Control thickness of text decorations.

Control distance of underline from text.

Round numeric values using different strategies.

Calculate modulo of two numbers.

Calculate remainder of division.

Calculate hypotenuse using Pythagorean theorem.

Trigonometric functions for advanced calculations.

Absolute value and sign mathematical functions.

Detect coarse pointers such as touch input.

Detect environments where hover interactions are not available.

Detect user preference for reduced motion.

Detect user's color scheme preference (light/dark).

Detect user preference for contrast levels.

Detect user preference for reduced transparency.