Practical web development tips, snippets, and template tricks you can use today.
Not every image on a page deserves the same loading priority from the browser's default heuristics. Here's when to mark the hero image high, and when deprioritizing the rest helps LCP more.
height: auto was never a number the browser could interpolate toward, which is exactly why it never animated at all. These two features finally give the engine something concrete to target.
Analyzes the performance penalty of using loading="lazy" on above-the-fold images. Demonstrates how to properly combine eager loading for hero images with lazy loading for off-screen content.
Not every image on a page deserves the same loading priority from the browser's default heuristics. Here's when to mark the hero image high, and when deprioritizing the rest helps LCP more.
attr(data-color color, #333) feeding straight into background-color sounds like it already ships, but as of early 2026 it's spec-only. Here's what attr() actually does today, and what's coming.
height: auto was never a number the browser could interpolate toward, which is exactly why it never animated at all. These two features finally give the engine something concrete to target.
Three separate min-resolution media query blocks plus an @supports check for WebP used to be needed just to keep background images in sync. image-set() resolves all of that on its own now.
role='search' bolted onto a plain form is one more attribute developers reliably forget to add. The new <search> element makes that semantic landmark the default instead of an opt-in extra.
Grid and Flexbox both expect their items to be direct children of the container, but semantic HTML forces wrapper elements in between. display: contents removes the wrapper's box, not its markup.
Rounding a fluid width to the nearest multiple of 8px used to require a resize listener writing values back to a custom property. These math functions run natively at layout time instead.