Tag: CSS

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

   May 9, 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.

   Read more

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

   May 8, 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.

   Read more

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

   Apr 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.

   Read more

4. Component Isolation with CSS Modules and Cascade Layers

   Apr 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.

   Read more

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

   Apr 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.

   Read more

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

   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.

   Read more

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

   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.

   Read more

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

   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.

   Read more

9. ITCSS: Scalable CSS Architecture for Large Projects

   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.

   Read more

10. CSS Grid vs. Flexbox: Which Layout System When

    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.

    Read more