Page 6 - CSS

CSS

AI generated

CSS @scope: Scoped Styles Without Shadow DOM

Maxim Mironjuk - August 19, 2025

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.

CSS Web Performance

AI generated

Advanced Scroll Timeline: Named Timelines, View Timeline and animation-range

Maxim Mironjuk - August 16, 2025

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.

CSS Web Performance

AI generated

Avoiding Layout Thrashing Systematically

Maxim Mironjuk - August 15, 2025

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

AI generated

CSS revert-layer: Reset the Cascade Precisely with @layer

Maxim Mironjuk - August 14, 2025

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.

CSS Web Performance

AI generated

Variable Fonts in Practice: One Font File Instead of Ten Styles

Maxim Mironjuk - August 13, 2025

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.

CSS Barrierefreiheit

AI generated

Styling Range Inputs: Sliders Without a JavaScript Library

Maxim Mironjuk - August 04, 2025

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.

CSS

AI generated

:has() Selector: Recipes Beyond the Basics

Maxim Mironjuk - August 01, 2025

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.

CSS

AI generated

line-clamp Patterns for Text Truncation: Multi-Line Ellipsis Without JavaScript

Maxim Mironjuk - July 30, 2025

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.

CSS

AI generated

CSS Nesting: Native Nesting Without a Preprocessor in 2026

Maxim Mironjuk - July 27, 2025

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.

CSS Hyvä

AI generated

Hyvä Theme CSS Architecture: Scalable Patterns for Tailwind Components

Maxim Mironjuk - July 15, 2025

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.