Page 5 - CSS

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.

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.

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.

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.

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.

Anyone who always specifies layout sizes in pixels or percentages is ignoring the natural information that CSS boxes already have about their content. CSS Intrinsic Sizing makes these intrinsic sizes directly usable, as a column basis in Grid, as a button width without a magic number, and as table behavior for arbitrary content.

Masonry layouts, grids in which items of varying height are stacked without gaps, have been a JavaScript problem for years. The CSS Masonry draft specification brings this behavior natively into the browser: grid-template-rows: masonry promises what previously only libraries such as Masonry.js or Isotope could deliver.