Page 16 - CSS

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 Design Patterns

AI generated

position-try-options in Practice: Recipes for Tooltips and Menus

Maxim Mironjuk - April 22, 2025

Beyond the built-in shorthands like flip-block, @position-try lets you define your own named fallback positions, complete with their own viewport safety margin. This article walks through ready-to-copy recipes for dropdown menus, nested submenus and tooltips that reliably stay inside the visible area.

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 Design Patterns

AI generated

Layer Strategies for Third-Party CSS Integration

Maxim Mironjuk - April 19, 2025

An embedded payment widget or chat widget almost always ships its own CSS, which cannot be touched and still must not clash with your own design. Cascade layers solve this problem structurally: foreign CSS lands in its own cascade layer below your own layers, guaranteed to lose every specificity fight, without touching a single foreign rule.

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.

Tailwind CSS

AI generated

Smooth Theme Transitions with the View Transitions API in Tailwind CSS v4

Maxim Mironjuk - April 16, 2025

A theme switch that simply swaps a class is technically correct but feels abrupt. With the View Transitions API, color variables registered through @property, and a slim Alpine.js store, the same switch becomes a soft cross fade in Tailwind CSS v4, without adding a separate JavaScript library.

CSS Alpine.js

AI generated

Building a Vertical Timeline Component with Alpine.js

Maxim Mironjuk - April 16, 2025

A vertical timeline component displays events chronologically along a vertical line and reveals steps as the user scrolls. With CSS Grid for the layout and Alpine.js x-intersect for scroll-reveal animations, a flexible timeline component emerges without loading a dedicated timeline library.

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 Design Patterns

AI generated

CSS Anchor Positioning: Chaining Multiple Fallback Positions

Maxim Mironjuk - April 10, 2025

A single fallback position rarely covers every case in CSS Anchor Positioning once an anchor sits close to a screen edge. With position-try-fallbacks you can define a whole chain of alternative positions the browser tries in order until one fits, with no JavaScript and no resize or scroll listener at all.

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.