Page 18 - CSS

AI generated

View Transitions Between Pages: Cross-Document Navigation Without a Framework

Maxim Mironjuk - March 15, 2025

Page changes in classic multi-page applications usually feel abrupt: the old page disappears and the new one appears with no transition at all. Cross-Document View Transitions close that gap directly in the browser, with a few lines of CSS, no single-page framework and no extra JavaScript for the basic case.

Tailwind CSS

AI generated

Tailwind has: The CSS :has() Variant for Context-Aware Styles

Maxim Mironjuk - March 12, 2025

CSS :has() is the first true parent selector in the history of CSS. In Tailwind v4 you use it directly in the markup: has-[:checked], has-[input:focus], has-[.error]. It lets styles react to the state of child elements, with no JavaScript and no custom CSS file.

Tailwind CSS

AI generated

Divide and Space Between Utilities in Tailwind CSS in Detail

Maxim Mironjuk - March 11, 2025

Divide and space between utilities solve a specific problem that gap alone does not cover: visible divider lines between sibling elements and spacing in layout contexts without native flex or grid support. Anyone who understands how divide-x, divide-y, space-x and space-y work internally avoids unnecessary wrapper divs and picks the right tool for each use case.

Tailwind CSS

AI generated

Tailwind and CSS Cascade Layers: Getting the Interplay Right

Maxim Mironjuk - March 06, 2025

Tailwind v4 already uses native CSS cascade layers internally to bring its own styles into a predictable order. Anyone who understands how this interplay works can place custom CSS and third party stylesheets deliberately, instead of fighting specificity conflicts with ever more important declarations.

CSS Design Patterns

AI generated

Intrinsic Web Design: Principles for Layouts Beyond Fixed Breakpoints

Maxim Mironjuk - March 05, 2025

Classic responsive design thinks in fixed device widths and three or four breakpoints. Intrinsic Web Design flips that perspective: the layout reacts directly to its own content and the space actually available, with minmax, clamp, auto-fit and container queries as practical tools for this approach.

CSS Web Performance

AI generated

Extracting and Inlining Critical CSS

Maxim Mironjuk - March 04, 2025

Loading the entire Tailwind CSS file as a render blocking resource wastes valuable milliseconds before the first visible pixel. This article shows how extraction tools automatically capture the rule set a page actually needs, how inlined critical CSS and deliberately deferred loading of the rest work together, and when the effort truly pays off for a Magento or Hyva store.

CSS

AI generated

CSS Container Queries: Components Instead of Viewport

Maxim Mironjuk - March 02, 2025

CSS Container Queries end the era of viewport-centric responsiveness. A card now knows how wide its container is, and adapts accordingly, whether it appears in a sidebar, a main content area, or a modal. This changes CSS architecture from the ground up.

CSS Web Performance

AI generated

Automating Critical CSS Extraction

Maxim Mironjuk - March 01, 2025

Hand maintained critical CSS goes stale the moment any layout changes, becoming a silent source of frontend bugs. Whoever integrates critical CSS extraction into the build pipeline gets automatically current, correct CSS for the visible area with every deployment, with no developer intervention required.

CSS

AI generated

Wide Gamut Colors With display-p3: More Vivid Colors for Modern Displays

Maxim Mironjuk - February 25, 2025

Most screens sold today can display considerably more colors than sRGB could ever encode. With the color() function and display-p3, these additional, more vivid tones can be used deliberately in CSS, with a clean fallback for devices that only support the classic gamut.

CSS

AI generated

CSS position:sticky for Sidebar Layouts: top, bottom, z-index and iOS Bugs

Maxim Mironjuk - February 24, 2025

position:sticky looks simple on paper, yet in practice it fails for a surprising number of reasons. This article walks through every single pitfall: overflow traps on the parent element, missing threshold properties, z-index inside stacking contexts, and why iOS Safari behaves differently.