@yisibl.bsky.social
It's great to see that WebKit has also started implementing this. github.com/WebKit/WebKi...
Add parsing support for flex-wrap: balance by TheBoyRoy05 · Pull Request #72555 · WebKit/WebKit
41a5054 Add parsing support for flex-wrap: balance https://bugs.webkit.org/show_bug.cgi?id=314423 rdar://177185140 Reviewed by NOBODY (OOPS!). css-flexbox-2 widens flex-wrap to `nowrap | [ wrap |...
github.com
@bfgeek.bsky.social · last mo.
CSS Grid is now enabled by default in Servo 🎉 One of the most powerful web layout systems is now available in an independent Rust web engine. It's powered by the library Taffy & enabled thanks to Nico Burns. A huge milestone for CSS layout in Servo!
This is a proposal I made ten years ago, and it’s finally starting to be implemented in browsers.
Roma Komarov@kizu.front-end.social.ap.brid.gy · 3mo agoOooh, Chrome thinks about prototyping a solution for basic cases for shrinkwrap: https://github.com/w3c/csswg-drafts/issues/191#issuecomment-5042121341 https://github.com/explainers-by-googlers/css-shrink-to-fit/blob/main/README.md That would be great, as the only current CSS-only solution […]
We are all chanting once again CSS CSS CSS! Only Adam could get us to do that.
Modern attr() is behind `layout.css.attr.enabled` in Firefox (set it in about:config). It's enabled by default in @firefoxnightly.bsky.social In Firefox DevTools, there will be a tooltip when the attribute value doesn't match the type you declare in CSS #cssday
The <select> element has been tough to style for decades. appearance: base-select changes that. We'll walk you through full CSS control, rich HTML options, and keeping it accessible — all while leveraging the power of the native element.
Rediscover the HTML select element - WWDC26 - Videos - Apple Developer
Learn how to unlock full control of styling select menus on the web. The HTML select element is getting a major upgrade with a new CSS...
developer.apple.com
CSS colors are becoming increasingly complex, yet we still don’t have enough test cases. In this situation, what do you think the expected behavior for gradients should be? Demo: issues.chromium.org/issues/42291...
Next, let’s implement `flex-wrap: balance`! bsky.app/profile/yisi...
Jen Simmons@jensimmons.bsky.social · 4mo agoInterested in CSS Grid Lanes? We just launched the Field Guide to Grid Lanes! gridlanes.webkit.org It’s got everything you need in a fun interactive playground + tons of demos. (And read about the Field Guide at: webkit.org/blog/18098/i...) #CSSDay #wwdc26 #CSS
Here’s another important CSS feature I’ve developed in collaboration with Jason. Please give it a try and let me know what you think. @bram.us has an article that explains it in detail. www.bram.us/2026/03/19/m...
More Easy Light-Dark Mode Switching: light-dark() is about to support images!
CSS light-dark() is being extended to support images.
bram.us
IntentToShip@intenttoship.dev · 4mo agoBlink: Intent to Ship: CSS light-dark() with image values
Jason and I have introduced several new CSS features in Chrome 150—it’s an exciting release! groups.google.com/a/chromium.o...
Intent to Ship: Allow optional rounding parameter for `polygon()`
groups.google.com
@yisibl.bsky.social · 6mo agoI and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to @lea.verou.me for bringing it to CSS. Enable the `enable-experimental-web-platform-features` flag in Chrome Canary codepen.io/yisi/pen/NPR...
Brian's blog post goes in more depth on line-clamp, but it gets rid of the 3-property cruft you need before -webkit-line-clamp will do anything, and it also adds a `line-clamp: auto` syntax to be able to clamp to whatever content fits a given height. It even lets you animate that height!
But the border-image API is really hard to use, especially since you can't use border-radius with it.
Dave Rupert@davatron5000.bsky.social · 5mo agoThe tool border-image has needed for over a decade. maxbittker.github.io/broider/
When shape-outside meets `shape()`, it sparks endless inspiration. As always, @cgqaq.bsky.social has implemented it in Chrome 149 (coming next week)! We’ll be bringing even more amazing CSS features to Chrome, so stay tuned. The Codepen is below👇 Thanks to @una.im @nomster.bsky.social for their help
Microsoft previously introduced the ability to copy SVG to the clipboard in Edge and Chrome, which is a great feature. But there's one issue: the `style` tag gets lost when pasting. @patrickbrosset.com, is anyone still working on this bug? issues.chromium.org/issues/40776...
Chromium
issues.chromium.org
OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside! So you can really *shape* your UI's 😉* rect() and xywh() are also supported for shape-outside in Chrome 149 codepen.io/una/full/ogz... *(just let me have my Mom joke)
Getting inspired by all the things the new CSS grid lanes layout can do. Like this bottom-up and top-down layout. Sure, this layout isn’t the best for when order is important. But, man, is it cool for visual creativity.
I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to @lea.verou.me for bringing it to CSS. Enable the `enable-experimental-web-platform-features` flag in Chrome Canary codepen.io/yisi/pen/NPR...
Could you add some ID anchors to the Safari blog posts? It is currently quite inconvenient to reference specific features without them.
Jen Simmons@jensimmons.bsky.social · 7mo agoSafari 26.4 is here! webkit.org/blog/17862/w... Grid Lanes. WebTransport. Keyboard Lock API. And _tons_ of fixes & improvements. Please read the introduction to our article to learn what we’ve been up to…
Starting with Chrome 144, you can now make underline gradients work—a long-standing bug. Thanks to Minseong Kim from South Korea for fixing it! But due to the ambiguity of `background-clip: text` in the specification, there is still a long way to go. crbug.com/362055819
CSS Masonry(display: grid-lanes) microsoftedge.github.io/Demos/css-ma...
Keith Cirkel@keithamus.social · 10mo agoCSS is so powerful now, it's amazing looking through older CSS and seeing what can be replaced with a one-liner. I'm on the hunt for snippets that used to be multiple lines of CSS that can now be done in one. Show me what you got!
Relying solely on max-width appears insufficient to resolve the issue of “a single image being placed on a single line” in certain scenarios. We hope Chrome will ship `flex-wrap: balance` as soon as possible. codepen.io/yisi/full/Wb...
@bfgeek.bsky.social · last yr.I've finally got around to documenting a cute way of building an Image Gallery with flexbox: bfgeek.com/flexbox-imag... This technique maintains image aspect-ratios, and ensures there is no additional free space (full-bleed). Let me know what you think! (@bram.us - I got around to this!)
Love this! CSS @starting-style debugging is available in Chrome DevTools by @bram.us www.bram.us/2025/10/21/c...
CSS @starting-style debugging is available in Chrome DevTools!
I built something that I needed into DevTools: debugging support for CSS @starting-style rules.
bram.us
@tomayac.com The Async Clipboard API example no longer works in Safari. Could you please update the code and article? googlechrome.github.io/samples/asyn... Sorry, my DMs have been disabled by the bsky, so I can only tag you here.
