What’s !essential #5: Lazy-loading iframes, Repeating corner-shape Backgrounds, and Extra

This problem of What’s !essential is devoted to our associates within the UK (aka me), who’re at the moment experiencing a really depressing 43-day rain streak. Presenting: the 5 most fascinating issues to examine CSS from the final couple of weeks. Plus, the newest options from Chrome 145, and the rest you would possibly’ve missed. TL;DR: a number of content material, but additionally a number of rain.

Why you’ll be able to solely code for 4 hours/day

Don’t fear, you’re solely coding for 52 minutes/day anyway.

Dr. Milan Milanović talks in regards to the devastating impression of conferences, emails, Slack, and interruptions, and what you/your supervisor can do about it. This text is an actual eye-opener with a ton of surprising (however not stunning) statistics in regards to the common developer’s stream state.

Why you shouldn’t swap to smaller breakpoints too early

Ahmad Shadeed explains why you shouldn’t swap to smaller responsive breakpoints too early, with examples of internet sites that’ve completed so and eventualities by which customers would possibly hit these breakpoints.

Find out how to lazy-load above-the-fold iframes

loading=lazy solely works for off-screen components, so Stefan Bauer demonstrates a neat trick for lazy-loading above-the-fold s utilizing

CodePen Embed Fallback

Find out how to create repeating `corner-shape` backgrounds

Preethi Sam reveals us the right way to use corner-shape in s, that are then used as repeating backgrounds. I’ve completed my very own experiments with corner-shape, however that is great and definitely one thing that I hadn’t thought of.

CodePen Embed Fallback

The CSS Choice (2026 version)

What do internet builders really do with CSS? Whereas different analysis research take a look at options, The CSS Choice (2026 version) focuses on CSS patterns and strategies. It’s a really fascinating learn, and also you’ll positively chuckle a couple of times, particularly as you uncover the totally different typos for !essential.

Listed below are a few of my favorites:

!IMPORTANT: too shouty
!impotant: an excessive amount of info
!i: that’s simply lazy
!imPORTANT: wonderful annunciation
!importantl: ah, so shut…

Chrome options and Fast Hits you would possibly’ve missed

Chrome 145 shipped a couple of days in the past, and as at all times, we’ve been sharing some Fast Hits all through the week. You may catch these within the sidebar of the homepage, so be happy to drop by when you’re ever within the ‘hood.

Coincidentally, many of the Fast Hits had been associated to the Chrome replace ultimately, so I’ll recap all the things collectively:

text-justify, which you’ll be able to mix with text-align: justify to specify whether or not you need the phrase spacing (text-justify: inter-word) or letter spacing (text-justify: inter-character) to be adjusted to make the textual content justified. Geoff wrote about this means again in 2017 when solely Firefox supported it (form of…), so by my calculation, Safari ought to help it by 2035. So not this decade, however earlier than GTA 6. Simply kidding… (I believe).
Talking of phrase and letter spacing, word-spacing and letter-spacing now settle for % items, as they do in Safari and Firefox.
Equally, overscroll-behavior now works for non-root scroll containers, like in Safari and Firefox. WebDev RedFox’s warning about overscroll-behavior couldn’t have come at a greater time.
column-wrap and column-height for higher multicolumn layouts are additionally right here now, however solely in Chrome, sadly.
That additionally applies to customizable Name * Email * Website Save my name, email, and website in this browser for the next time I comment.