Page 11 - CSS

Anyone who works with Tailwind knows basic group-hover and peer-focus patterns. But once several levels are nested, several child states need to bubble upward, or a form needs to react to the state of a completely different element, the basics stop being enough. Named groups, group-has, peer-has and data attribute state chains solve exactly these advanced group and peer state combinations.

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.

Style isolation used to be the exclusive territory of Shadow DOM and CSS-in-JS. With CSS @scope, the native cascade brings real boundaries into regular stylesheets, with no JavaScript and no custom elements required. Donut scope, proximal specificity and the :scope pseudo-class make CSS components more maintainable and free of unwanted overlap.

While oklch() and lab() describe self-contained color models, the generic color() function opens CSS up to a whole set of named color spaces, including display-p3, a98-rgb, prophoto-rgb and rec2020. Anyone wanting to render product photos or brand colors faithfully on modern displays with a wider color range has to deal with this function, but also needs a clean fallback for older screens and browsers.

Almost every project already knows a simple fade-in on scroll. Scroll timeline becomes genuinely interesting once multiple axes, named timelines and precise animation-range values work together to build complex narrative layouts entirely without scroll event listeners.

Anyone who alternately reads and writes DOM properties inside a loop forces the browser into hundreds of repeated layout calculations per frame. Layout thrashing arises exactly at this point, usually unnoticed inside scroll handlers, resize listeners and animation loops, and is fully avoidable with the right batching pattern.

CSS revert-layer is the keyword that makes the layer-based cascade of CSS fully usable. It resets a property value to what the previous layer would have defined, without overriding specificity, without !important, and without resetting every property one by one. Combined with @layer, it forms a scalable CSS architecture with precise cascade control.

Variable fonts bundle a complete type family with every style into a single file and can be interpolated seamlessly across weight, width and optical size purely through CSS. Once you understand the axes and load them correctly, you save load time while gaining design control that static font styles never offered.

Building a masonry layout with Tailwind CSS is easier than you might think: CSS columns solves 80% of cases without a single line of JavaScript. For the remaining 20%, row sorting, dynamic content and filtering, Alpine.js provides the logic you need without external dependencies.