CSS Feature Support Checker

Two-dimensional layout systems with named areas and tracks.

Name Grid areas and place items using area mapping.

Allow Grid auto-placement to backfill gaps in earlier rows/columns.

Alignment shorthands for aligning items and content in Grid/Flex.

Shorthand for aligning Grid/Flex lines in the container.

Shorthand for aligning a single Grid/Flex item.

Control inline-axis alignment of items inside a grid container.

Control inline-axis alignment for a single grid item.

Repeat Grid tracks without duplicating template definitions.

Define rows and columns in a single Grid shorthand.

Place Grid items using line-based placement shorthands.

Place Grid items with the grid-area shorthand (lines or named areas).

Span grid items across tracks using the span keyword.

Size implicit Grid tracks created by auto-placement.

One-dimensional flexible box layout system.

Create a flex container that participates in inline flow.

Allow flex items to wrap onto multiple lines.

Align items by their typographic baselines.

Override align-items alignment for a single flex/grid item.

Control the main axis direction for flex layout.

Shorthand for flex-direction and flex-wrap.

Shorthand for flex-grow, flex-shrink, and flex-basis.

Reorder flex items independent of source order.

Size flex items based on their intrinsic content size.

Distribute free space evenly between and around items.

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

Spacing between Grid and Flexbox items.

Axis-specific gaps for multi-row/column layouts.

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

Define size range for Grid tracks.

Automatically adjust Grid columns to available space.

Masonry-style grid track sizing (experimental / draft support).

Define width-to-height ratio for elements.

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.

Clamp a size to the available space while respecting intrinsic sizing.

Use intrinsic sizing keywords for shrink-to-fit and content-based sizing.

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.