Table of Contents
Today we will discuss possible ways to make sure our CSS are bulletproof and our webpages works properly (how we want) on every browser out there. I want to talk about this subject because it is very important to for successfully follow progressive enhancement philosophy and to avoid ignoring some users because of software they use. Another reason is fact that some beginners does not use feature-detection libraries like modernizr in right way.
Five main browser agents exist on the market right now – Chrome, Internet Explorer, Mozilla Firefox, Opera and Safari. All of these browsers, except Chrome and Opera, uses different rendering engines. Google Chrome and Opera used webkit and now are using Blink, Internet Explorer Trident, Mozilla Firefox uses Gecko and Safari WebKit and Nitro. There are also different version of them in use. Not everyone is keeping browser up-to-date.
CSS and vendor prefixes
First and I guess the easier thing you can do is to include vendor prefixes into your stylesheet along with newer and more experimental properties. By including these CSS rules, you can extend the number of versions of browsers that will be able to render these properties. CSS3 specification is quite large and it is hard for anyone to remember which property works on which browser and version. Fortunately, thanks to Alexis Deveria or Fyrd, you don’t have to. Fyrd created a website called youcaniuse.com (link is at the end of this article) to keep records about of CSS properties and values and how are they supported by browsers. When you search for some property, you will immediately see if and what version of browser supports it. If it is necessary to use vendor prefix that prefix is displayed. Bellow is an example of using flex box with all vendor prefixes.
Example:
.navigation {
display: -webkit-box; /* Chrome, Opera, Safari - old syntax */
display: -moz-box; /* Mozilla Firefox */
display: -ms-flexbox; /* IE */
display: -webkit-flex; /* Chrome, Opera, Safari - new syntax */
display: flex;
}
JavaScript
However, no matter how great and useful vendor prefixes are, they are not almighty. They will cover your back only for some version of browsers. So, what about the rest? Basically, you have two options. Ignore it entirely (not good) or to bring JavaScript into the work. By including small script or library, you can easily detect which features are supported by browser used to access the website and which are not. Most famous library for this is probably Modernizr (link is at the end of this article). What Modernizr does, after including it inside the head of the page, is appending different classes to <html> element. The important part for you are the classes. These classes looks like “boxshadow”, “cssanimations”, “csscolumns”, “csstransitions” etc. Bellow is example of running modernizr in IE9.
Example:
<html lang="en" class="js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths"> ... </html>
As you can see on the beginning, IE9 does not support flexbox. How can you use all of the information? Simply through your stylesheet. Take for example the flexbox. You know that if browser does not support it “no-flexbox” class will be appended to HTML. You can use this knowledge to create a new rule specially for this class to cover all the browsers where it is unsupported. We will use navigation with five links as and example. In this example we will define rule for .no-flexbox .navigation (unordered list) and set the display to block and width to 100%. This will stretch navigation to full width. Next we will set float property for li’s inside this list to left and width to 25%. This will create one-line navigation with links positioned next to each other proportionally (100% width divided by 5 links).
Result:
.no-flexbox .navigation {
display: block;
width: 100%;
}
.no-flexbox .navigation li {
float: left;
width: 20%;
}
With this CSS we have our butt covered in case of unsupported flexbox. If flexbox is supported, then the class will not be appended at all and our default style with flexbox will apply instead.
However, this is not the only thing that Modernizr is able to do. Its another ability is feature testing through JavaScript and giving you the option to load Polyfills. What the heck are polyfills? They are small scripts, similar to CSS fallbacks, that will compensate unsupported features with JavaScript alternative. These scripts contain code which behaves as the feature would, so the user will not spot any change in functionality if he is using older browser. As example is used simple test for canvas support.
Example:
Modernizr.load({
test: Modernizr.canvas,
nope: 'http://flashcanvas.net/bin/flashcanvas.js'
});
First part of the code – Modernizr.load – is a resource loader built for Modernizr. Next part is a set of commands in JavaScript object notation. Test means what feature modernizer will test. Nope is for case that the feature is, guess what, not supported. Another option is yep. In our example if feature is not supported (nope), Modernizr will load flashcanvas.js polyfill from included url. Simple and easy. For more features available to detect and test visit the Modernizr homepage (link is at the end of this article).
Summary
Making sure our pages are fully functional everywhere and every time is our duty. We, Web Designers and Developers are responsible for the quality of code put online. Every one of us should invest the time and do as much as he or she can to make his website bulletproof. If you will not then who?
Links:
http://caniuse.com/ http://modernizr.com/ http://html5please.com/#polyfill
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
