These newer at-rules replace work that once needed JavaScript or naming conventions. Each is detailed in the section listed.
| At-rule | Purpose | Status (Sept 2026) | See |
|---|---|---|---|
| @layer | Orders groups of rules in the cascade | Baseline widely available | 4.3.14 |
| @scope | Limits rules to a subtree | Baseline 2026 | 4.3.14 |
| @property | Registers a typed, animatable custom property | Baseline 2024 | 4.2.10 |
| @starting-style | "Before" styles for entry transitions | Baseline 2024 | 4.9.1 |
| @counter-style | Custom list and counter markers | Baseline widely available | 4.7.1 |
| @position-try | Fallback positions for anchored elements | Baseline 2026 | 4.8.10 |
| @view-transition | Cross-document view transitions | Chromium 4,389 , Safari 10 ; not Firefox 555 | 4.9.5 |
<style>
@counter-style ticks { system: cyclic; symbols: "👍" "✅" "⭐"; suffix: " "; }
@property --hue { syntax: "<angle>"; inherits: false; initial-value: 210deg; }
ol { list-style: ticks; font: 17px system-ui; margin: 8px 0 0 260px; }
button { anchor-name: --btn; position: absolute; top: 12px; left: 20px;
font: 16px system-ui; background: hsl(var(--hue) 70% 45%); color: #fff; }
.tip { position: absolute; position-anchor: --btn; position-area: top; margin: 6px;
position-try-fallbacks: --below; padding: 6px 10px; background: #37474f;
color: #fff; font: 14px system-ui; border-radius: 6px;
transition: opacity .3s; @starting-style { opacity: 0; } }
@position-try --below { position-area: bottom; }
</style>
<button>Save</button><div class="tip">No room above, so I moved below</div>
<ol><li>Semantic HTML</li><li>Modern CSS</li><li>Less JavaScript</li></ol>
The tooltip requests the area above its anchor, would overflow the viewport, and so takes the --below fallback; @starting-style fades it in on first render, and the typed --hue could be transitioned. @view-transition { navigation: auto; } in both pages' CSS animates same-origin navigations without script.