 we tend to talk more about the new and latest and greatest in CSS, but i always appreciate a deep-dive into "established" properties, like this one by @chriscoyier https://frontendmasters.com/blog/backgrounds-for-the-box-model-and-why-it-can-be-useful/   The CSSWG as agreed to publish a first Working Draft for Masonry layout – with the two major proposals merged where possible, and otherwise presented side by side. Most of the differences are syntax only. Here's the Editor's Draft that will be published: https://drafts.csswg.org/css-grid-3/ And the discussion: https://github.com/w3c/csswg-drafts/issues/8195#issuecomment-2344098078  📢 New post: The State of ES5 on the Web. For years, we defaulted to transpiling to ES5 in order to support IE. But is that still necessary? I took a look at the data to find out, and I'll just say that the results were *actually* quite surprising! 🙀 https://philipwalton.com/articles/the-state-of-es5-on-the-web/
Show previous comments
@philipwalton Fascinating, thank you for this! Is it possible that some sites served ES6+ code because they recognised Chrome (which HTTP Archive uses for the crawl) BUT would serve purely ES5 code to (say) IE11? I've no idea how common this would be in practice, but I remember plenty of recommendations in the past about doing this sort of thing. @philipwalton Very interesting investigation! What I feel like I'm missing is how many users are in practice still using browsers without ES2015+ support. I know @ljharb knows about similar Node.js data, maybe they also know about browser usage? I otherwise completely agree that the state where websites think they support ES5 browsers but don't is a problem. @philipwalton Do you know of any bundle analysis tooling that covers this ES5/6 gap? I also think about stuff like SVGs that sneak into bundles and tanks performance. Or like Jake's post about a setTimeout in an IFFE. Is there a Lighthouse for bundles? Most bundle analyzers I see are just tree-graphs, which is helpful but not critical about how much "over-compiled" code has leeched into your build. Working on an additional PR now that adds a _bit_ more complexity but gains a ~15% perf boost in Chrome and ~36% in Firefox. It relies on detecting when the `content-visibility: auto` state changes and using the old `<img data-src>` trick to set the `src` in that case. https://github.com/nolanlawson/emoji-picker-element/pull/449 A bit of extra code, but still not as gnarly as a full virtual list! 📝 New post: I wrote about the Performance Monitor panel in Dev Tools (which I didn't know existed even though I use Dev Tools every day) and it helped me debug a big performance issue. https://daverupert.com/2024/09/dev-tools-performance-monitor-panel/ Simply add a name attribute with the same value to all participating <details> elements and you're all set ... it's _that_ easy! 🤩 Learn all about it here: https://developer.chrome.com/docs/css-ui/exclusive-accordion I've also included a small polyfill for older browsers in the post.  @bramus Were the accessibility concerns around auto-closing elements that were raised during the spec process ever addressed? I don't see anything about that here.
Show previous comments
@SilverEagle last time they broke it for good and it was the v4 upgrade. That was painful, but a non major semver upgrade? Evil especially as they always recommend to only use the major version tag @SilverEagle I'll never understand why people are so worried about incrementing semver. It's a number. It communicates caution. Big miss on this. 👀 There's some interesting movement happening in WebKit wrt Scroll-Driven Animations … https://bugs.webkit.org/show_bug.cgi?id=279513 And the next one related to scroll-driven animations got fixed: https://bugs.webkit.org/show_bug.cgi?id=279710 IT'S HAPPENING, PEOPLE! 🤩 Get prepared for it now, by checking out https://scroll-driven-animations.style for demos and a free video course! Just a wee reminder that "global support percentages" for browser features mean literally nothing other than fun dinner party conversation. What matters is the support percentages for the people visiting your website, which are unique to your website, and differ from website to website for all sorts of reasons.   @chriscoyier (and even then support percentages are heavily influenced by survivorship bias) My excitement for Safari 18 including support for Style Queries faded a little after hitting https://webkit.org/b/271040 today. Turns out Style Queries that target `body` don’t work in WebKit/Safari for some reason. **The Over-Easy Machine** - UI layering with `anchor()` **Watch** @argyleink Adam, is there a way for the popover to shift left/right if it extends outside the viewport edge? I see how to flip it when vertical scrolling, but what if the viewport narrows and the inline edges of the popover now touch the sides? I scratched my own itch (again) and built a #caniuse CLI tool. It differs from other attempts at this by also integrating @MDN’s browser-compat-data + collapsing the releases in the table (just like the website does). ⌨️ npm i -g @bramus/caniuse-cli The Servo team landed an incredible amount of work and Flexbox is now on by default! While there's still work to do, this is a huge milestone for Servo! Check out the before & after of the servo.org website below! Oh no! Apparently “Unsplash Source” – which allowed you to get a random photo from @unsplash – got sunset 😢 https://unsplash.com/documentation/changelog#unsplash-source-sunset If your demos – like mine often do – rely on it, go give them an update! Easiest fix is to swap out Unsplash Source for https://picsum.photos/. all I'm doing is taking the contents of the <pre> and calling document.startViewTransition() before I inject the authored styles, browser does the rest I must say that CSS nesting, `light-dark()`, relative color format and `@property` are really changing how I'm writing CSS, and how much more maintainable and elegant such code looks like now! @nicolaschevobbe I agree that there is some good stuff. I'm not a big fan of light-dark(), though. I prefer to have CSS variables named by purpose and then override them for dark mode. Oh my word CSS is freaking amazing, coming soon to all browsers anchor-positioning. This demo has ZERO JS and uses `anchor-positioning` and `popover`  @dletorey Hmm, it only properly works for me in Chrome Canary 130 and doesn’t fully work in Chrome 128. Uhoh! Turns out registering a custom property with the syntax "<string>" doesn’t actually work in Chrome ≤129 nor Safari ≤17.6. https://codepen.io/bramus/pen/dyBgJNY Thankfully it’s fixed in all current preview releases. Workaround: register the prop as "*", which also accepts strings. |
Gregory's Server
