CanIUse.com
Can I Use is a website that allows you to inquire on and observe compatibility with pretty much just about every property, rule, or feature that exists on the internet for CSS and HTML. They keep a close eye on any new technology that is available for the web, and allows you to see which browsers are comfortably able to support it. Today we will go over 4 different ways the site can be used, as well as documenting 2 properties to see how CanIUse provides us with information.
4 ways to use CanIUse
1. Determine whether or not a property works for a given browser
The first and likely most common use for CanIUse is determining whether or not a given property is compatible with a number of browsers. Under every property that you search, CanIUse tells you not only which browsers are compatible, but which versions of each browser are compatible.
2. Learn about known problems that certain browsers have when using a property
Once you have searched a property, the site will give you the full list of browsers known to it, showing you which versions work and which version do not. For the ones where the results are somewhere in the middle, CanIUse has a list of these issues. Under every feature there is a list of tabs. One such tab is called Known Issues, that lists every single known problem a given feature has on a specific browser. This secondary and tertiary context on a given property allows you to judge whether you should be using this property on your site as accurately as possible.
3. Gather resources from other websites about a given property
Another extremely helpful tool that CanIUse offers is another tab present on every property and feature you can search on the site. This tab, called Resources, gives you links to a vast number of other sites where you can learn more about the property or feature you are searching, other than it's compatibility with web browsers and known issues. Sites like MDN Web docs, github, and tutorialzine are common resources given for many properties.
4. Feature News Located at the top of the webpage is a page that simply reads "News". This page allows you to learn about brand new features that you can use. This page appears to be updated once every 1-2 months, so many of these features are likely major releases.
Properties
1. Quotes
The quotes property is used to style quotation marks that are automatically added to the html "q" element, or using open-quotes. On all modern desktop browsers, there is full support, and there are no known issues with them. If you go as far back as the mid 2000's, early versions do not seem to have been able to support them. Meanwhile, coverage is similar for mobile browsers, although for some of the less used browsers like QQ, Baidu, and KaiOS, support for them is listed as unknown.
2. Backdrop-filter
The Backdrop-filter property lets you add effects behind an element, like blurring or color shifting. All desktop browsers support this feature except for Internet Explorer. For mobile, Backdrop-filter is unsupported on Opera Mini, QQ, and KaiOS. All other versions appear to be using it. There are 2 known issues with the feature, as users have reported minor issues with the property on both Firefox and Chromium.
Summary
In summary, we talked about ICanUse.com and 4 features of the site. We talked about how it compares compatibility with various web features across all browsers and known issues for these features. We talked about all the different tutorials and resources they link to for using these features, and the news they offer for features just being added to the web. We also talked about 2 examples of properties that we investigated with ICanUse. We talked about the Quotes property, which is known to be compatible across just about every browser. We also talked about Backdrop-filter, which is good on all but a few mobile browsers and Internet Explorer. It only has a few minor issues on chromium browsers and firefox.