Tag: CSS

1. Wide Gamut Colors With display-p3: More Vivid Colors for Modern Displays

   Feb 25, 2025

   Most screens sold today can display considerably more colors than sRGB could ever encode. With the color() function and display-p3, these additional, more vivid tones can be used deliberately in CSS, with a clean fallback for devices that only support the classic gamut.

   Read more

2. CSS position:sticky for Sidebar Layouts: top, bottom, z-index and iOS Bugs

   Feb 24, 2025

   position:sticky looks simple on paper, yet in practice it fails for a surprising number of reasons. This article walks through every single pitfall: overflow traps on the parent element, missing threshold properties, z-index inside stacking contexts, and why iOS Safari behaves differently.

   Read more

3. prefers-reduced-motion for Teams: Design Tokens, Testing and Binding Patterns

   Feb 15, 2025

   A single prefers-reduced-motion rule in a single component does not solve a team problem. Only a central motion token system with clear tiers, automated testing and documented patterns ensures that every new animation in the project automatically takes proper account of motion sensitivity.

   Read more

4. Building a Responsive Typography Scale System: From Modular Scale to CSS Custom Properties

   Feb 7, 2025

   A typography scale system defines every font size in a project through a fixed mathematical ratio instead of arbitrarily chosen pixel values. Combined with CSS Custom Properties and clamp(), this becomes a single system of semantic tokens that computes responsive sizes automatically and stays consistent across the entire design system.

   Read more

5. CSS Pseudo Elements: ::before, ::after and Modern Tricks

   Feb 3, 2025

   CSS pseudo elements are one of the most powerful, yet most often superficially used, features of CSS. ::before and ::after with content and counter, the modern pseudo elements ::marker, ::selection and ::first-line: this article shows what is really possible and which tricks actually work in modern CSS.

   Read more

6. content-visibility: Rendering Long Pages Fast

   Feb 2, 2025

   Long product listings, article feeds and documentation pages force the browser to calculate layout and style for thousands of elements, even though only a fraction of them is ever visible. content-visibility skips this work for offscreen regions on purpose, turning a sluggish long page into one that feels as fast as a short one.

   Read more

7. CSS Performance Profiling with the Rendering Tab: DevTools Layers, Paint Flashing, FPS Meter

   Jan 22, 2025

   The Rendering tab in Chrome DevTools is the most powerful tool for CSS performance profiling, and most frontend developers barely touch it. Paint flashing shows in real time which parts of the page are being repainted. The FPS meter gives instant feedback on rendering problems. The layers panel makes compositor layers visible. Together, these tools form the foundation for data driven CSS performance work.

   Read more

8. CSS display: contents: Removing Wrapper Elements from the Layout

   Jan 2, 2025

   Sometimes a wrapper element gets in the way: it breaks the grid line, prevents a direct flex child relationship, or forces an extra layout level. display: contents makes the element invisible to the layout context, its children step in directly. What sounds simple, however, comes with serious accessibility pitfalls that everyone using this feature in production needs to know.

   Read more

9. Sidebar Layouts With Flexbox: Getting Gap, Order and flex-basis Right

   Jan 2, 2025

   A sidebar layout made of a fixed side column and a flexible main area sounds like a trivial task, yet it regularly breaks on long words, overflowing content and missing media queries. Flexbox delivers a solution through flex-basis, gap and the sidebar pattern that wraps automatically with no breakpoints at all, and controls visual order independently of the source code.

   Read more

10. CSS Popover API: Native Dropdowns and Overlays Without JavaScript

    Jan 2, 2025

    The CSS Popover API solves a problem that has plagued the web for years: dropdowns, tooltips, and modal overlays always had to be implemented with JavaScript. With the native popover attribute, ::backdrop, and the :popover-open pseudo-class, the browser now provides a complete solution that is accessible, performant, and free of external dependencies.

    Read more