Modern CSS techniques, layout tricks, animations, and design system patterns for the modern web.
While the HTML <picture> element handles responsive inline images, CSS background images have historically required complex media queries. The image-set() function allows the browser to automatically select the most appropriate background image based on screen resolution and format support.
The display: contents property allows an element to visually disappear while its children participate directly in the parent's Grid or Flexbox layout. This article breaks down how it works, when to use it for semantic HTML, and the historical accessibility bugs you need to know.
CSS now supports advanced mathematical functions like round(), mod(), and rem() natively. This article explains how to use these functions to calculate dynamic grid tracks, snap typography to a baseline grid, and avoid complex JavaScript resize listeners.
Explore the new CSS @when and @else at-rules that bring conditional logic directly into stylesheets. This article covers practical use cases for creating state-dependent styles, responsive behavior without media queries, and theme switching that actually makes sense.
Windows High Contrast mode forces a user-defined color palette on web pages, often breaking custom UI components like styled checkboxes or buttons. The forced-colors media query allows developers to detect this mode and apply specific CSS to restore visibility.
Custom List Markers with @counter-style: Beyond Bullet Points
aspect-ratio: The Property That Changes How You Think About Responsive Layouts
Controlling Scroll Boundaries with overscroll-behavior