Page 4 - CSS

CSS

AI generated

CSS oklch() Color Space: Better Colors on the Web 2026

Maxim Mironjuk - March 16, 2026

oklch() is the most modern color space in CSS Color Level 4 and solves fundamental problems of hsl() and rgb(): the lightness axis is perceptually uniform, gradients no longer pass through desaturated gray tones, and access to the P3 display gamut enables more vivid colors on modern screens, directly in the browser, with no image editing software required.

Tailwind CSS

AI generated

Tailwind CSS for HTML Email Templates: Table Layout Instead of Flexbox

Maxim Mironjuk - March 16, 2026

Email clients do not render modern CSS, Outlook still partly relies on the Word rendering engine, and Flexbox or Grid simply do not work reliably there. Applying Tailwind utility classes consistently to table layout still allows consistent, maintainable HTML email templates to be built, without starting from scratch for every newsletter.

CSS Barrierefreiheit

AI generated

hyphenate-limit-chars: Fine-Tuning Automatic Hyphenation

Maxim Mironjuk - March 15, 2026

hyphens: auto enables automatic hyphenation, but without fine-tuning the browser will happily hyphenate where only one or two characters remain before or after the break. hyphenate-limit-chars and its related limit properties define the minimum word length and how many characters must remain before and after the hyphenation point.

CSS Barrierefreiheit

AI generated

CSS Focus Management and Keyboard Navigation: :focus-visible, :focus-within

Maxim Mironjuk - March 10, 2026

Good focus management separates web development from accessible web development. :focus-visible shows the focus ring only during keyboard use, :focus-within enables container-level reactions, and together with correct outline styles that follow WCAG they form the foundation for keyboard navigation without compromising visual design.

CSS Web Performance

AI generated

CSS Animation Performance and GPU Compositing

Maxim Mironjuk - March 08, 2026

A CSS animation running on the compositor thread cannot be blocked by the JavaScript main thread. Anyone who wants to understand why some animations flow at 60fps while others stutter needs to know the path from CSS property to GPU layer, and when will-change helps instead of hurts.

CSS

AI generated

CSS Math Functions round(), mod() and rem() in Practice

Maxim Mironjuk - March 04, 2026

With round(), mod() and rem(), the browser computes values directly in the stylesheet declaration, without a script pre-calculating numbers and injecting them as a custom property. Anyone who needs to snap sizes to a grid or repeat values cyclically, for example carousel indices or stripe patterns, gets a tool that can be embedded directly inside calc().

CSS

AI generated

CSS Custom Highlights API: Style Text Highlights Programmatically

Maxim Mironjuk - March 01, 2026

Highlighting search terms, visualizing diff changes, marking voice recognition matches: until now, all of this required wrapping text nodes in span elements, which corrupts the DOM and jeopardizes accessibility. The CSS Custom Highlights API solves this problem elegantly: define ranges, register them, style them with ::highlight(), done.

CSS

AI generated

Flexbox gap Instead of Margin: Why gap Wins Almost Every Time

Maxim Mironjuk - February 26, 2026

Setting spacing between flex items with margin almost always means undoing the edge effect at the outer boundaries afterward with a selector like :last-child. The gap CSS property fixes this at the root: it produces space exclusively between items, never at the container's outer edges, making one of the most frequently repeated CSS hacks unnecessary.

Tailwind CSS

AI generated

Debugging Tailwind Class Conflicts: Specificity, Cascade Layers and Order

Maxim Mironjuk - February 23, 2026

When a utility class sits right there in the markup but simply does not show up in the browser, the cause is rarely Tailwind itself. Tailwind class conflicts almost always come from cascade order, third party CSS specificity, or overlapping variants, and can be resolved reliably with a systematic debugging workflow.

Magento CSS

AI generated

Sticky Checkout Summary with CSS: The Cart Overview That Scrolls Along

Maxim Mironjuk - February 23, 2026

A sticky checkout summary sounds like a single CSS line, yet position sticky regularly breaks in checkout due to overflow containers, wrong height calculations and stacking context traps. With dvh units, a clean scroll container and the right grid structure, the cart overview stays reliably visible while the user scrolls through the checkout steps.