Page 4 - CSS

CSS

AI generated

CSS Grid Subgrid: Aligning Nested Layouts

Maxim Mironjuk - December 04, 2025

Align nested grid elements to the tracks of the parent grid, without JavaScript, without workarounds. CSS Grid Subgrid elegantly and declaratively solves the alignment problem that has long plagued card layouts, forms and multi-column designs.

CSS

AI generated

nth-child: Advanced Formulas

Maxim Mironjuk - November 28, 2025

Most developers only know nth-child through odd and even, yet behind it sits a complete linear formula that enables far more complex patterns. This collection explains the An+B math, nth-last-child and the of S syntax through concrete recipes for grids, lists and pagination.

CSS Design Patterns

AI generated

Holy Grail Layout With Modern CSS: Grid Instead of Floats and Tables

Maxim Mironjuk - November 09, 2025

The Holy Grail Layout of header, two side columns, main content and footer was long considered one of the hardest CSS problems around. With CSS Grid, template areas, gap and subgrid, the same layout can be built today in a handful of clearly readable lines, with no float hacks, no tables and no fragile absolute positioning.

CSS

AI generated

CSS Anchor Positioning: Tooltips and Overlays Without JavaScript

Maxim Mironjuk - November 09, 2025

Tooltips, dropdowns and contextual overlays were solved for years either with JavaScript or with fragile CSS hacks. CSS Anchor Positioning changes that fundamentally: anchor(), position-anchor and @position-try enable precise, context-aware positioning directly in the stylesheet, without a single line of JavaScript.

CSS

AI generated

CSS Houdini: Paint API and Layout API

Maxim Mironjuk - November 06, 2025

CSS Houdini opens up the browser's rendering process to developers. Custom backgrounds, patterns and layout algorithms as worklets, usable directly in CSS. The most powerful, and also the most complex, approach to extending CSS.

CSS

AI generated

CSS @property: Typed Custom Properties for Animation and Validation

Maxim Mironjuk - November 03, 2025

CSS Custom Properties are powerful but untyped: the browser treats them as plain strings. CSS @property changes that fundamentally. With a type declaration, inheritance control and an initial value, Custom Properties become full, animatable CSS values. Gradients, colors and numbers can then be interpolated and hooked into transitions.

CSS

AI generated

CSS :has(): The Game Changer for Layouts

Maxim Mironjuk - October 23, 2025

CSS :has() is more than a parent selector, it is a complete context selector. Layout decisions that used to require JavaScript event handlers can now be made declaratively right in the stylesheet. That changes how you build CSS architectures.

CSS

AI generated

CSS Scroll-Driven Animations: animation-timeline, scroll() and view()

Maxim Mironjuk - October 20, 2025

Scroll animations, parallax effects and reveal transitions were built with JavaScript libraries for years. CSS Scroll-Driven Animations make that obsolete: animation-timeline, scroll() and view() enable performant, declarative scroll animations right in the stylesheet, running on the compositor thread with no layout thrashing.

CSS

AI generated

Understanding and Mastering CSS Specificity

Maxim Mironjuk - October 15, 2025

CSS specificity is the most common source of inexplicable styling conflicts. Why doesn't a rule take effect even though it appears further down in the stylesheet? Why does a short selector override a rule that seems to match more precisely? The answer lies in CSS specificity, a calculation system that underpins every piece of stylesheet work.

CSS

AI generated

Understanding animation-composition: Additive Animations Without Overwriting

Maxim Mironjuk - October 13, 2025

Two animations that both use transform overwrite each other by default. animation-composition with the values add and accumulate solves exactly this problem and makes it possible to run a hover effect, a scroll animation and an idle motion at the same time on the same property, without one animation swallowing the other.