Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
-
I find caniuse to be a very good resource to check for these kinds of things. Here are the stats for nesting:
https://caniuse.com/?search=CSS%20nest
Aside: Shouldn't browsers update themselves these days? Any reason to turn this off? Seems silly from a security perspective.
The “Baseline” initiative now has a useful suggestion: their “wider support” high compatibility status is “all major browsers have been shipping it for 2½ years”. See https://github.com/web-platform-dx/web-features/blob/main/do... for more details. (When they first announced Baseline, its definition was disastrously bad, generally only covering ⅔–¾ of actual users, but I’m pleased they’ve listened to feedback and redone it completely; the definition it has now is a little more conservative than I’d have gone for—I’d have gone 2 years—but that makes it even more dependable, where that status is achieved.)
Picking jut a couple of these specific features:
• CSS Nesting as a whole is only 4–8 months shipped, and the “relaxed nesting” only shipped earlier this month in Chromium and Safari. At this point, you should absolutely not “drop those extra &”, and almost certainly not depend on nesting at all yet. And since it’s syntax, it’s not really a progressive enhancement candidate. So this becomes just a “don’t ship nesting syntax for another year or two”. Author with it and transpile down to compatible syntax with something like Lightning CSS, by all means.
• color-mix() is only 7–12 months shipped, though as a saving grace it’s Safari that’s the oldest (Safari is the browser most commonly far out of date in features due to Apple’s tie-browser-updates-to-OS-updates approach). It’s not generally a good idea to depend on color-mix() yet, though there are some progressive enhancement cases where it’s reasonable. For example, `text-decoration-color: color-mix(in srgb, currentcolor, transparent 50%)` makes underlines semitransparent, and it probably doesn’t matter if the browser skips that.
My favorite new CSS feature is the Custom Highlight API, which allow you to style arbitrary (and potentially overlapping) text ranges without needing to create ad hoc element nodes. MDN Demo:
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_...
Hopefully VSCode will switch to using this API in the near future, instead of their current superposition approach:
https://github.com/microsoft/vscode/issues/175938
Mozilla are dragging their heels on @scope:
https://github.com/mozilla/standards-positions/issues/472
https://connect.mozilla.org/t5/ideas/implement-css-scope-rul...
Someone who clearly didn't get it was wasting three years time "well actually"ing everything. The latest news is "it's worth prototyping". Meanwhile Chrome has released it(steam rolled?) and Safari has it in tech preview.
I question if FireFox has the resources to keep up with the pace of the modern web.
With all the recent CSS improvements I still miss the possibility to have working transition to "height:auto". The issue [1] on csswg-drafts is the most upvoted one. At least we can now use css grid and track sizes transitions, but it's far from intuitive, transition for "height:auto" should just work.
[1]: https://github.com/w3c/csswg-drafts/issues/626
The example in A) won't work as the plugin can't convert the functions with variables in it. https://github.com/csstools/postcss-plugins/tree/main/plugin...