One of the best jokes about being a web developer is that you spend 20% of your time coding. And the other 80% search the internet for solutions to the problems that you meet. This isn't really wrong either, although it is a bit hyperbolic. With tools like Can I use, the search time can be drastically reduced.
Qu is CanIUse?
With this tool , the question of whether or not a particular technology on your website is compatible with specific browsers is presented in a simple, easy-to-read graphic that can help you make design and development decisions more easily. and maintained by Alexis Deveria and designed by Lennart Schoors , CanIUse is an open source project to which everyone can contribute with even a as little effort as contributing information to the database.
The tool is easy to use.ec a simple search for a property, a parameter or a feature, caniuse.com will tell you precisely which browsers and versions support this technology. CanIUse also lets you know which variations of the property you are looking for. This way you know which types of media queries, for example, are supported by which browsers.
And to what The degree. The compatibility tables also indicate not only whether the browser supports the technology or not, but also if to what extent, in case there is partial compatibility in certain versions.
Why should you use CanIUse?
Well, for starters you should use it if you want to give your customers, clients and visitors the best possible experience. When trying to decide whether to use hover effects, transparencies, click queries, or evenautomatic switching to dark mode.
If you are building a website with all the bells and whistles you can think of, making a beautiful design that is more of an art than an app then you have done something amazing . But if your main demographic is still using Internet Explorer 6 (thrill), not only will your design and development time be wasted, but your website will be fundamentally broken. Visitors might not even be able to function at its most basic levels.
Certainly most (but unfortunately not all) of your visitors will use something much more modern than IE6. However, the number of different browsers used is huge. Tablet, mobile and desktop computer in different versions. Well, it's worth taking a look if your upcoming site (or even your existing site is serving the best interests of your audience).
How to use CanIUse
The website workflow is absurdly simple, and the user interface is about as easy to read as it gets.
Looking at the screenshot above, you can type your preferred technology into the search box. We have found the best results using the specific syntax you use in your code. Not a human readable semantic term. As in (1) , prefers-color-scheme inst ead of CSS dark mode switching.
The CanIUse deion gives (2) also makes it if you 'If you research a technology, you see exactly what it is, what it does, and how it interacts with the DOM .
One of the most useful parts of CanIUse is the Notes tab (3) at the bottom of a particular entry. This is not technical information per se, but rather a reminder that there may be considerations that you may not see in a colored version table.
When you hover over a particular browser version (let's take the infamous Internet Explorer 6 as an example), a (4) pop-up appears with a lot of information. Full global usage of this version, still supported by developers, and the ability to test the technology using BrowserStack . This last element is important. Rendering unsupported features may show you ways to fix it.
And sometimes the Notes tab (5) will also show you that a particular type of feature is deprecated. In the example above, the @media query is obsolete. Because there is a dark mode / light mode query that works on its own.
How to find the browsers used by your audience
With all of this in focusmind, you can see which browsers are supported for any given technology you want to use. But how does this necessarily apply to your users? You can use Google Analytics to find out which browser and what operating system (OS) your visitors are using so you can make sure you are as compatible as possible.
First, navigate to the Audience section of the left sidebar. Then expand Technology and click on Browser and operating system .
Like you see the breakdown of users and the browsers they use to access your site. These days almost all sites will be Chrome and Safari at the top. Chrome, as this is the norm among users desktop (and default on Android devices). And Safari because iPhones use it by default. (Same as macOS).
Click in a browser (3) can allow you to see which version (literally point versions) of browsers is being used. If you notice there are many differences in the versions below. From 12.x to 604.x. This is a big gap. This indicates that there is a different use of the operating system, so click on Other (4 ) and scroll down in the drop down menu. Search for Soperating system .
Sort by operating system now. Now you will see how much of that traffic is mobile and how much of desktop is.
With this information in myin you can go back to Caniuse.com and make sure that any technology on your site is working as it should for the highest percentage of your users.
Conclusion with CanIUse
So next time you you will watch Divi and one of our new sweet features or read a css tutorial and find something new to play with, take a look caniuse.com . Some browsers may take a long time to recognize certain technologies. But if the majority of your audience is from browsers supporting new and fun features, Can I Use can relatively tell you if you can use it.
What did you find to be the best use forr Can I use?
Featured image of the article by fatmawati achmad zaenuri / shutterstock.com