Feature support
CSS Container Queries
Same dense compatibility matrix, but with clearer browser grouping, a current-support row, text labels in every cell, and caveats kept next to the data.
93.7%
global support
| Range | Chrome | Edge | Firefox | Safari | Opera | iOS Safari | Chrome Android | Samsung | Firefox Android | IE |
|---|---|---|---|---|---|---|---|---|---|---|
| legacy | 100 | 100 | 108 | 15.6 | 86 | 15.6 | 100 | 18 | 108 | 11 |
| first | 105+ | 105+ | 109 | 16.0+ | 91+ | 16.0+ | 105+ | 19 | 109 | - |
| current | 126 | 126 | 126 | 18.0 | 112 | 18.0 | 126 | 25 | 126 | - |
CSS Container Queries
Size queries in CSS let styles apply to an element based on the size of a containing element rather than the viewport.
| Chrome | Edge | Firefox | Safari | Opera | iOS Safari | Chrome Android | Samsung | Firefox Android | IE |
|---|---|---|---|---|---|---|---|---|---|
| 100 | 100 | 108 | 15.6 | 86 | 15.6 | 100 | 18 | 108 | 11 |
| 105 | 105 | 109 | 16.0 | 91 | 16.0 | 105 | 19 | 109 | - |
| 126 | 126 | 126 | 18.0 | 112 | 18.0 | 126 | 25 | 126 | - |
Supported
Partial
Not supported
Skeleton State
Change Log
| Change | Before | After | Principle |
|---|---|---|---|
| Core format | Dense compatibility matrix is immediately recognisable and information-rich | The matrix remains the main component; only header, legend, row labels, and emphasis are tightened | operating-principles §2 (preserve decision-critical context); rules/11-data-tables.md (do not hide useful density) |
| Current support | Supported, partial, and unsupported cells are all visually equal after the user learns the colour code | Current row gets a visible outline and the global support score stays next to the table | operating-principles §1 (one focal row); WCAG 1.4.1 (not colour alone) |
| Mobile layout | Compatibility table needs internal horizontal scroll on narrow screens | Table keeps internal horizontal scroll, so page layout stays stable while density is preserved | quality-gates Gate 7 (responsive, no page overflow) |
| Caveats | Notes are detached from the decision and easy to miss | Implementation caveat sits directly under the matrix as a secondary decision band | operating-principles §2 (secondary zone for secondary facts) |
| Dark mode | Original tan theme is preserved as a faithful light-only reference | OKLCH tokens drive surface, text, borders, support states, and focus rings | quality-gates Gate 6 (dark mode required) |
Token Legend
| Token | Light | Dark | Used for |
|---|---|---|---|
| --color-bg | oklch(96% 0.004 258) | oklch(13% 0.010 258) | Page background, skeleton midpoint |
| --color-surface | oklch(100% 0 0) | oklch(17% 0.010 258) | Compatibility card background |
| --color-border | oklch(90% 0.006 258) | oklch(26% 0.010 258) | Dividers, browser card outlines, skeleton blocks |
| --color-text | oklch(17% 0.012 258) | oklch(94% 0.004 258) | Feature name, browser names, strong caveat text |
| --color-text-secondary | oklch(42% 0.012 258) | oklch(72% 0.008 258) | Description, footer notes |
| --color-text-muted | oklch(60% 0.008 258) | oklch(55% 0.006 258) | Kicker, versions, table metadata |
| --color-accent | oklch(52% 0.20 258) | oklch(65% 0.20 258) | Toggle active state, focus rings, back link |
| --color-success | oklch(45% 0.15 145) | oklch(70% 0.12 145) | Support score and full-support pills |