What Browser should I care about when it comes to features supported? Should I go for a fallback?
I'm fairly new to CSS and recently started looking into lch() since it seems like a much better alternative to hsl() and especially to hex colors. However, when checking browser support on https://caniuse.com/css-lch-lab, it looks like all major browsers (Safari, Chrome, Firefox, Edge, Opera, etc.) support it, but some still don’t. like QQ Browser, Baidu, KaiOS (I assume those are Chinese browsers?), Opera Mini, and Internet Explorer.
So my questions are:
* When it comes to something as fundamental as color, should I wait until every single browser supports the feature?
* Or should I go ahead and use it while providing a fallback (e.g., declaring lch() first and then an hsl() value below)?
* Are there browsers I can safely ignore, such as Baidu or QQ?
10 Replies
In a bubble without any other information, I would say that you really need to worry about 2 major browsers:
* Chrome b/c almost all non-major browsers are built on Chrome and it's the default on desktop for most people. It also covers Android
* Safari is the most used mobile browser since all iOS browsers are Safari. Yes, even Chrome is not Chrome under the hood but powered by Safari
Throw in Firefox if you want "big 3 support" and you've got probably 90% of the planet covered
Also, I would suggest taking a look at the MDN pages instead of caniuse, as the Browser Compatibility chart covers the most commonly used browsers and you don't et, like, Baidu or KaiOS on there
One thing to be aware of is caniuse.com isn't perfect. It doesn't list anything as having 100% support.
Like, the
<p> element is listed at 95.57% support...
The other thing is, is how important is the thing you are doing? For a color, it's kind of important, because if it doesn't work, maybe your text becomes unreadable or something. If it's an animation, and it doesn't animate, but it does reach the end of the anmiation by jumping instead... then does it matter? Probably not. It's not as good, but it's "good enough". (this type of thing is called a progressive enhancement)
The last thing is, who are you making the site for? If the audience is government/hospitals, you might need very broad support. If it's a personal project, it's whatever your browser supports 😄
There is a "newly supported" and "widely supported" badge you'll see on caniuse for a lot of things (and limited availability).
Newly supported means all the major browsers (the big 3 13eck mentioned). Widely supported means they've all supported it for more than 2.5 years... a lot of people will be fine shipping things that have that much support.If the audience is government/hospitals, you might need very broad supportI would say if the audience is gov/health care then you should ask them what browser they force their employees to use and only care about that one. If it works in Chrome v80 it'll work in the most recent version, too. But if they say IE…pack your bags and run away. Fast!
i disagree about the "2 major versions" when it is about safari:
people dont always update ios because apple has been known for intentionally nerfing the performance of older devices on new versions.
this, and the fact that new software tends to be buggy, leads people to resist updating
so, for safari, i would look for the lowest supportef hardware, then for the lowest supported version and go up 1 version or 2 since release
that should cover more than 98% of users
oh, and the demographic of your target audience is important too
Thanks so much for the quick replies and all the help, I really appreciate it
You made this 30x times easier and more clear to understand
I think you have your "newly supported" and "widly supported" mixed up in your last paragraph, there, sir 😉
Features listed as widely available have a consistent history of support in each of the Baseline browsers for at least 2.5 years. … Features listed as newly available work in at least the latest stable version of each of the Baseline browsers, but may not work with older browsers and devices. … Features listed with limited availability are not yet available in all browsers.–https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility
https://www.joshwcomeau.com/css/browser-support/
This article by Josh Comeau might help.
A Framework for Evaluating Browser Support • Josh W. Comeau
Lots of exciting new features have been landing in CSS recently, and it can be tough trying to figure out if they’re safe to use or not. We might know that a feature is available for 92% of users, but is that sufficient? Where do we draw the line? In this blog post, I’ll share the framework I use for deciding whether or not to use a modern C...
That's basically what he said no?
My brain transposed some words. You’re right, ignore me >_<