Page 9 - CSS

Scroll animations, parallax effects and reveal transitions were built with JavaScript libraries for years. CSS Scroll-Driven Animations make that obsolete: animation-timeline, scroll() and view() enable performant, declarative scroll animations right in the stylesheet, running on the compositor thread with no layout thrashing.

Checkboxes, scrollbars and date pickers belong to the browser, not your own CSS file, and therefore often stay light without further action even when the rest of the page is styled consistently dark. The color-scheme property gives the browser the missing information about which color scheme its native rendering of these elements should use, with a single line of CSS.

touch-action decides which built-in gestures like pinch-zoom or scroll the browser handles for an element, and which instead get passed on to your own JavaScript. pointer-events answers a completely different question: whether an element reacts to pointer input at all. Keeping the two apart lets you build swipe carousels and touch widgets that do not fight the browser over every gesture.

@container style() checks whether a custom property on the query container has a specific value and applies rules only when that condition holds, opening up theming, density switches and design token driven components that stay completely context free. Here is where style queries genuinely help, where they still fall short, and how to fall back safely.

CSS specificity is the most common source of inexplicable styling conflicts. Why doesn't a rule take effect even though it appears further down in the stylesheet? Why does a short selector override a rule that seems to match more precisely? The answer lies in CSS specificity, a calculation system that underpins every piece of stylesheet work.

Two animations that both use transform overwrite each other by default. animation-composition with the values add and accumulate solves exactly this problem and makes it possible to run a hover effect, a scroll animation and an idle motion at the same time on the same property, without one animation swallowing the other.

Anyone working with ml-4 and pl-6 is writing physical CSS properties that have to be manually mirrored for RTL languages such as Arabic or Hebrew. Tailwind Logical Properties such as ms-4 and ps-6 solve this problem elegantly: they automatically adapt to the document's writing direction, with no separate RTL stylesheet and no JavaScript logic.

Anyone writing layouts with margin-left, padding-right and border-top is baking physical direction dependencies into their code, and those dependencies break for RTL languages and vertical writing modes. CSS Logical Properties solve this problem at its root: a single stylesheet works equally well for Arabic, Hebrew, Japanese and German.

A component that exports custom properties by accident rather than by design creates an invisible coupling between consumers and internal implementation details. Anyone who instead treats custom properties like a real API, with a clear namespace, documented fallbacks and version stability, makes design systems safely extensible across team boundaries.

CSS specificity problems almost always stem from unclear cascade ordering. Tailwind's @layer system, with base, components and utilities, solves this problem structurally: every layer level has a fixed position in the cascade, and overrides work deterministically instead of through specificity hacks.