Proud of this little trick. If you've started using CSS gap decorations, you might know you can inset the lines by some amount. Well, if you also use a CSS size container, you can inset the lines by, say, calc(50cqi - 2px) to get a 4px wide line! ➡️ patrickbrosset.com/lab/containe...

Gap Decorations have changed a BUNCH since they went from experimental to shipping in Chrome and Edge. Here's Microsoft's Sam Davis Omekarajr building off an example @patrickbrosset.com did for us a while back to demo what's new. css-tricks.com/css-gap-deco...

Gap Decorations Are Now Available, Here’s What’s New | CSS-Tricks

Today, with CSS gap decorations fully supported in Chrome and Edge, starting with version 149, you can now very easily style gaps, and with a lot of control.

css-tricks.com

Been quiet for a week, enjoying mountains. Quietness will continue until morale improves 😃

Amen brother. I get this a lot, too. “How do you make your animations?” HTML, CSS, JS. The web already has everything you need to make the most beautiful and engaging content in the world. No batteries needed.

HTML client-side includes anyone? Been hearing y'all asking for this. @nomster.bsky.social sent out an "Intent to Prototype" yesterday that includes this and other things!: groups.google.com/a/chromium.o... More details in the explainer: github.com/WICG/declara... Early days (but exciting days!).

Do you know about WPT (Web Platform Tests): wpt.fyi ? If so, do you know what it's for? Do you use the site? Would you want it to present other data, graphs, etc. to help you make decisions about your web development-related tasks?

Do you know about WPT (Web Platform Tests): wpt.fyi ? If so, do you know what it's for? Do you use the site? Would you want it to present other data, graphs, etc. to help you make decisions about your web development-related tasks?

A new level of mind-blowing just dropped: css-dos.ahmedamer.co.uk Run MSDOS in the browser, 100% in CSS! There's a bit of compiler magic so it doesn't take 3 months to load, but there's an option to load the raw CSS instead if you want, which does crash the tab 😁

Curious, is JavaScript runtime compatibility an issue these days? Rather, knowing which APIs are supported across different runtimes (Node, Bun, Deno, Netlify, etc.)? I found runtime-compat.unjs.io which seems nice. But I wonder: is this up to date? Is it crucial (can't work without it)?

Great read! These resonate a lot with me: > A Web platform without polyfills would be a stagnant platform > Without polyfills, [...], a single browser has undue power to hold back the Web > Developers being able to use web features before wide availability is a win for the Web as a whole

Lea Verou, PhD@lea.verou.me · 3w ago

🔥 New blog post: In defense of polyfills A highly influential spec editor expressed the opinion that polyfilling is harmful. I beg to differ. lea.verou.me/blog/2026/po...

CSS mixins are great for little utilities, to shorten the code and make it easy to reuse. Tailwind could be a really good candidate for a mixins refactor! Left: tailwind, styles all over your HTML 🤮 Right: mixins, same DRY reuse, plus separation of concerns, semantic HTML, and parameters.

Ah yes... this. :-) It's very very nascent, but my team is looking into css-mixins.

Patrick Brosset@patrickbrosset.com · last mo.

Oh, what a way to start the week 😍 CSS mixins implementation is starting in Chromium, from my team at Microsoft.

I love that Patrick is writing this new series. It's really difficult to know what improvements are happening in the Web Platform. Here is an authoritative source without a bunch of marketing sping - just developer content.

Patrick Brosset@patrickbrosset.com · 4w ago

What's new in Edge for web developers: our new series to learn about the newest features in Edge (and Chromium), experiments you can test now, and highlights from the broader ecosystem. In this issue: CSS gap decorations, focusgroup, PWA migration, and more! ➡️ blogs.windows.com/msedgedev/20...

Heard of the Supporters of Chromium-Based Browsers (aka SoCBB)? No? Well, we at Microsoft came together with Meta, Opera, and Google to fund improving code, fixing bugs, interop issues in Chromium, so it stays healthy. Said another way: get paid to fix chromium bugs!

What's new in Edge for web developers: our new series to learn about the newest features in Edge (and Chromium), experiments you can test now, and highlights from the broader ecosystem. In this issue: CSS gap decorations, focusgroup, PWA migration, and more! ➡️ blogs.windows.com/msedgedev/20...

New in Edge for developers – Style layout gaps, improve keyboard accessibility and migrate your PWA to a new origin

Welcome to New in Edge for developers, a new series featuring recent web platform updates in Microsoft Edge that help web developers build better sites and apps. In this first edition, we'll look at ...

blogs.windows.com

If you have a Linux device with a Chromium-based browser installed on it, can you type `navigator.gpu` in the Console and tell me if this works? My understanding is that WebGPU is always enabled, but then getting an actual adapter might fail depending on your hardware. Trying to confirm. #halp

Very clever @webdevs.firefox.com DevTools feature 🦊 When you go to a page from a file URL, with DevTools open, you can now map "https://firefox.localhost" to the file's parent folder. So, now, I have "https://firefox.localhost" wired up to my Downloads folder. No servers. Thank you Firefox!

Oh, what a way to start the week 😍 CSS mixins implementation is starting in Chromium, from my team at Microsoft.

On July 4, 2007, Chris Coyier, a web designer, established the CSS-Tricks portal. The portal brings web designers daily news and tutorials from the world of web design. #WebDesignHistory

navigator.clipboard.read() can be inefficient if the clipboard contains multiple representations of the same data, some really big and which you don't need. We're fixing this in Chromium! Now the API lists the available formats first, and only reads data when you select one of them. Learn more ⬇️

Selective format read: A better default for the Async Clipboard API  |  Blog  |  Chrome for Developers

An improvement to the Async Clipboard API.

developer.chrome.com

I believe this might be your friend www.11ty.dev/docs/usage/i...

Incremental

A docs page for Eleventy, a simpler static site generator.

11ty.dev

I have a site #BuiltWithEleventy with A LOT OF pages. When I work locally, the file watcher kicks off the build and reloads the page via the local dev server. Only, it takes a looooong time, even for a small CSS change. Is there a way to not re-build for certain types of file changes (e.g. CSS)?

Poetic CSS course is live for early-bird registration! Only available during July. Thanks for your patience, we had some last-minute fixes. #css courses.oddbird.net/poetic-css/

Poetic CSS

Understand CSS as a system — so you can write, review, and maintain web styles with confidence on a timeline and under budget.

courses.oddbird.net

Hey y'all, putting out the bat signal: I'm looking for full-time, part-time, or contract work in product design or frontend development. ("Design engineering" if you're trendy.) Over a decade of experience building design systems for startups, healthcare, civic tech + more. ky.fyi

Ky Decker

Ky is a designer and web developer based in NYC.

ky.fyi

focusgroup has shipped in chromium 150! developer.chrome.com/blog/new-in-... Its been a long time coming, glad to have been able to get this out the door! Also note that there polyfill ready to go: www.npmjs.com/package/@mic...

New in Chrome 150  |  Blog  |  Chrome for Developers

CSS text-fit property, Focusgroup declarative keyboard navigation, and CSS background-clip border-area.

developer.chrome.com

Better late than never, I've finished off my game for the month of June! Introducing "Wire Loop". A game where you drag a loop around a wire, and try not to touch the wire. It has a level editor for you to share new levels among friends! k9l.io/wire-loop

Wire Loop

Drag the loop along the wire without touching it.

k9l.io

I love the web features explorer monthly update RSS feed. Each month I get a little report about what became Baseline, and what browsers shipped that month 📆 Quick to read, to the point ⏩ RSS: web-platform-dx.github.io/web-features...

There's a lot of excitement for CSS Gap Decorations right now, which is great. However, the feature is only available in Chromium-based browsers (Chrome or Edge 149+) for now. Want it in other browsers? Have a specific use case for it? Leave a 👍 AND a comment with your use case here ⬇️

Gap decorations · Issue #362 · web-platform-dx/developer-signals

This GitHub issue is for collecting web developer signals for Gap decorations. The column-rule and row-rule CSS properties display decorative lines between columns and rows of a flex, grid, or mult...

github.com

Come join our rendering team at Microsoft Edge!

Senior Software Engineer | Microsoft Careers

Develop and improve web platform features in Chromium rendering pipeline to bridge the gap between native applications and the web. Collaborate and communicate effectively with engineers and program m...

apply.careers.microsoft.com

Oh boy do I have good news for you: groups.google.com/a/mozilla.or...