As a French speaker, getting « cul-de-sac » in CSS would make my day.
Posts by Patrick Brosset
Help us define CSS gap decoration, an awesome new CSS feature which lets you draw within flex, grid, or multicol gaps. Read blogs.windows.com/msedgedev/20... for context.
Example CSS Grid layout with gap decorations. Decoration ends that form intersections are circled and labeled "Intersecting?"; decoration ends that don't form intersections are circled and labeled "Dangling?".
NAMING HELP NEEDED: Looking for single words, to be used in CSS property names, that distinguish between gap decoration ends that form intersections vs. those that don't. Best idea I've come across so far is "intersecting" and "dangling". Do you have other suggestions?
CSS Weekly #638
Learn about:
💠 corner-shape property
📋 customizable select
📄 folding corner effect
🌗 contrast-color()
➕ and more
Featuring @utilitybend.com, @patrickbrosset.com, @kittygiraudel.com, @una.im, @bram.us, @css-only.dev, @alvaromontoro.com,
cssw.io/issue-638
A series of little black dots which converge to a single line that leads to a green checkmark. WebDX Community Group is written below.
Stylized W and X letters, over each other, to create an abstract black and green sign. WebDX Community Group appears below it.
WDX letters. The W is black and green, the left part is black and the right part is green, making it look like a check mark. D is black. X is orange, and looks like a across. The checkmark and cross signs are circled in matching color circles.
We'd like to adopt a logo for the WebDX community group (the group that's responsible for web-features data, which powers Baseline).
We have 3 proposals from our community. Help us choose by voting at github.com/web-platform... with a 👍 on the one you prefer!
Thank you for the shout out to the WebDX site at web-platform-dx.github.io/web-features...
If folks are interested in improving the site, we welcome help! Check out github.com/web-platform... ♥️
CSS is DOOMed!
I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.
cssdoom.wtf
Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.
p75 and p90 JavaScript bytes on the web have exploded since May, 2025—easily the largest 10 month period based on HTTP Archive data since 2023.
The long-tail is getting worse, very quickly.
Gemini, what happened in May 2025?
If the work I've been putting out since 2012 has helped you in any way or you just like it, then please consider supporting it.
❇️ ko-fi.com/anatudor
❇️ www.patreon.com/c/anatudor
Because praise can't keep me afloat. But you can.
I don’t have time to do as many conference talks these days but @cssday.nl always has a special place in my heart. It’s such a fantastic conference, both for the content and the community. If you can go, don’t miss it!
This new, experimental, ‘Network Efficiency Guardrails’ feature is available in Edge 146: blogs.windows.com/msedgedev/2026/03/17/mon...
POLLS: The CSS Working Group is looking for author feedback on two topics related to CSS Gap Decorations. Questions below. For background information on Gap Decorations, see the explainer: github.com/w3c/csswg-dr...
To celebrate something-or-other, I created a retro CRT using only vanilla CSS!
📺 codepen.io/ivorjetski/p...
No images. No JavaScript. No SASS.
Fully turn-off-and-on-able!
Also a documentary about the making of it: www.youtube.com/watch?v=wdNH...
@CodePen #css #cssart #cssonly #frontend
Illustration showing multiple pieces of a webapp, 3rd-party content, images, analytics, data, etc. all going through a single Network pipe, and, on the other side, a webpage with a part of it still loading.
😪 Large web apps often fetch many resources at once, including 3rd party parts they don't control, creating slow UX.
💡 Network Efficiency Guardrails helps you catch and fix load bottlenecks.
ℹ️ Check out our proposal to monitor and improve your app’s load perf: blogs.windows.com/msedgedev/20...
Also, we announce new speakers today. @kevinpowell.co Lea Verou, @matuzo.at and @html5test.com will join us on 11th and 12th of June.
No flamethrowers will be used. Probably.
cssday.nl
My career highlight was getting to talk at CSS Day a few years ago, so I'm so excited to be heading back this year, alongside so many other great speakers.
Very cool
And there I was feeling proud of myself, smart and all, when @janeori.propjockey.io had gone way further that.
Seriously, check out Jane’s “Expert CSS: The CPU hack” article. Awesome stuff.
dev.to/janeori/expe...
DOOM fully rendered in CSS. Every surface is a <div> that has a background image, with a clipping path with 3D transforms applied. Of course CSS does not have a movable camera, so we rotate and translate the scene around the user.
A vertical column of folders with labels on the right fanned out and curving towards the right.
Nice cards fanned out in a subtle arc.
Circular options with icons around another circular item in the center with a star icon.
Curious about custom <select>?
I wrote about some of my recent demos over at @css-tricks.com!
Take a look ✨ css-tricks.com/abusing-cust...
Want to get your mind blown with CSS? Hang out with the wonderful CSS community? Meet new folks? Learn a ton of new and useful things?
➡️ Get your ticket for CSS Day 2026 while they last!
It does seem a little too separated, when you could directly do
self.addEventListener("fetch", (event) => {
if (event.request.isReloadNavigation) { ... }
});
If you use a service worker's fetch event listener, would a `isReloadNavigation` boolean property be helpful to you?
It would indicate if the current request was a user-initiated reload (e.g., refresh button click, location.reload(), or history.go(0)).
No it didn't.
WebKit blocking interop on CSS modules (import … with { type: "css" }) [1] affects a lot more than meets the eye.
It means web component authors cannot make component styles a first-class dependency unless they’re willing to stuff them into a JS string.
[1] caniuse.com/wf-css-modules
I just spoke at #WebDayOut with my pragmatic guide to browser support. You can check out my slides at noti.st/rachelandrew...
Playing with animations and "state" memory in CSS and made this little demo. In Firefox and Chromium browsers you can click to draw pixel art and even reset the drawing. I'd like to update it with alternative colors using the adjacent checkbox hack.
codepen.io/allankukral/...
Think you know HTML?
Put those skills to the test with this crossword! 117 HTML terms: tag names, properties, values, some ARIA and language codes...
#game #html #css
Screenshot of the https://lyra.horse/css-clicker/ css clicker game, showing that all possible upgrades were applied.
Achievement unlocked! Completed all upgrades.
Screenshot of the https://lyra.horse/css-clicker/ CSS-only clicker game.
Tried lyra.horse/css-clicker/ by @rebane2001.bsky.social.
Very impressive how far CSS has come.