5 ms·
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
by chrismorgan 3y ago
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/docs/baseline.md#wider-support-high-status 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.
- 9dev 3y agoDoes anyone actually really care about the compatibility still? For quite a while now, I have relied on PostCSS/Vite presets just doing the right thing, transpiling my CSS to whatever is most compatible. And that’s how it should be - from all the important things to know about the web platform, developers really shouldn’t spend their time fine-tuning compilation artifacts by hand anymore.
- chrismorgan 3y agoSyntax features like CSS Nesting can be translated into something older browsers can understand. But other features either can’t be translated, or can only be translated in some cases. For example, color-mix(in srgb, red, blue) can be computed as purple at compile time; color-mix(in oklch, var(--a), var(--b)) can be computed iff --a and --b are known to have single static values; and color-mix(in srgb, currentcolor, transparent 50%) fundamentally isn’t known until runtime (even with DOM knowledge, you can’t say “currentcolor is always purple, therefore, &c.”, because the user agent may force colours). So yes, you absolutely still need to care about compatibility. This isn’t about fine-tuning compilation artefacts by hand, this is about browsers lacking features that you’re trying to use.
- tambourine_man 3y ago>Safari is the browser most commonly far out of date in features due to Apple’s tie-browser-updates-to-OS-updates approach I love Safari, it's my browser of choice, but this behavior must change. It's easy to miss an OS upgrade (it's a big deal, takes time, may break things, etc) and as a consequence, being 3-4 versions behind is not uncommon. People end up switching to Chrome on old systems because sites are broken in Safari. Evergreen browsers have been the future for more than a decade. It's the only way to go.
- robertoandred 3y agoSafari is not tied to OS updates on Macs.
- SquareWheel 3y agoWow, I completely missed the news on relaxed nesting making its way into browsers. That's fantastic. The whole "you should usually include an ampersand, but sometimes it's not required" rule was really frustrating as a concept. I get that it took some engineering changes on the parser front, but this is so much cleaner as far as syntax goes.
- chrismorgan 3y agoI reckon it was a mistake and they should have always required an &. But when they were surveying, they refused to even consider this option for reasons that I don’t recall but which I think seemed weird to me.
- pseudosavant 3y agoI find the "Usage relative" and "Date relative" tabs on caniuse.com to be very useful for this: https://caniuse.com/?search=color-mix https://caniuse.com/?search=color-mix