Five Frontend Findings: Lazy Iframes, Repeating Corner Shapes, and Chrome 145

This roundup covers some of the more interesting CSS and frontend stories from the past couple of weeks, including new capabilities in Chrome 145, a clever approach to lazy-loading <iframe>s, and a fresh take on data about how developers actually write CSS.

Protecting the Developer's Flow State

Dr. Milan Milanović has written a thorough piece on the impact of meetings, email, and instant messaging on a developer's ability to focus. The article provides a data-heavy look at how interruptions fragment the day and offers practical suggestions for both individual developers and managers looking to reclaim time for deep work. It's a sobering read filled with statistics about the average time spent in a flow state versus dealing with distractions.

Rethinking Aggressive Responsive Breakpoints

Ahmad Shadeed examines a common pitfall in responsive design: switching to smaller breakpoints too early in the layout. The analysis walks through several real-world website examples where this approach causes problems, detailing scenarios where users might unexpectedly trigger these breakpoints and seeing layouts that are too cramped as a result.

Source: Ahmad Shadeed.

Lazy-Loading Iframes Above the Fold

The native loading=lazy attribute is great, but it only applies to off-screen elements. For above-the-fold embeds that still need to be deferred, Stefan Bauer demonstrates a zero-JavaScript workaround using the <details> element. The technique offers an interesting way to fetch video embeds on demand without adding script overhead to the page.

Repeating Backgrounds with corner-shape

Preethi Sam highlights a novel use case for the corner-shape property. By applying it to elements within an <svg>, it becomes possible to generate unique shapes that can be used as repeating background patterns. This application goes beyond the typical single-element experiments commonly seen with the property, opening up new possibilities for pure CSS patterns.

The CSS Selection: 2026 Edition

While most surveys focus on which CSS features developers use, The CSS Selection (2026 edition) takes a different approach by looking at actual patterns and techniques in stylesheets. This year's data also provides a few laughs via the creative ways developers misspell !important. A few highlights from the wild include !IMPORTANT (entirely too shouty), !impotant (too much information), and the particularly close !importantl.

New Features in Chrome 145 and Other Updates

Chrome 145 recently shipped, bringing with it a set of CSS features that were the subject of this week's quick hits. The main highlights of the update are recapped here, ranging from layout control to text justification.

  • text-justify is now supported, working with text-align: justify to control whether word spacing (text-justify: inter-word) or letter spacing (text-justify: inter-character) is adjusted. It's a feature that was long ago documented when only Firefox had it, so its arrival in another browser is welcome.
  • The word-spacing and letter-spacing properties now accept % values, aligning with behavior already supported in Safari and Firefox.
  • Similarly, overscroll-behavior now works for non-root scroll containers, which brings it into parity with other browsers.
  • New properties for multicolumn layouts are here: column-wrap and column-height. This feature is currently only available in Chrome.
  • Perhaps the most anticipated feature is the customizable <select>, which has landed in this Chrome version as well. This is a significantly more complex feature than it appears on the surface, but a helpful framework explains how it works.
  • Looking ahead, work is underway on the possibility of multiple borders and outlines on a single element and a border-shape property, as demonstrated by Dr. Lea Verou and Una Kravets, respectively.