Tag: CSS

1. CSS Logical Properties for RTL Layouts and Internationalization

   Oct 4, 2025

   Anyone writing layouts with margin-left, padding-right and border-top is baking physical direction dependencies into their code, and those dependencies break for RTL languages and vertical writing modes. CSS Logical Properties solve this problem at its root: a single stylesheet works equally well for Arabic, Hebrew, Japanese and German.

   Read more

2. Custom Properties as an API Contract for Components

   Oct 2, 2025

   A component that exports custom properties by accident rather than by design creates an invisible coupling between consumers and internal implementation details. Anyone who instead treats custom properties like a real API, with a clear namespace, documented fallbacks and version stability, makes design systems safely extensible across team boundaries.

   Read more

3. CSS prefers-reduced-motion: Making Animations Accessible

   Sep 30, 2025

   For people with vestibular disorders, migraines, or epilepsy, excessive animation on websites can trigger real physical discomfort. The CSS media query prefers-reduced-motion gives developers a way to respect that system-wide preference, and WCAG 2.2 makes it a requirement. This article explains the background, the correct implementation strategies, and the most common mistakes.

   Read more

4. CSS @starting-style: Entry Animations for Newly Inserted Elements

   Sep 11, 2025

   For years, animating an element as it appeared from display:none required JavaScript. CSS @starting-style solves this problem natively, enabling elegant transitions for popovers, dialogs and dynamically inserted content without a single line of JavaScript.

   Read more

5. Font Loading Strategies: FOIT, FOUT and Subsetting

   Sep 4, 2025

   A misconfigured font loading setup either shows invisible text while loading or a visible font swap complete with layout jump the moment the web font arrives. With the right combination of font-display, preload and subsetting, both can be avoided without giving up custom typography.

   Read more

6. Responsive Product Grid Patterns: CSS Grid for Magento Category Pages

   Sep 2, 2025

   A responsive product grid pattern with auto-fill, minmax and aspect-ratio ensures product cards stay evenly distributed at every screen size, without maintaining a separate media query for every column count. This technique is the difference between a category grid that breaks at every new screen width and one that adapts by itself.

   Read more

7. Optimizing the CSS Critical Path and PageSpeed

   Sep 1, 2025

   Every CSS stylesheet that gets loaded in the <head> without optimization blocks the browser until it has been fully downloaded and parsed. Setting critical CSS inline and loading the rest asynchronously is the single most effective step you can take for better Core Web Vitals, and it can be implemented entirely at the CSS level.

   Read more

8. CSS Selectors Level 4: :has, :is, :where, :not, :nth-child of

   Aug 30, 2025

   Selectors Level 4 has fundamentally expanded the CSS toolbox. CSS Selectors Level 4 brings :has as a long-awaited parent selector, :is and :where for compact selector lists, an extended :not and a new :nth-child of syntax. These selectors replace many JavaScript workarounds and significantly reduce CSS redundancy.

   Read more

9. CSS Intrinsic Sizing: min-content, max-content, fit-content Explained

   Aug 22, 2025

   Anyone who always specifies layout sizes in pixels or percentages is ignoring the natural information that CSS boxes already have about their content. CSS Intrinsic Sizing makes these intrinsic sizes directly usable, as a column basis in Grid, as a button width without a magic number, and as table behavior for arbitrary content.

   Read more

10. CSS Masonry Layout Draft: Native Pinterest Layouts in the Browser

    Aug 21, 2025

    Masonry layouts, grids in which items of varying height are stacked without gaps, have been a JavaScript problem for years. The CSS Masonry draft specification brings this behavior natively into the browser: grid-template-rows: masonry promises what previously only libraries such as Masonry.js or Isotope could deliver.

    Read more