Useful Sites for Web Developers: Pt. 1
Can I Use... 🔗
URL: https://www.caniuse.com/
Alexis “Fyrd” Deveria maintains this powerful reference website, which features a search engine that indexes HTML tags, CSS syntax, and JavaScript code within the context of their compatibility across various desktop and mobile browsers. For instance, if one wanted to determine which browsers currently support the <iframe> tag (which sparked some controversy early in its career), CanIUse.com will generate a table displaying various browsers (grouped by their past and present versions) and their level of support for that DOM element. Visitors to the site can organize the search results by current version, global usage, and version release date. Each report offers detailed notes about the query results and a link to www.browserstack.com, where users may simulate the experience of examining the queried item on a number of different browsers. To continue with the example query above, one may learn from the search result’s supplementary information that “Safari has a bug that prevents iframes from loading if the iframe element was hidden when added to the page” and that including “iframeElement.src = iframeElement.src should cause it to load the iframe.”1
Personally, I find CanIUse.com invaluable for its ability to deliver data visualizations and historical views of support for the myriad tags, attributes, and commonplace code snippets that make up the basic building blocks of the modern World Wide Web. I cannot imagine rolling out a new site without first consulting CanIUse.com to determine the pros and cons of including, e.g., code from the latest ECMAScript standard that may or may not enjoy broad support on both desktop and mobile browsers. The site’s excellent search engine allows me to conduct targeted, lightning-fast searches for this information and customize the formatting of the query results to my liking. Moreover, I can rely on CanIUse.com to deliver the most current and authoritative compatibility information because the site draws down much of its data from MDN Web Docs (see Part 2), the vast repository of web development knowledge trusted by countless developers worldwide. The site also strongly encourages user feedback and publishes a list of user-submitted feature requests (both filled and under consideration), thereby striving to improve an already terrific resource continuously.
Not only does CanIUse.com strike me as particularly user friendly, but it also presents itself as extremely browser friendly. A free mobile application for Android devices, WebSpeed Insights, gives CanIUse.com high marks in the metrics of “Accessibility,” “Best Practices,” and “Performance” on both desktop and mobile browsers.
Accessibility: WebSpeed Insights defines this category as “the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socioeconomic restrictions on bandwidth and speed.” The app assigns sites an “Accessibility” score on a scale of 1-100 based on a great number of rubrics, including “`[aria-*]` attributes match their roles,” “Background and foreground colors have a sufficient contrast ratio,” and ”Image elements have `[alt]` attributes.”
Best Practices: WebSpeed Insights examines web pages to determine if they adhere to sixteen different industry standards for HTML formatting, user privacy, and website security. Some of these standards include “Uses HTTPS,” “Avoids front-end JavaScript libraries with known security vulnerabilities,” “Serves images with proper resolution,” and “Avoids requesting the notification permission on page load.” Once again, the application assigns the website in question a score from 1-100 in this category.
Performance: This metric takes into consideration the speed with which analyzed pages download and render and assigns those pages a score on a scale of 1-100. The multitude of rubrics for this measure includes “Time to interactive,” “Total Blocking Time,” “Properly sizes images,” “Minifies CSS,” “Uses passive listeners to improve scrolling performance,” and “Reduces unused JavaScript.”
Test Conditions:
OS: Android 12
Cellular Network: Boost Mobile 5G
I am genuinely impressed by the extensive list of website metrics that WebSpeed Insights examines, and I plan to use its analyses as a means of evaluating all of the web pages that I review on this blog site. I also plan to provide sample test results from lambdatest.com, which simulates precisely how websites render on different mobile devices (see below).
lambdatest.com Results (a sample)
Google Chrome
-768x1024.png)
Mozilla Firefox
-firefox-768x1024.png)
With the exception of minor variations in how different browsers display certain colors used on CanIUse.com, lambdatest.com reports no significant differences in functionality across various browsers.
The Bottom Line:
In my humble opinion, CanIUse.com should occupy a special place in any web developer’s bookmark collection. My general policy is, when in doubt, check CanIUse.com first: the cost of publishing a web site that renders poorly (or not at all) in specific browsers—especially the most popular—is too great to justify bypassing a quick search on this reference site. One of the most basic keys to site visitor rentention is presenting users with a site that loads quickly and paints properly on the first visit. All too often, users who feel they need to change browsers to experience a website comfortably become lost site visitors, never to return. Accordingly, maximizing the cross-browser compatibility of a site in development should play a regular role in one’s web development workflow, and CanIUse.com offers many of the tools and data capable of enhancing this process and circumventing future revisions.