Speed dial? This is the web and yes I know that. But this web site is so helpful that it needs to be more than a bookmark buried among others. It deserves something better than a save in Pocket, a sync across multiple devices, a share in Delicious or an annotation in Diigo. This site deserves old school treatment and the web equivalent to speed dial, create a shortcut on your desktop.
So what is this Holy Grail of web sites?
CanIUse.com. I use this site weekly, and sometimes daily. It is a well formatted and highly notated reference for browser support of front-end web technologies that includes desktop and mobile web browsers.
Why is this site so awesome?
Not only is the search zippy, the search input field is the default selected item when you load up the site. I don’t even leave my keyboard. Type “caniuse.com” followed by typing the item of the day, such as “flex”. Ding! I’m done.
Clear visuals for browser support
No reading articles and checking dates or wading through “I think this is possible” StackExchange posts. Simple data, simply presented.
- Dark gray bar highlights the current browser version.
- Little yellow boxes indicate the need for a browser pre-fix.
- Light gray numbers connect expanded notes with browser versions.
Sobering visuals for browser usage
A very unassuming toggle towards the top (Current aligned vs. Usage relative) brings perspective to how popular older browser versions are.
You can also select Show All to review a bunch more browser versions if you are feeling particularly geeky or nostalgic.
Easily update generated CSS3 code
When CSS3 hit the streets lots of cool generators popped up for shadows, gradients, etc. But most all of them haven’t been updated in years and still pump out code that is chock-full of browser pre-fixed lines. After a quick look at CanIUse.com I know exactly what I can pitch from the generated code.
For example here is a code block from one of many online gradient generators:
background: rgb(30, 50, 230); background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%); background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%); background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%); background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%); background: linear-gradient(120deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
But based on current browsers, I only need this:
background: rgb(30, 50, 230); /* IE 6-9, Opera Mini */ background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%); /* Android 4.3 and older */ background: linear-gradient(120deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
Handy access to additional resources
The Known Issues and Resources tabs at the bottom are little, consolidated gold mines of info to help you learn about the code.
Sort out what to do with IE
This is probably the biggest use of this site for me. Working with SharePoint, IE support and older versions of IE come with the package. CanIUse.com empowers me to quickly sort out what is and is not supported in IE, in what versions, and what to do about it.
IE Conditional Comments used to be the go-to solution for CSS workarounds but they are no longer supported in IE 10 and higher.
So going back to our original example, flexbox, I can quickly tell from CanIUse.com that if I am going to use flexbox properties with a SharePoint 2010 site, I really need to rethink that approach or use tools to emulate it in old versions of IE. If I want to use it in SharePoint 2013, I need to be aware of what IE versions I need to support and know what I can and can’t use since IE 10 only supports the 2012 syntax for flexbox. Since there are no conditional comments for IE10, I would need to carefully plan and test any execution of flexbox in IE10 and how it may effect other browsers.
A quick note in closing…
No, I wasn’t paid to write this blog post. This site is just truly a great resource!