| name | css-protips |
| description | Use when writing, reviewing, refactoring, or modernizing CSS/Tailwind with source-validated patterns for resets, box sizing, focus styles, centering, aspect ratios, selectors, layout, modern CSS, progressive enhancement, older-pattern modernization, MDN Baseline support buckets, @property, container units, popovers, View Transitions, custom highlights, and scroll-state queries. |
CSS Protips — Validated Skill
This skill is a source-validated update of the uploaded css-protips Markdown skill. It keeps the useful practical guidance, corrects current compatibility status where needed, adds explicit references for each claim, and now includes an expanded set of modern CSS tricks validated against MDN/web platform references.
How to use this skill
Use this skill when writing, reviewing, or modernizing CSS. Prefer the “Validated patterns” section for day-to-day code. Use the “Modern CSS support buckets” section when deciding whether a feature can ship as normal production CSS or should be guarded with @supports. Use the “Retire or modernize older tips” section when replacing older CSS tricks with current native features.
Validation rules used
- Compatibility language is source-bound. “Widely available,” “Newly available,” and “Limited availability” follow MDN Baseline definitions unless a different source is named.
- Baseline is not QA. Baseline says whether a web platform feature is broadly implemented across core browsers; it does not replace accessibility, keyboard, contrast, motion, performance, or project-specific testing.
- Progressive enhancement is required for limited or audience-dependent features. If browser support is incomplete for your audience, ship a working fallback first, then add the enhanced rule with
@supports.
- Do not turn tips into global rules blindly. Global selectors such as
:empty, * + *, or blanket resets can affect third-party widgets, CMS content, accessibility, or embedded components. Scope them unless the whole project explicitly opts in.
References: MDN Baseline, MDN @supports.
Key corrections from the uploaded skill
| Area | Validated decision | Why |
|---|
| Baseline meaning | Keep the caveat. Baseline is a browser-compatibility signal only, not an accessibility/performance/QA guarantee. | MDN Baseline defines support buckets and explicitly says Baseline is not a substitute for accessibility, performance, and other tests. MDN Baseline |
| Anchor positioning | Update from “Limited availability” to Baseline 2026 Newly available for core properties such as anchor-name, position-area, and position-try-fallbacks; still verify support floor and keep fallbacks for older audiences. | MDN now marks key anchor-positioning properties as Baseline 2026 Newly available. MDN anchor-name, MDN position-area, MDN position-try-fallbacks |
field-sizing | Update from “Limited availability” to Baseline 2026 Newly available; still use a fallback if your browser floor includes older browsers. | MDN marks field-sizing as Baseline 2026 Newly available. MDN field-sizing |
accent-color | Keep as Limited availability. Use as a progressive enhancement, not as the only brand-control styling mechanism. | MDN marks accent-color Limited availability. MDN accent-color |
| Scroll-driven animations | Keep as progressive enhancement. animation-timeline remains Limited availability. | MDN marks animation-timeline Limited availability. MDN animation-timeline |
interpolate-size / calc-size() | Keep as progressive enhancement. Do not treat native height: auto interpolation as Baseline. | MDN marks interpolate-size and calc-size() Limited availability/experimental. MDN interpolate-size, MDN calc-size |
transition-behavior | Use it for discrete transitions such as display; it does not by itself interpolate height: 0 to height: auto. | MDN defines transition-behavior as enabling transitions for discrete animation properties. MDN transition-behavior |
| Generated-content commas/empty-link URLs | Keep only with accessibility/copy-paste caveats. Generated text from content may not behave like real DOM text. | MDN documents generated/replaced content and the attr() function, including accessibility-oriented alt text syntax. MDN content |
| Native CSS nesting | Keep for modern evergreen projects after checking support floor. Can I use shows broad but not universal support; MDN confirms browser-native parsing, not preprocessor compilation. | Can I use CSS nesting, MDN CSS nesting |
Validated patterns
1. Use a CSS reset deliberately
A minimal reset can remove browser-default margin/padding and make layout more predictable. Prefer a project-owned reset rather than copy-pasting an aggressive global reset blindly.
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Validation: box-sizing is a widely available property. border-box makes the declared width/height include padding and border, which usually makes component sizing easier. MDN box-sizing
2. Inherit box-sizing when components may need overrides
This variant sets the root sizing model once, then lets components inherit it.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
Validation: box-sizing supports content-box and border-box; inheriting from html is a safe pattern when a component needs to override sizing context locally. MDN box-sizing
3. Use all: unset carefully for component resets
all: unset resets almost all CSS properties. It excludes unicode-bidi, direction, and custom properties. Because non-inherited properties go to their initial values, a button can lose its native display/box behavior. Restore layout and focus styles explicitly.
button.reset {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
button.reset:focus-visible {
outline: 2px solid currentColor;
outline-offset: 0.15em;
}
Use all: revert when the intent is “undo author styles and return toward UA/user defaults,” not “strip everything to a blank slate.”
Validation: MDN documents that all resets all properties except unicode-bidi, direction, and CSS custom properties. MDN all
4. Prefer :focus-visible for keyboard focus styles
Use :focus-visible so keyboard users keep a visible focus indicator without forcing the same ring on every pointer click.
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 0.15em;
}
Validation: MDN describes :focus-visible as matching when the user agent determines that focus should be made evident, and notes that people need to know which element has focus. MDN :focus-visible
5. Add unitless line-height to text containers
Set a readable unitless line height on body or on text-heavy containers.
body {
line-height: 1.5;
}
Validation: line-height sets the height of a line box, and MDN recommends unitless values because descendants inherit the number rather than a computed fixed length. MDN line-height
6. Center with Grid or Flexbox
For page-level centering, Grid is concise. Use dynamic viewport block units on mobile when browser toolbars matter.
.center-page {
min-block-size: 100dvb;
display: grid;
place-items: center;
}
For flex layouts, set the container’s size and center on both axes.
.center-flex {
min-block-size: 100dvb;
display: flex;
align-items: center;
justify-content: center;
}
Validation: place-items aligns items in block and inline directions at once. Flexbox centering uses align-items and justify-content. Dynamic viewport units represent viewport dimensions that update as browser UI expands/retracts; MDN also notes that dynamic units can resize during scrolling, so test the result. MDN place-items, MDN flex alignment, MDN viewport units
7. Use aspect-ratio for media boxes
Prefer aspect-ratio over wrapper/padding hacks for modern browsers.
.media {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.media > img {
width: 100%;
height: 100%;
object-fit: cover;
}
Validation: aspect-ratio sets a preferred width-to-height ratio; object-fit: cover preserves aspect ratio while filling and clipping as needed. MDN aspect-ratio, MDN object-fit
8. Use :not() for exclusion selectors
Use :not() to apply styles to everything except the excluded case.
.nav li:not(:last-child) {
border-inline-end: 1px solid #666;
}
Validation: :not() matches elements that are not represented by its argument selector list. MDN :not
9. Use :is() for compact selector lists
Use :is() to reduce repeated selector groups.
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
margin-block-end: 0.5em;
}
Validation: :is() takes a selector list and selects elements matched by any selector in the list. MDN also documents its forgiving selector-list behavior. MDN :is
10. Use :where() for low-specificity defaults
Use :where() when a default should be trivial to override.
:where(a[href]:not([class])) {
color: LinkText;
text-decoration: underline;
}
Validation: :where() always has zero specificity, unlike :is(), whose specificity comes from the most specific selector in its arguments. MDN :where
11. Use generated content only for non-critical presentation
Generated commas, visible URLs, and labels can be convenient, but they are not a replacement for semantic text in the DOM.
ul.tags > li:not(:last-child)::after {
content: ",";
}
Validation: the content property replaces or generates content; MDN documents attr() support and accessibility-related alternative text syntax. Treat generated content as presentational unless you have tested your assistive-technology target matrix. MDN content
12. Use negative :nth-child() for first-N selection
li:nth-child(-n + 3) {
display: block;
}
Validation: :nth-child() matches elements by child index, and MDN documents the An+B syntax. MDN :nth-child
13. Use scoped :nth-child(... of selector) when sibling filtering matters
li:nth-child(-n + 3 of .item) {
display: block;
}
Validation: MDN documents the of <complex-real-selector-list> syntax, which counts only matching siblings for the formula. MDN nth-child of selector
14. Use SVG or masks for icons depending on recoloring needs
Use inline SVG or image SVGs for multicolor art. For monochrome, CSS-recolorable icons, use mask and paint with currentColor.
.icon {
inline-size: 1.5rem;
block-size: 1.5rem;
background-color: currentColor;
mask: url("icon.svg") no-repeat center / contain;
}
Validation: CSS mask hides or clips parts of an element using a mask image; painting the masked element with currentColor lets the icon follow the text color. MDN mask
15. Scope flow spacing instead of using a global owl selector
The global * + * pattern is powerful but can leak into third-party widgets and internal component layouts. Scope it.
.flow > * + * {
margin-block-start: 1.5em;
}
Validation: adjacent sibling combinators are standard CSS selector behavior; logical margin-block-start follows the block axis for the writing mode. MDN margin-inline/logical margin, MDN logical properties
16. Use max-height disclosure only with caveats
A max-height transition works mechanically but animates toward an arbitrary ceiling, which can make timing feel wrong and can truncate content if the ceiling is too small.
.disclosure {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.disclosure.is-open {
max-height: 50rem;
}
Validation: max-height caps used height, and overflow controls clipping/scroll behavior when content does not fit. MDN warns to ensure max-height content is not truncated/obscured when users zoom text. MDN max-height, MDN overflow
17. Prefer grid-row disclosure for unknown-height content
For modern layouts, animate grid rows instead of guessing a max-height ceiling.
.disclosure {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.disclosure.is-open {
grid-template-rows: 1fr;
}
.disclosure > * {
min-block-size: 0;
overflow: hidden;
}
Validation: CSS Grid defines row/column tracks, and grid track sizes are animatable in modern engines; still test because animation edge cases depend on content, overflow, and layout. MDN CSS grid, MDN grid-template-columns
18. Use table-layout: fixed only when the table width is known
table.report {
inline-size: 100%;
table-layout: fixed;
}
Validation: MDN says the fixed table-layout algorithm is faster because horizontal layout depends on table width, column widths, borders, and cell spacing, not cell contents; it also notes that if width is auto or unspecified, fixed has no effect. MDN table-layout
19. Use Grid auto-fit for responsive cards
Prefer auto-fitting Grid over space-between plus percentage flex basis for card galleries, because Grid keeps incomplete rows aligned.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1.5rem;
}
Validation: repeat() supports auto-fit, minmax() defines a size range, and gap defines spacing between grid/flex tracks/items. MDN repeat(), MDN minmax(), MDN gap
20. Prefer gap over margin hacks in Flexbox/Grid
.cluster {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
Validation: gap applies to multi-column, flex, and grid layouts and avoids first/last-child margin cleanup. MDN gap
21. Use logical properties for internationalized layout
.card {
padding-block: 1rem;
padding-inline: 1.25rem;
margin-inline: auto;
}
.overlay {
position: absolute;
inset: 0;
}
Validation: logical properties map to physical properties depending on writing mode, direction, and text orientation. MDN logical properties, MDN margin-inline, MDN padding-block
22. Use :empty narrowly
.error-message:empty {
display: none;
}
Validation: :empty matches elements with no children; text nodes, including whitespace, make an element non-empty. Scope it to known elements instead of using :empty globally. MDN :empty
23. Use pointer-events: none only for pointer hit-testing
button:disabled {
opacity: 0.5;
pointer-events: none;
}
Validation: pointer-events: none affects pointer targeting; MDN notes elements with pointer-events: none can still receive focus through sequential keyboard navigation. Prefer the native disabled attribute where available. MDN pointer-events
24. Hide autoplaying unmuted video only as a user stylesheet or controlled policy
video[autoplay]:not([muted]) {
display: none;
}
Validation: the selector is valid CSS because attribute selectors and :not() can combine; however, hiding media can affect content access. Use it as a user preference or product policy, not as an invisible surprise. MDN :not
25. Use @font-face local() cautiously
@font-face {
font-family: "ExampleBrand";
src: url("/fonts/example-brand.woff2") format("woff2");
font-display: swap;
}
Avoid local() for strict brand fonts unless you have measured metrics and version risk. A user-installed font with the same name can be stale or metrically different. Use local() mainly for system font stacks or when accepting local substitution is intentional.
Validation: MDN documents local() in @font-face src, including local full font name/PostScript name lookup and notes that user agents may ignore user-installed fonts for security/privacy reasons. font-display: swap gives an extremely small block period and an infinite swap period. MDN @font-face src, MDN font-display
26. Use fluid type with clamp() instead of unbounded viewport math
h1 {
font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}
Validation: clamp(min, preferred, max) clamps a value between lower and upper bounds; it is a better default than raw calc(1vw + 1vh + ...) because it includes floor and ceiling values. MDN clamp()
27. Use @supports for layout-changing enhancements
.card {
position: relative;
}
@supports (anchor-name: --tip) {
.trigger {
anchor-name: --tip;
}
.tooltip {
position-anchor: --tip;
position-area: top;
}
}
Validation: @supports tests whether a browser supports a CSS declaration before applying a block. MDN @supports
Modern CSS support buckets
Baseline Widely available / normal production CSS for current evergreen targets
Treat these as normal production CSS for current evergreen targets, while still testing your project’s real browser floor.
:has()
Use :has() to style an element based on its descendants or following siblings.
.card:has(> img) {
grid-template-columns: 8rem 1fr;
}
.field:has(input:focus-visible) {
outline: 2px solid currentColor;
}
Validation: MDN marks :has() Baseline Widely available and describes it as matching an element if any relative selector passed as an argument matches when anchored against that element. MDN also notes performance considerations for broad :has() usage, so keep selectors scoped. MDN :has
Container queries
Use container queries when a component should respond to its parent/container instead of the viewport.
.wrapper {
container-type: inline-size;
}
.card {
grid-template-columns: 1fr;
}
@container (width > 400px) {
.card {
grid-template-columns: auto 1fr;
}
}
Validation: MDN marks container queries Baseline Widely available and describes them as applying styles to descendants based on a container’s size or style. MDN container queries, MDN @container
Native CSS nesting
Use native nesting for readability, but keep & explicit when joining selectors or pseudo-classes.
.card {
padding: 1rem;
& .title {
font-weight: 600;
}
&:hover {
background: Canvas;
}
}
Validation: MDN documents that CSS nesting is parsed by the browser, unlike Sass-style preprocessing. Can I use shows broad modern support but not universal support, so verify your floor. MDN CSS nesting, Can I use CSS nesting
Cascade layers with @layer
Use layers to define cascade order across reset/base/components/utilities.
@layer reset, base, components, utilities;
@layer base {
a { color: LinkText; }
}
@layer utilities {
.text-red { color: red; }
}
Validation: MDN marks @layer Baseline Widely available and documents that later layers have higher precedence, allowing lower-specificity selectors in later layers to override higher-specificity selectors in earlier layers. MDN @layer
Subgrid
Use subgrid when nested grid items need to align to parent grid tracks.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}
Validation: MDN marks subgrid Baseline Widely available and documents that subgrid lets a grid item use the parent grid’s tracks. MDN subgrid
color-mix()
Use color-mix() for browser-computed tints, shades, and transparent variants. Prefer a perceptual color space such as oklab/oklch when design intent depends on perceived color.
.btn {
background: var(--brand);
}
.btn:hover {
background: color-mix(in oklab, var(--brand) 85%, black);
}
Validation: MDN marks color-mix() Baseline Widely available and defines it as mixing two colors in a given color space by a specified amount. MDN color-mix()
Logical properties
Use flow-relative properties instead of physical left/right/top/bottom where layout should adapt to writing mode.
.box {
margin-inline: auto;
padding-block: 1rem;
}
Validation: MDN defines logical properties and values as mapping to physical equivalents based on writing mode, direction, and text orientation. MDN logical properties
clamp()
Use clamp() for fluid sizes with hard limits.
.section {
padding-block: clamp(2rem, 5vw, 5rem);
}
Validation: MDN marks clamp() Baseline Widely available and describes its min/preferred/max behavior. MDN clamp()
Baseline Newly available / verify support floor
Treat these as production-ready only when your project’s supported browsers include the required versions.
text-wrap
h1,
h2,
.hero-title {
text-wrap: balance;
}
.prose p {
text-wrap: pretty;
}
Validation: MDN marks text-wrap Baseline 2024 Newly available. balance balances line lengths, while pretty aims for better typography such as avoiding orphans. MDN cautions that balance can be computationally expensive and is best for short blocks/headings. MDN text-wrap
light-dark()
:root {
color-scheme: light dark;
}
body {
background: light-dark(#fff, #111);
color: light-dark(#111, #eee);
}
Validation: MDN marks light-dark() Baseline 2024 Newly available. It returns one of two colors based on active color scheme, and it requires color-scheme: light dark or equivalent opt-in. MDN light-dark()
@scope
@scope (.card) to (.card__content) {
img {
border-radius: 8px;
}
}
Validation: MDN marks @scope Baseline 2025 Newly available and describes it as limiting selectors to specific DOM subtrees without requiring over-specific selectors. MDN @scope
@starting-style
.toast {
transition: opacity 0.3s, translate 0.3s;
opacity: 1;
translate: 0 0;
}
@starting-style {
.toast {
opacity: 0;
translate: 0 1rem;
}
}
Validation: MDN marks @starting-style Baseline 2024 Newly available and defines it as starting values for elements before their first style update. MDN @starting-style
Anchor positioning
.trigger {
anchor-name: --tip;
}
.tooltip {
position: fixed;
position-anchor: --tip;
position-area: top;
position-try-fallbacks: flip-block;
}
Validation: MDN marks anchor-name, position-area, and position-try-fallbacks Baseline 2026 Newly available. Use @supports and a non-anchored fallback for older browsers. MDN anchor positioning, MDN anchor-name, MDN position-area, MDN position-try-fallbacks
contrast-color()
.badge {
background: var(--brand);
color: white;
}
@supports (color: contrast-color(red)) {
.badge {
color: contrast-color(var(--brand));
}
}
Validation: MDN marks contrast-color() Baseline 2026 Newly available. It returns black or white based on the input color, but MDN warns that mid-tone backgrounds can still fail readability/WCAG AA, so test real tokens. MDN contrast-color()
field-sizing
textarea,
input {
field-sizing: content;
}
Validation: MDN marks field-sizing Baseline 2026 Newly available and defines it as enabling form controls to fit their content. Keep min/max sizes and a fallback for older browser floors. MDN field-sizing
Limited availability / progressive enhancement only
Ship a working default first. Add these behind @supports or feature detection.
accent-color
:root {
accent-color: rebeccapurple;
}
Validation: MDN marks accent-color Limited availability. It sets the accent color for some user-interface controls, but browser/element behavior varies, so do not rely on it as the only way to convey state. MDN accent-color
Scroll-driven animations
.reveal {
opacity: 1;
}
@supports (animation-timeline: view()) {
.reveal {
animation: fade-in linear both;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
}
@media (prefers-reduced-motion: reduce) {
.reveal {
animation: none;
}
}
Validation: MDN’s scroll-driven animation module documents scroll progress and view progress timelines; animation-timeline is marked Limited availability. Provide static content by default and honor reduced motion. MDN scroll-driven animations, MDN animation-timeline
interpolate-size and calc-size()
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
.details {
transition: block-size 0.3s ease;
block-size: 0;
overflow: hidden;
}
.details.is-open {
block-size: auto;
}
}
Validation: MDN marks interpolate-size and calc-size() Limited availability/experimental. Chrome’s developer documentation describes Chrome 129 support and recommends progressive enhancement. Do not treat intrinsic-size interpolation as Baseline yet. MDN interpolate-size, MDN calc-size, Chrome interpolate-size
transition-behavior: allow-discrete
.dialog {
transition:
opacity 0.2s ease,
display 0.2s allow-discrete;
transition-behavior: allow-discrete;
}
Validation: MDN marks transition-behavior Baseline 2024 Newly available and defines allow-discrete as starting transitions for discrete animation-type properties. It is not a replacement for interpolate-size when the problem is animating to/from intrinsic sizes. MDN transition-behavior
More cool modern CSS tricks — validated additions
These additions are meant to sit beside the original patterns. The same rule applies: ship a boring, working fallback first, then enhance only where your browser floor supports the feature.
28. Animate real custom properties with @property
Unregistered custom properties animate as untyped token strings. Register a property when you want the browser to understand its type, interpolate it, validate it, and give it an initial value.
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.spinner {
inline-size: 3rem;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(from var(--angle), currentColor 0 25%, transparent 0);
animation: spin 1s linear infinite;
}
@keyframes spin {
to { --angle: 1turn; }
}
Validation: MDN marks @property as Baseline 2024 Newly available and describes it as a way to explicitly define CSS custom properties, including syntax, inheritance, and initial values. Use computationally independent initial-values such as 0deg, 10px, or a named color. MDN @property
29. Make component typography respond to the container with cqi
Viewport units make every copy of a component scale the same way. Container query units let each copy scale to its own container.
.article-card-list {
container-type: inline-size;
}
.article-card h2 {
font-size: clamp(1.125rem, 0.85rem + 3cqi, 1.75rem);
}
.article-card {
padding: clamp(1rem, 4cqi, 2rem);
}
Validation: MDN documents container query length units: cqi is 1% of the query container's inline size, cqb is 1% of its block size, and cqmin/cqmax use the smaller/larger of those axes. If no eligible query container exists, container query units fall back to the small viewport unit for that axis, so set the container deliberately. MDN container query units
30. Validate forms after interaction with :user-valid and :user-invalid
Use the user-action pseudo-classes to avoid yelling at users before they have typed anything.
.field {
display: grid;
gap: 0.35rem;
}
.field:has(input:user-invalid) {
color: #b42318;
}
input:user-invalid {
outline: 2px solid currentColor;
outline-offset: 2px;
}
input:user-valid {
outline: 2px solid color-mix(in oklab, green 70%, currentColor);
outline-offset: 2px;
}
Validation: MDN marks both :user-valid and :user-invalid as Baseline Widely available since November 2023. :user-valid matches a validated element only after user interaction, while :user-invalid represents validated form elements that fail their constraints after interaction. MDN :user-valid, MDN :user-invalid
31. Style popovers by open state instead of toggling classes
For HTML popovers, use :popover-open for the visible state and ::backdrop for modal-style dimming when the element is placed in the top layer.
[popover] {
max-inline-size: min(32rem, calc(100vw - 2rem));
padding: 1rem;
border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
border-radius: 0.75rem;
box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.2);
}
[popover]:popover-open {
display: grid;
gap: 0.75rem;
}
[popover]::backdrop {
background: rgb(0 0 0 / 0.35);
}
Validation: MDN marks :popover-open as Baseline 2024 Newly available and defines it as matching a popover element in the showing state. MDN marks ::backdrop as Baseline Widely available, with some support caveats, and defines it as the box rendered beneath top-layer elements. MDN :popover-open, MDN ::backdrop
32. Animate top-layer entrances carefully
Top-layer UI such as popovers and dialogs can combine @starting-style, discrete transitions, and overlay for smoother open/close behavior. Keep this behind feature checks because overlay is still limited.
.toast[popover] {
opacity: 0;
translate: 0 0.75rem;
transition:
opacity 180ms ease,
translate 180ms ease;
}
.toast[popover]:popover-open {
opacity: 1;
translate: 0 0;
}
@starting-style {
.toast[popover]:popover-open {
opacity: 0;
translate: 0 0.75rem;
}
}
@supports (transition-behavior: allow-discrete) and (overlay: auto) {
.toast[popover] {
transition:
opacity 180ms ease,
translate 180ms ease,
overlay 180ms ease allow-discrete,
display 180ms ease allow-discrete;
}
}
Validation: @starting-style is already covered above as Baseline 2024 Newly available. MDN marks overlay as Limited availability and experimental; it is only relevant in transition-property when transition-behavior: allow-discrete is set. Keep the non-animated open/closed state correct without it. MDN overlay, MDN transition-behavior, MDN @starting-style
33. Reserve scrollbar space with scrollbar-gutter
Prevent content from shifting sideways when a page or pane crosses the overflow threshold.
html {
scrollbar-gutter: stable;
}
.panel {
max-block-size: 24rem;
overflow: auto;
scrollbar-gutter: stable both-edges;
}
Validation: MDN marks scrollbar-gutter as Baseline 2024 Newly available and describes it as reserving scrollbar space to prevent unwanted layout changes as content grows. MDN scrollbar-gutter
34. Skip offscreen rendering with content-visibility: auto
For long feeds, documentation pages, and below-the-fold sections, let the browser skip layout/paint work until content becomes relevant.
.feed-item {
content-visibility: auto;
contain-intrinsic-size: auto 320px;
}
Validation: MDN marks content-visibility as Baseline 2024 Newly available with some support caveats. The auto value turns on layout, style, and paint containment and can skip rendering when the element is not relevant to the user, while keeping skipped content available to find-in-page, tab order, focus, and selection. contain-intrinsic-size is Baseline Widely available and supplies the fallback size used for layout under size containment. MDN content-visibility, MDN contain-intrinsic-size
35. Fix sticky-header anchor jumps with scroll-margin-top
When fixed or sticky headers cover in-page anchors, give target sections a scroll margin instead of adding spacer elements.
:root {
--header-offset: 5rem;
}
[id] {
scroll-margin-top: var(--header-offset);
}
Validation: MDN marks scroll-margin-top as Baseline Widely available since April 2021 and defines it as setting the top margin of the scroll snap area used for snapping the box into view. This also helps #hash navigation and scrollIntoView() land below a sticky header. MDN scroll-margin-top
36. Contain nested scroll chaining with overscroll-behavior
Use this on scrollable panes inside modals, drawers, and mobile sheets so reaching the pane boundary does not accidentally scroll the page behind it.
.dialog__body {
max-block-size: min(70dvb, 40rem);
overflow: auto;
overscroll-behavior: contain;
}
Validation: MDN marks overscroll-behavior as Limited availability and defines it as controlling what the browser does when reaching the boundary of a scrolling area. Treat it as progressive enhancement: the modal must still work if the rule is ignored. MDN overscroll-behavior
37. Use perceptual color tokens with oklch() and relative colors
oklch() makes token ramps easier to reason about because lightness, chroma, and hue are separate axes. Relative color syntax lets you derive variants from a base token.
:root {
--brand: oklch(62% 0.18 265);
--brand-hover: oklch(from var(--brand) calc(l - 0.07) c h);
--brand-soft: oklch(from var(--brand) 92% calc(c * 0.3) h);
}
.button {
background: var(--brand);
}
.button:hover {
background: var(--brand-hover);
}
Validation: MDN marks oklch() as Baseline Widely available, with some support caveats, and defines it as the cylindrical form of Oklab using lightness, chroma, and hue coordinates. MDN documents relative color syntax as defining a color relative to another color, enabling programmatic lighter, darker, saturated, semi-transparent, or inverted variants. MDN oklch(), MDN relative colors
38. Quarantine vendor CSS with @import ... layer()
Import third-party CSS into a known low-priority cascade layer so your components and utilities can override it without specificity wars.
@layer reset, vendor, base, components, utilities;
@import url("vendor.css") layer(vendor);
@layer components {
.button {
border-radius: 0.5rem;
}
}
Validation: MDN documents @import url layer(layer-name) and says @import must be defined before other style declarations, with @charset and layer-creating @layer statements as exceptions. MDN also documents importing external stylesheets into named cascade layers. MDN @import
39. Use :dir() for direction-specific exceptions
Start with logical properties. Use :dir() only when the design itself changes for RTL/LTR, such as directional icons or asymmetric decoration.
.breadcrumb__chevron {
inline-size: 1em;
block-size: 1em;
}
:dir(rtl) .breadcrumb__chevron {
transform: scaleX(-1);
}
Validation: MDN marks :dir() as Baseline Widely available since December 2023 and defines it as matching elements based on text directionality. MDN :dir()
40. Avoid custom-element flash with :defined
When using web components, style the not-yet-upgraded state explicitly, then reveal the upgraded state.
fancy-tabs:not(:defined) {
display: block;
min-block-size: 12rem;
border-radius: 0.75rem;
background: color-mix(in oklab, currentColor 8%, transparent);
}
fancy-tabs:defined {
min-block-size: auto;
}
Validation: MDN marks :defined as Baseline Widely available and says it matches standard browser-defined elements and custom elements that have been successfully defined. MDN :defined
41. Expose web-component state with :state()
For autonomous custom elements, expose internal states through CustomStateSet, then style them from outside without leaking implementation classes.
toggle-card {
display: block;
border: 1px solid currentColor;
border-radius: 0.75rem;
}
toggle-card:state(open) {
box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 20%, transparent);
}
toggle-card::part(summary):state(open) {
font-weight: 700;
}
Validation: MDN marks :state() as Baseline 2024 Newly available and defines it as matching custom elements that have the specified custom state. MDN also documents use with :host() and ::part() for custom element internals and exposed shadow parts. MDN :state()
42. Name shared elements for View Transitions
For same-document transitions, a stable view-transition-name lets an element animate separately from the default page cross-fade.
@supports (view-transition-name: product-image) {
.product-card__image {
view-transition-name: product-image;
}
::view-transition-old(product-image),
::view-transition-new(product-image) {
animation-duration: 250ms;
}
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(*),
::view-transition-new(*) {
animation-duration: 1ms;
}
}
Validation: MDN marks view-transition-name and ::view-transition-old() as Baseline 2025 Newly available and says view-transition-name specifies the snapshot an element participates in so it can animate separately from the default cross-fade. Cross-document @view-transition is still Limited availability, so keep that opt-in progressive. MDN view-transition-name, MDN ::view-transition-old(), MDN @view-transition, MDN prefers-reduced-motion
43. Style search and editor ranges with ::highlight()
Custom highlights let an app highlight arbitrary text ranges without wrapping the text in spans. CSS controls the presentation; JavaScript registers the ranges.
::highlight(search-match) {
background-color: yellow;
color: black;
text-decoration: underline;
}
::highlight(active-search-match) {
background-color: orange;
color: black;
}
Validation: MDN marks ::highlight() as Baseline 2026 Newly available and defines it as styling a custom highlight registered with HighlightRegistry. MDN also limits supported properties to text-oriented properties such as color, background-color, text decoration, and text-shadow; background-image is ignored. MDN ::highlight()
44. Adapt CSS to JavaScript availability with @media (scripting)
Use the scripting media feature for UI that is usable without JavaScript but enhanced when JavaScript is available.
.carousel__controls {
display: none;
}
@media (scripting: enabled) {
.carousel__controls {
display: flex;
}
}
@media (scripting: none) {
.carousel {
overflow-x: auto;
}
}
Validation: MDN marks the scripting media feature as Baseline 2023 Newly available and says it tests whether scripting, such as JavaScript, is available. MDN scripting media feature
45. Use scroll-state container queries for scroll-aware UI
Scroll-state queries let CSS react to whether a container can scroll, was scrolled in a direction, is snapped, or is sticky-stuck.
html {
container-type: scroll-state;
container-name: page-scroller;
}
.back-to-top {
position: fixed;
inset-block-end: 1rem;
inset-inline-end: 1rem;
translate: 120% 0;
transition: translate 180ms ease;
}
@container page-scroller scroll-state(scrollable: top) {
.back-to-top {
translate: 0 0;
}
}
Validation: MDN documents container scroll-state queries as a type of container query that applies styles based on scroll state, including scrollable, scrolled, snapped, and stuck descriptors. Because scroll-state queries are newer and interaction-heavy, keep a usable static fallback and test across your support matrix. MDN scroll-state queries
46. Snap fluid values to a rhythm with round()
When a fluid value produces awkward fractional spacing, round it to your spacing step.
:root {
--space-step: 0.25rem;
}
.card {
padding: round(up, clamp(1rem, 3cqi, 2rem), var(--space-step));
}
Validation: MDN marks round() as Baseline 2024 Newly available and defines it as returning a rounded number based on a selected rounding strategy and interval. MDN round()
47. Use line-clamp as an enhancement, not as content policy
Line clamping is useful for cards, previews, and teasers. Do not use it as the only way to access essential content.
.excerpt {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
@supports (line-clamp: 3) {
.excerpt {
display: block;
line-clamp: 3;
}
}
Validation: MDN marks unprefixed line-clamp as Limited availability. MDN also documents the legacy -webkit-line-clamp co-dependency with display: -webkit-box or -webkit-inline-box and -webkit-box-orient: vertical as fully specified behavior that remains supported. MDN line-clamp
48. Tune fallback font metrics with size-adjust
Instead of relying on a stale local brand font, tune a fallback face so its metrics better approximate your web font while the real font loads.
@font-face {
font-family: "Brand";
src: url("/fonts/brand.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Brand Fallback";
src: local("Arial");
size-adjust: 103%;
}
body {
font-family: "Brand", "Brand Fallback", system-ui, sans-serif;
}
Validation: MDN marks size-adjust as Baseline Widely available since September 2023 and defines it as a multiplier for glyph outlines and font metrics to harmonize the rendered design of different fonts. More exact descriptors such as ascent-override remain Limited availability, so verify before relying on them. MDN size-adjust, MDN ascent-override
49. Future/lab CSS to watch, not rely on yet
These are genuinely cool, but not baseline-safe. Keep them in experiments, demos, or progressive enhancements until your target browsers support them.
.card {
padding: 1rem;
padding: if(style(--density: compact): 0.5rem; else: 1rem);
}
@function --alpha(--color <color>, --amount <number>) returns <color> {
result: oklch(from var(--color) l c h / var(--amount));
}
.gallery > * {
--delay: calc(sibling-index() * 40ms);
animation-delay: var(--delay);
}
.avatar {
overflow: clip;
}
@supports (overflow-clip-margin: 1rem) {
.avatar {
overflow-clip-margin: 0.5rem;
}
}
Validation: MDN marks if(), @function, sibling-index(), sibling-count(), and overflow-clip-margin as Limited availability. overflow itself is Baseline Widely available, but overflow-clip-margin is not; gate the extra clip-edge polish behind @supports. MDN if(), MDN @function, MDN sibling-index(), MDN sibling-count(), MDN overflow, MDN overflow-clip-margin
Retire or modernize older tips
Replace padding-hack ratio boxes with aspect-ratio
.embed {
aspect-ratio: 16 / 9;
}
Why: aspect-ratio directly expresses the intended ratio on the element. The old height: 0; padding-bottom: ... trick remains a legacy fallback only. MDN aspect-ratio
Replace max-height disclosure with grid-row disclosure where possible
Use the grid-row technique in Pattern 17 for unknown-height content. Reserve max-height for cases where the max is truly bounded and tested. MDN max-height, MDN CSS grid
Replace space-between card gutters with Grid auto-fit
Use Pattern 19 for responsive cards. justify-content: space-between distributes leftover main-axis space; in wrapping galleries, this can make incomplete rows look detached. MDN justify-content, MDN repeat()
Choose unset vs revert by reset intent
button.clean {
all: unset;
display: inline-flex;
}
button.native {
all: revert;
}
Why: unset means inherited properties inherit and non-inherited properties become initial; revert rolls back toward the previous cascade origin. MDN all
Do not local() strict brand fonts by default
Use self-hosted .woff2, font metrics strategy, and font-display instead. Use local() only when local substitution is acceptable. MDN @font-face src, MDN font-display
Scope the owl selector
.flow > * + * {
margin-block-start: 1.5em;
}
Why: the global version can affect widgets, grid/flex children, and embedded content. Scoping gives the spacing behavior only where intended. MDN logical properties
Use masks for monochrome recolorable icons
Use mask plus currentColor for single-color icons. Keep inline SVG or image backgrounds for multicolor art. MDN mask
Use :where() for defaults that should lose easily
:where(a[href]:not([class])) {
color: LinkText;
text-decoration: underline;
}
Why: zero specificity makes component overrides straightforward. MDN :where
Validation matrix
| Claim / pattern | Status | Reference |
|---|
| Baseline is compatibility signal, not QA | Validated | MDN Baseline |
box-sizing: border-box includes padding/border in sizing | Validated | MDN box-sizing |
all excludes unicode-bidi, direction, custom props | Validated | MDN all |
:not() matches elements not matching selector list | Validated | MDN :not |
@font-face src local() checks local names; privacy constraints exist | Validated | MDN @font-face src |
font-display: swap has tiny block period and infinite swap period | Validated | MDN font-display |
| Unitless line-height is recommended for inheritance | Validated | MDN line-height |
:focus-visible is preferred for keyboard-visible focus styling | Validated | MDN :focus-visible |
| Dynamic viewport units respond to browser UI changes | Validated | MDN viewport units |
aspect-ratio defines preferred width/height ratio | Validated | MDN aspect-ratio |
object-fit: cover preserves ratio while filling/clipping | Validated | MDN object-fit |
Generated content is generated/replaced content | Validated | MDN content |
:nth-child(-n + 3) selects first three children | Validated | MDN :nth-child |
:nth-child(... of selector) filters counted siblings | Validated | MDN nth-child of selector |
table-layout: fixed requires table width to matter | Validated | MDN table-layout |
gap works for grid/flex/multicol layouts | Validated | MDN gap |
:empty ignores comments but not whitespace text nodes | Validated | MDN :empty |
pointer-events: none does not prevent keyboard focus | Validated | MDN pointer-events |
:has() is Baseline Widely available | Validated | MDN :has |
| Container queries are Baseline Widely available | Validated | MDN container queries |
| Native CSS nesting is browser parsed; support should be checked | Validated | MDN CSS nesting, Can I use CSS nesting |
@layer layer order can outrank selector specificity | Validated | MDN @layer |
subgrid is Baseline Widely available | Validated | MDN subgrid |
color-mix() is Baseline Widely available | Validated | MDN color-mix() |
| Logical properties map to writing mode/direction | Validated | MDN logical properties |
clamp() sets min/preferred/max | Validated | MDN clamp() |
@supports is feature-query CSS | Validated | MDN @supports |
text-wrap is Baseline 2024 Newly available | Validated | MDN text-wrap |
light-dark() is Baseline 2024 Newly available | Validated | MDN light-dark() |
@scope is Baseline 2025 Newly available | Validated | MDN @scope |
@starting-style is Baseline 2024 Newly available | Validated | MDN @starting-style |
| Core anchor positioning properties are Baseline 2026 Newly available | Updated from uploaded skill | MDN anchor-name, MDN position-area, MDN position-try-fallbacks |
contrast-color() is Baseline 2026 Newly available and returns black/white | Validated | MDN contrast-color() |
accent-color is Limited availability | Validated | MDN accent-color |
Scroll-driven animation-timeline is Limited availability | Validated | MDN animation-timeline |
field-sizing is Baseline 2026 Newly available | Updated from uploaded skill | MDN field-sizing |
interpolate-size / calc-size() are not Baseline | Validated | MDN interpolate-size, MDN calc-size |
transition-behavior is for discrete transitions | Validated | MDN transition-behavior |
mask supports CSS masking for icons | Validated | MDN mask |
:where() has zero specificity | Validated | MDN :where |
@property is Baseline 2024 Newly available and registers typed custom properties | Added | MDN @property |
Container query units such as cqi, cqb, cqmin, and cqmax are relative to a query container | Added | MDN container query units |
:user-valid / :user-invalid are Baseline Widely available and match after user interaction | Added | MDN :user-valid, MDN :user-invalid |
:popover-open is Baseline 2024 Newly available; ::backdrop is Baseline Widely available | Added | MDN :popover-open, MDN ::backdrop |
overlay is Limited availability and only relevant for top-layer discrete transitions | Added | MDN overlay |
scrollbar-gutter is Baseline 2024 Newly available | Added | MDN scrollbar-gutter |
content-visibility is Baseline 2024 Newly available; contain-intrinsic-size is Baseline Widely available | Added | MDN content-visibility, MDN contain-intrinsic-size |
scroll-margin-top is Baseline Widely available | Added | MDN scroll-margin-top |
overscroll-behavior is Limited availability | Added | MDN overscroll-behavior |
oklch() is Baseline Widely available; relative color syntax derives colors from another color | Added | MDN oklch(), MDN relative colors |
@import ... layer() imports styles into cascade layers and must appear before normal declarations | Added | MDN @import |
:dir() is Baseline Widely available | Added | MDN :dir() |
:defined is Baseline Widely available | Added | MDN :defined |
:state() is Baseline 2024 Newly available for custom element states | Added | MDN :state() |
view-transition-name and ::view-transition-old() are Baseline 2025 Newly available; cross-document @view-transition is Limited availability | Added | MDN view-transition-name, MDN ::view-transition-old(), MDN @view-transition |
::highlight() is Baseline 2026 Newly available and supports only a limited text-oriented property set | Added | MDN ::highlight() |
scripting media feature is Baseline 2023 Newly available | Added | MDN scripting |
Container scroll-state queries are documented for scrollable, scrolled, snapped, and stuck states | Added | MDN scroll-state queries |
round() is Baseline 2024 Newly available | Added | MDN round() |
line-clamp is Limited availability; legacy -webkit-line-clamp behavior is fully specified | Added | MDN line-clamp |
size-adjust is Baseline Widely available; ascent-override is Limited availability | Added | MDN size-adjust, MDN ascent-override |
if(), @function, sibling-index(), sibling-count(), and overflow-clip-margin are Limited availability | Added | MDN if(), MDN @function, MDN sibling-index(), MDN sibling-count(), MDN overflow-clip-margin |
Reference index
