It sounded like a good idea to use native HTML modal `<dialog>`s for some new features, in the end even Safari has been supporting it for 4 years (and Chrome for 12 years).
Well, turns out third party components can break in various wild ways when placed in dialogs.
We spent several hours head-scratching over a broken autocomplete dropdown and a rich text editor.
Maybe it was not that a good idea in the end...
Similarly… foiled again.
Me, earlier:
Oh cool, the @ page size descriptor is supported by Chrome, Firefox and Safari! I’ll use it for this print and PDF layout that needs to be A4 landscape.
Me, now, actually trying it:
Wait, why isn’t it working? Oh. Oh no. It does not work at all in Safari. And MDN/caniuse.com say it does, but they are wrong (and there is an open issue about it).
The WebKit bug 63575 is from… 14.5 years ago.
*dies* 💀
I never gave the website favicon much thought but decided to look a bit more into it now and find it funny how Can I Use website mentions that it is a "complicated topic" in their footnotes:
#Development #Announcements
Upvote web features you need · Now on caniuse.com, web.dev, and webstatus.dev https://ilo.im/1693ku
_____
#Voting #WebFeatures #WebPlatform #Baseline #CanIuse #W3C #Browser #DevOps #WebDev #Frontend
Another great new CSS feature that is starting to be available in more browsers is field-sizing, which allows you to size an input to fit its value with:
field-sizing: content;
Great for UI like tags, where you want to be able to type directly into them and have them automatically resize to fit the text.
(#CanIUse shows the feature as not being available in Safari Technology Preview, even though all the individual child features show that it is available)
#Development #Launches
PWAscore · Compare Progressive Web App features across browsers https://ilo.im/167if0
_____
#Comparisons #CanIuse #WebApps #PWAs #Browsers #Chrome #Firefox #Safari #WebDev #Frontend
📻 Listen to @tidoust's #SoftwareEngineeringRadio podcast! As @w3c staff member, he begins by stressing the consensus-driven nature of W3C @#WebStandards. And in his role of co-chair of the Web Developer Experience (#WebDX) #CommunityGroup, François emphasizes how communication with #developers is critical, focusing on raising awareness about browser compatibility and the maturity of new features, via the baseline badges in @mdn, #caniuse and other feature catalogs.
▶️ https://se-radio.net/2025/09/se-radio-686-francois-daoust-on-w3c/
#Apple releases Safari 26 with #WebGPU support - but not so fast! Even though you can install Safari 26 on macOS Sequoia (like I did), WebGPU isn't supported unless you have Tahoe! I wrote a bug report that was just rejected https://bugs.webkit.org/show_bug.cgi?id=299237 - "navigator.gpu requires macOS Tahoe, iOS 26, visionOS 26 or later". #caniuse
Hey #HTML / #CSS / #WebComponents folks.
If I have:
<my-fancy-component>
</my-fancy-component>
I get to target it with:
my-fancy-component {
}
right?
Does this eliminate the need for #BEM? Or is there a #CanIUse that I should be looking at for registering custom components?
(I should prototype this in a codepen but alas, no spell slots at the moment... maybe tomorrow)
#Development
A framework for evaluating browser support · When is it safe to use a modern CSS feature? https://ilo.im/1613d9
_____
#ModernCSS #Framework #Interoperability #BrowserSupport #Browser #Fallbacks #ProgressiveEnhancement #CanIuse #WebDev #Frontend
#Development #Launches
caniuse-cli · A command line tool for ‘Can I use…’ and browser-compat-data https://ilo.im/1601qw
_____
#BrowserSupport #CanIuse #MDN #CLI #Npm #Package #Compatibility #Browser #WebDev #Frontend
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
🔗 https://github.com/bramus/caniuse-cli
@nicolaschevobbe @jensimmons I completely agree. The `light-dark()` is right at an acceptable level of #caniuse now, too!
I started incorporating `@layer {}` and wow, this is very useful for theme creators, and they should start using it. Combine that with `:where()` for resets and normalise stylesheets, it gives a theme's styles as low specificity as possible.
This way, users who prefer to use a third-party theme can easily override as needed, instead of using:
* `!important`
* `.class.class.class.class`
* `:not(.\9.\9)`
Another added benefit of using `@layer` is when you inspect it (F12), you can easily see where the CSS declaration came from, as it displays the `@layer`.
According to #CanIUse baseline:
> Since March 2022, this feature works across the latest devices and major browser versions
https://caniuse.com/css-cascade-layers
It should be fine to start using it, especially by theme authors and by reset/normalise projects.
What do you think?
📢 Breakouts Day 2024: session for web #developers on web-features, baseline and #compatibility data
🗓️ Join us tomorrow, 12 March, 14:00-15:00 UTC
In this session, @tidoust, @patrickbrosset and @kadirtopal provide updates regarding the web-features project, utilizing it to contribute to the standardization process, along with supplementary data, tooling and visualizations to make web-features a powerful tool for standards bodies.
cc @MDN #caniuse #WebPlatformTests
▶️ https://www.w3.org/2024/03/breakouts-day-2024/#b-9e7690a7-cd77-4192-ab60-337243f9b70a
