mask-image masks an element through a gradient or image file with stepless transparency, instead of only clipping it hard and geometrically like clip-path. That makes the property the right tool for frayed product images, organic hero areas, and a reusable icon system that needs no extra SVG exports at all.
Responsive typography, adaptive spacing and fluid layouts without a single breakpoint: that is the promise of CSS calc(), min(), max() and clamp(). Anyone who masters these four functions and their nesting writes more maintainable stylesheets with less code and fewer browser conflicts between pixels and viewport.
Numeric grid lines such as line 3 or line minus 2 are unambiguous for the browser, but hard for humans to remember. Named grid lines and grid-template-areas translate the same grid into meaningful labels and ASCII diagrams that document, right inside the code, what happens on screen.
Checkboxes, radio buttons, range sliders and progress bars carry a different default color in every browser, usually some system blue that either matches a brand or does not. The accent-color CSS property solves this with a single line, without native keyboard control, focus rings or screen reader semantics ever getting lost.
With prefers-contrast, CSS can detect whether a user has requested more or less contrast in the operating system settings, and adjust colors, borders and focus indicators accordingly. The media feature closes a real accessibility gap that used to be solved awkwardly with separate high contrast stylesheets.
Relative Color Syntax lets you compute an entire palette in the browser from a single brand color, instead of maintaining hover, active and border colors as separate variables. With the from keyword, color space channels and calc(), maintainable color systems emerge directly in native CSS, with no Sass and no build step required.
Color fonts store several color layers per glyph directly in the font file, from multi-color icon sets to emoji fonts. @font-palette-values lets you override that factory palette through CSS and match it to your own theme, with no SVG sprites and no separate icon file per color variant.
Hover cascades, form validation and complex UI states: with Tailwind's group and peer modifiers you can describe interactions that other projects reach for Alpine.js or React to build. The result is lean HTML with zero JavaScript overhead.
Negative grid line numbers count backwards from the end of the grid, so grid-column: 1 / -1 always spans the full width, whether the grid has three, six, or twelve columns. Hardcode positive line numbers instead, and every change to the column count forces you to chase down and fix every placement by hand. Negative lines make the layout robust against exactly that change.
Windows High Contrast Mode replaces almost every color a stylesheet defines with a small, user chosen system palette, and forced-color-adjust: none is the one CSS property that can exempt individual elements from that replacement. Used sparingly, on status badges, icons and charts where color itself carries meaning, it protects genuinely necessary information without undermining the accessibility feature the mode exists for.