CSS: Guides and Practical Know-how | Page 4 | mironsoft Blog
CSS
-
Mar 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.
-
Mar 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.
-
Mar 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.
-
Mar 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.
-
Mar 8, 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.
-
Mar 4, 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().
-
Mar 1, 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.
-
Feb 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.
-
Feb 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.
-
Feb 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.