Page 15 - CSS

Staggered chapter counters, nested lists with mixed styles, custom markers for list items: pure CSS handles all of it with counter-reset, counter-increment, and counter(). Once you understand the system, you can strike JavaScript counters from your toolkit for good.

will-change promises smoother animations through GPU layer promotion, and it delivers on that promise when used correctly. Applied permanently to too many elements, though, it causes memory leaks, increases GPU memory usage, and can actually make animations slower instead of faster.

CSS color-mix() mixes colors natively in the browser: no Sass, no JavaScript, no preprocessors. Choosing the right color space produces perceptually uniform transitions, natural transparency variants, and dynamic themes that respond to user preferences.

The shape() function extends clip-path with real curve commands like curve to, arc to and smooth to, written in readable CSS syntax. Where only an external SVG or a rough polygon approximation used to help, organic, curvy shapes now happen without a build step and without a path editor.

content on ::before and ::after is often used only for empty decorative elements, but it can do a lot more: attr() reads HTML attributes directly, counter() numbers lists and chapters automatically, and content: url() embeds image icons, all without extra markup. Knowing these options saves HTML elements, but requires understanding the accessibility limits of generated content precisely.

Arbitrary values open Tailwind up to any conceivable CSS value, without ever having to fall back to @apply or a separate stylesheet file. Used correctly, they elegantly solve genuine one off cases. Used incorrectly, they turn a clean utility system into unreadable class lists and undermine purge, consistency and team understanding.

Dark mode in Tailwind CSS is more than a dark: prefix in front of every class. A well thought out dark mode strategy combines system synchronization, user preference persistence, CSS custom properties and a flicker-free toggle, from v3 all the way to the new @variant capabilities in v4.

Hanging punctuation places quotation marks and other punctuation visually outside the text block, so the left edge of the text appears straight across every line. With the CSS property hanging-punctuation, this centuries old trick from book printing typography can be implemented with a single line of CSS, with no negative margins or JavaScript hacks needed.

Real component isolation needs two separate guarantees: collision free class names and a predictable specificity order. CSS Modules deliver the first guarantee at build time, native Cascade Layers deliver the second at runtime, and together they create an isolation that requires neither Shadow DOM nor a UI framework.

Ever since the iPhone X with its notch and the iPhone 14 Pro with its Dynamic Island, web developers have had to make sure content does not disappear behind hardware elements. CSS env() together with the safe-area-inset-* variables is the standardized solution, working the same way across browsers, PWAs and native WebViews.