Page 10 - CSS

For people with vestibular disorders, migraines, or epilepsy, excessive animation on websites can trigger real physical discomfort. The CSS media query prefers-reduced-motion gives developers a way to respect that system-wide preference, and WCAG 2.2 makes it a requirement. This article explains the background, the correct implementation strategies, and the most common mistakes.

An unregistered custom property always inherits in CSS, regardless of whether its name suggests a local, component-scoped value. Only @property gives a custom property a fixed type, a guaranteed initial value, and explicit inheritance behavior, closing an entire class of bugs that are otherwise hard to track down in large design systems.

With marks: crop and the bleed descriptors of the @page rule, crop marks and bleed can be simulated directly in the browser, no layout or print software required. Anyone who understands where this CSS mechanic ends and where real print production with dedicated PDF export begins avoids expensive surprises right before a print job ships.

For years, animating an element as it appeared from display:none required JavaScript. CSS @starting-style solves this problem natively, enabling elegant transitions for popovers, dialogs and dynamically inserted content without a single line of JavaScript.

grid-auto-flow: dense automatically fills gaps in a CSS grid by searching backward on every placement. That produces a tight, gapless layout, but it can separate the visual order of elements clearly from their order in the markup, with direct consequences for keyboard navigation and screen readers.

A misconfigured font loading setup either shows invisible text while loading or a visible font swap complete with layout jump the moment the web font arrives. With the right combination of font-display, preload and subsetting, both can be avoided without giving up custom typography.

A responsive product grid pattern with auto-fill, minmax and aspect-ratio ensures product cards stay evenly distributed at every screen size, without maintaining a separate media query for every column count. This technique is the difference between a category grid that breaks at every new screen width and one that adapts by itself.

Every CSS stylesheet that gets loaded in the without optimization blocks the browser until it has been fully downloaded and parsed. Setting critical CSS inline and loading the rest asynchronously is the single most effective step you can take for better Core Web Vitals, and it can be implemented entirely at the CSS level.

Classic CSS custom properties are plain strings with no type, which is why the browser can't animate them even when the value looks like a number or an angle. The @property rule lets you register custom properties with a genuine syntax type, an inheritance behavior, and an initial value instead, which suddenly makes them animatable. This article covers how to combine @property meaningfully with Tailwind CSS, including a practical example animating a gradient angle rotation.

Selectors Level 4 has fundamentally expanded the CSS toolbox. CSS Selectors Level 4 brings :has as a long-awaited parent selector, :is and :where for compact selector lists, an extended :not and a new :nth-child of syntax. These selectors replace many JavaScript workarounds and significantly reduce CSS redundancy.