CSS: Guides and Practical Know-how | Page 16 | mironsoft Blog
CSS
-
Apr 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.
-
Apr 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.
-
Apr 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.
-
Apr 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.
-
Apr 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.
-
Apr 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.
-
Apr 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.
-
Apr 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.
-
Apr 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.
-
Apr 9, 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.