Practical web development tips, snippets, and template tricks you can use today.
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 HTML <search> element provides a semantic landmark for search and filtering interfaces without requiring ARIA roles. This article covers the exact criteria for when to use <search> versus a standard <form>, and how it impacts screen reader navigation.
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.
Developers have historically relied on JavaScript to create exclusive accordions where opening one panel closes the others. The new name attribute on the HTML details element solves this natively, allowing browsers to handle the state management.
Custom List Markers with @counter-style: Beyond Bullet Points