Page 8 - CSS

AI generated

CSS will-change: Use It Wisely or Risk a Memory Leak

Maxim Mironjuk - May 09, 2025

will-change promises smoother animations through GPU layer promotion, and it delivers on that promise when used correctly. Applied permanently to too many elements, though, it causes memory leaks, increases GPU memory usage, and can actually make animations slower instead of faster.

CSS

AI generated

CSS color-mix(): Mix Colors Dynamically in CSS

Maxim Mironjuk - May 08, 2025

CSS color-mix() mixes colors natively in the browser: no Sass, no JavaScript, no preprocessors. Choosing the right color space produces perceptually uniform transitions, natural transparency variants, and dynamic themes that respond to user preferences.

CSS Design Patterns

AI generated

Hanging Punctuation for Quotes: Letting Marks Hang Cleanly Off the Text Block

Maxim Mironjuk - April 25, 2025

Hanging punctuation places quotation marks and other punctuation visually outside the text block, so the left edge of the text appears straight across every line. With the CSS property hanging-punctuation, this centuries old trick from book printing typography can be implemented with a single line of CSS, with no negative margins or JavaScript hacks needed.

CSS Design Patterns

AI generated

Component Isolation with CSS Modules and Cascade Layers

Maxim Mironjuk - April 24, 2025

Real component isolation needs two separate guarantees: collision free class names and a predictable specificity order. CSS Modules deliver the first guarantee at build time, native Cascade Layers deliver the second at runtime, and together they create an isolation that requires neither Shadow DOM nor a UI framework.

CSS

AI generated

CSS env() and Safe Area Insets: iPhone Notch, Dynamic Island & PWA

Maxim Mironjuk - April 23, 2025

Ever since the iPhone X with its notch and the iPhone 14 Pro with its Dynamic Island, web developers have had to make sure content does not disappear behind hardware elements. CSS env() together with the safe-area-inset-* variables is the standardized solution, working the same way across browsers, PWAs and native WebViews.

CSS Design Patterns

AI generated

Custom Properties as a Dark-Light Token System: a Three-Tier Token Architecture

Maxim Mironjuk - April 23, 2025

A maintainable dark-light token system does not emerge from a single layer of custom properties, but from three cleanly separated tiers: primitive tokens, semantic tokens and component tokens. Together with the light-dark() function, this architecture can be implemented without a growing media query per component.

CSS Barrierefreiheit

AI generated

The color-contrast() Function for Accessibility: Automatic Contrast Selection in CSS

Maxim Mironjuk - April 21, 2025

The color-contrast() function from CSS Color Level 5 lets the browser itself decide which of several candidate text colors gives the best WCAG contrast against a given background. This removes manual contrast calculation and makes dynamically generated backgrounds automatically readable and accessible.

CSS

AI generated

CSS Blend Modes: mix-blend-mode and background-blend-mode

Maxim Mironjuk - April 18, 2025

Photoshop layer effects right in the browser, no export, no JavaScript. CSS Blend Modes let you build duotone effects, texture overlays and creative typography purely in the stylesheet. The key lies in understanding the math behind multiply, screen and overlay, plus the compositing context that isolation controls.

CSS Design Patterns

AI generated

ITCSS: Scalable CSS Architecture for Large Projects

Maxim Mironjuk - April 15, 2025

ITCSS orders a stylesheet not by file type or component, but by the specificity and reach of every rule. This CSS architecture makes conflicts between global base rules and specific overrides predictable, instead of leaving them to the chance of import order, and stays maintainable across dozens of developers over years.

CSS

AI generated

CSS Grid vs. Flexbox: Which Layout System When

Maxim Mironjuk - April 09, 2025

CSS Grid vs. Flexbox is not a matter of taste, it is a precise decision based on layout dimension. Anyone who understands the fundamental differences chooses the right tool for every situation, and combines both systems wherever it makes sense.