CSS Feature Support Checker

Test CSS feature support on any browser - smart TVs, embedded devices, and non-standard environments.

Layout

Modern layout systems and alignment primitives for responsive interfaces.

⏳ CSS Grid
Two-dimensional layout systems with named areas and tracks.
display: gridMDN
⏳ Flexbox
One-dimensional flexible box layout system.
display: flexMDN
⏳ flex-wrap
Allow flex items to wrap onto multiple lines.
flex-wrap: wrapMDN
⏳ gap
Spacing between Grid and Flexbox items.
gap: 1remMDN
⏳ Container Queries
Style children based on ancestor container dimensions rather than the viewport.
container-type: inline-sizeMDN
⏳ minmax()
Define size range for Grid tracks.
grid-template-columns: minmax(100px, 1fr)MDN
⏳ auto-fit / auto-fill
Automatically adjust Grid columns to available space.
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))MDN

Sizing primitives, intrinsic sizing behavior, and replaced element fitting.

⏳ aspect-ratio
Define width-to-height ratio for elements.
aspect-ratio: 16 / 9MDN
⏳ object-fit
Control how replaced elements resize within containers.
object-fit: coverMDN
⏳ clamp()
Clamp values between minimum and maximum.
width: clamp(10px, 50%, 100px)MDN
⏳ block-size / inline-size
Logical sizing properties for flow-relative dimensions.
block-size: 100pxMDN

Flow-relative properties that adapt to writing modes and text direction.

⏳ margin-inline
Logical inline margins that adapt to writing mode.
margin-inline: 1remMDN
⏳ margin-block
Logical block margins that adapt to writing mode.
margin-block: 1remMDN
⏳ padding-inline
Logical inline padding that adapts to writing mode.
padding-inline: 1remMDN
⏳ padding-block
Logical block padding that adapts to writing mode.
padding-block: 1remMDN
⏳ inset
Shorthand for top, right, bottom, left positioning.
inset: 0MDN
⏳ inset-inline
Logical inline positioning offsets.
inset-inline: 0MDN
⏳ inset-block
Logical block positioning offsets.
inset-block: 0MDN

Modern color spaces and compositing tricks verified on-device.

⏳ accent-color
Customize color of form controls.
accent-color: blueMDN
⏳ color-mix()
Blend colors with declarative compositing math.
background: color-mix(in srgb, red 60%, blue)MDN
⏳ light-dark()
Choose colors based on color scheme automatically.
color: light-dark(black, white)MDN

Filters, blending modes, masks, and other visual effects for modern UIs.

⏳ backdrop-filter
Apply filters to the area behind an element.
backdrop-filter: blur(10px)MDN
⏳ filter
Apply graphical effects like blur and color manipulation.
filter: grayscale(50%)MDN

Font technologies that keep brand systems consistent on embedded browsers

⏳ Variable Fonts
Fine-grained axis control via font-variation-settings.
font-variation-settings: "wght" 500MDN
⏳ text-wrap: balance
Automatically balance text across lines for better readability.
text-wrap: balanceMDN

Advanced scroll behavior, snap points, and overflow control for smooth scrolling experiences.

⏳ scroll-snap-type
Define scroll snapping behavior for containers.
scroll-snap-type: y mandatoryMDN
⏳ scroll-behavior
Enable smooth scrolling animations.
scroll-behavior: smoothMDN
⏳ overscroll-behavior
Control scroll chaining and bounce effects.
overscroll-behavior: containMDN

Modern selector capabilities for precise element targeting and style isolation.

⏳ :has() Pseudo-Class
Select parent elements based on children state (parent selector).
selector(:has(> img))MDN
⏳ :is() Pseudo-Class
Match multiple selectors with forgiving syntax.
selector(:is(h1, h2, h3))MDN
⏳ :where() Pseudo-Class
Like :is() but with zero specificity for easier overrides.
selector(:where(h1, h2))MDN
⏳ :focus-visible
Style focus only when keyboard navigation is detected.
selector(:focus-visible)MDN
⏳ :focus-within
Style elements when they or descendants have focus.
selector(:focus-within)MDN
⏳ CSS Nesting
Nest selectors without preprocessors for better readability.
selector(& .nested)MDN

CSS custom properties (variables) and functions for dynamic styling.

⏳ CSS Custom Properties (Variables)
Define and use custom CSS variables with -- prefix.
--custom: redMDN
⏳ var()
Reference custom properties using the var() function.
color: var(--custom)MDN

Modern units and techniques for responsive design across all screen sizes.

⏳ Viewport Units (vh, vw)
Classic viewport units for responsive layouts.
height: 100vhMDN
⏳ Dynamic Viewport Units (dvh, dvw)
Dynamic units that account for mobile browser chrome visibility.
height: 100dvhMDN
⏳ Container Query Width (cqw)
Container query unit relative to container width.
width: 50cqwMDN
⏳ Container Inline/Block (cqi, cqb)
Container query units for inline and block dimensions.
width: 50cqiMDN
⏳ Safe Area Insets (env())
Use env(safe-area-inset-*) to account for notches and system UI on devices.
padding: env(safe-area-inset-top)MDN

Additional modern CSS features including math functions, media queries, and utility properties.

⏳ content-visibility
Defer rendering of off-screen content for performance.
content-visibility: autoMDN
⏳ pointer: coarse
Detect coarse pointers such as touch input.
@media (pointer: coarse)MDN
⏳ hover: none
Detect environments where hover interactions are not available.
@media (hover: none)MDN
⏳ prefers-reduced-motion
Detect user preference for reduced motion.
@media (prefers-reduced-motion: reduce)MDN
⏳ prefers-color-scheme
Detect user's color scheme preference (light/dark).
@media (prefers-color-scheme: dark)MDN
⏳ prefers-contrast
Detect user preference for contrast levels.
@media (prefers-contrast: more)MDN
⏳ prefers-reduced-transparency
Detect user preference for reduced transparency.
@media (prefers-reduced-transparency: reduce)MDN