Browser Support
All checks run in your current browser at page load — no hardcoded compatibility tables. Green border = supported. Red border = not supported. Results update instantly via runtime detection.
@property Registered custom properties with type + animation
Used in: tokens.css — semantic token transitions
MDN ↗@starting-style Entry animations without JavaScript
Used in: hero.css, accordion.css, modal.css, nav.css
MDN ↗View Transitions API Animated same-document and cross-document transitions
Used in: header.css — view-transition-name, index.css — @view-transition
MDN ↗Container Queries Component layout based on parent container size
Used in: All components — @container rules
MDN ↗cqi units Container query inline-size units for fluid type
Used in: All components — fluid font-size inside containers
MDN ↗interpolate-size Smooth height: auto transitions without JavaScript
Used in: accordion.css — future height animation
MDN ↗Popover API Native popover without JavaScript positioning logic
Used in: nav.css — megamenu panel
MDN ↗::scroll-marker Native scroll-linked indicator dots
Used in: carousel.css — planned dots enhancement
MDN ↗<details name> Exclusive accordion groups — close others on open
Used in: accordion — optional exclusive group pattern
MDN ↗color-mix() Native color blending in CSS
Used in: header.css — glassmorphism background blend
MDN ↗color() Wide-gamut colors using display-p3, a98-rgb, rec2020 color spaces
Used in: tokens.css — wide-gamut color space support
MDN ↗Relative Color Syntax Derive new colors from existing ones using from keyword
Used in: tokens.css — primary scale derivation via oklch(from …)
MDN ↗field-sizing: content Auto-grow textarea to fit content
Used in: input.css — textarea auto-height
MDN ↗backdrop-filter Blur/saturate behind elements (glassmorphism)
Used in: header.css — glass effect, modal.css — backdrop blur
MDN ↗transition: allow-discrete Animate display: none ↔ block transitions
Used in: modal.css — open/close animation
MDN ↗