Page 12 - CSS

With :has(), CSS can for the first time select an element based on its descendants or following siblings, a capability the language waited years for. That power comes at a cost though: :has() forces the browser to search an entire subtree for every candidate instead of checking a single node, which can become noticeable in large DOM trees.

Tailwind CSS v4 has switched its entire default color palette to OKLCH, by far the best color space for perceptually uniform, predictable color palettes on the web. This guide explains how OKLCH works, how to build your own palettes with it, and how Lightning CSS automatically ensures browser compatibility.

A range input is one of the form controls with the biggest differences between browsers, because track, thumb and fill level each need their own vendor specific selectors. With the right CSS techniques, a fully custom slider can be built without loading an additional JavaScript library.

Anyone who only knows the has selector as a parent selecting tool is using a fraction of its potential. This collection shows concrete recipes for form validation, empty states, quantity queries and theme switching that previously required JavaScript and are now pure CSS.

line-clamp limits text blocks to a fixed number of lines and replaces excess content with an ellipsis, with no JavaScript measurement of text width whatsoever. For cards, product lists, and preview snippets, this is the most reliable way to build consistent layouts, as long as fallbacks and accessibility are considered from the start.

When a user scrolls inside a modal or dropdown to its edge, the browser by default simply keeps scrolling the page behind it, an effect called scroll chaining. overscroll-behavior deliberately interrupts that handoff at a container's boundary and also prevents accidentally triggering pull-to-refresh on mobile devices, entirely without preventDefault workarounds in JavaScript.

CSS Nesting is natively available in all modern browsers in 2026. The & selector, nested media queries, and at-rules like @layer and @supports inside rule blocks make preprocessors unnecessary for many projects. What once required Sass, Less, or PostCSS now works directly in the browser, with no build step, no source maps, and no dependencies.

A well thought out design token system is the foundation of every scalable frontend project. With Tailwind CSS v4 and @theme, design tokens become CSS Custom Properties that are simultaneously available as Tailwind utilities, in CSS properties and in JavaScript, a true single source of truth for colors, typography, spacing and more.

Without a clear Hyva theme CSS architecture, every Magento frontend grows into a pile of repeated utility chains that nobody can maintain cleanly anymore. Cascade layers, design tokens and modular CSS partials give the architecture a structure that scales with the shop instead of working against it.

A paint worklet does not draw a background as a finished image file, it draws it as a small JavaScript program that the browser runs directly into the element's background on every repaint. Register a parametrized pattern as a worklet once, and it can be reused across any number of components through CSS custom properties, without exporting a new SVG file for every color variant.