Hello,
I have recently come across a few methods in web design that when I put them together have really revolutionized my design process (or specifically the part of it that relates to css/html).
I recently came across the html5boilerplate (html5boilerplate.com). This has turned out to be a fantastic resource and starting point for me. The prime benefit that I got from it was just being able to see some best practices in the css / html design process as well as tricks I have never implemented before. The second benefit is that it is all set up for you as a blank site ‘template’ (if you will), ready to have css and html markup added to it.
It provides html5 readiness out of the box through a simple js script included, so you can begin using header, footer and nav tags. It also provides very good cross browser support out of the box (including png fix and css reset).
However, it lacks (as it probably should by default) in making ie7 and 8 capable of all those fun new features of css3 like rounded corners, box-shadow, border images, multiple background images, the flexible box model and all those nifty new css3 selectors. These are the things that I want to be able to use in my web site designs, and I want to use them now. And, if you are in a situation similar to mine, you cannot simply accept a lesser quality experience for the 40%+ IE 7 and 8 audience out there.
Since IE9 is going to take some time to pick up pace (especially since it is unavailable for xp users who make up 50% of the operating system market share), I needed a solution to these problems.
Well, that solution came from a mixture of modernizr, yepnope (thanks to a sitepoint article - here), and some js polyfills (not as intimidating as they sound, if you are not very handy with javascript).
And best of all, if you use gzipping it only adds about 30-40kb of overhead for non-ie users (this includes the jquery library) and about 70 or so for ie 6,7 and 8 users. Additionally, as you will see later, because of our modernizr method, ie9 users will not see any additional overhead either. (and im okay with punishing ie 6,7 and 8 users just a little ;-))
First, we’ll start with getting those css3 selectors in place. I used a script called selectivizralong with one called [URL=“http://javascript.nwbox.com/NWMatcher/”]nwmatcher to get these in place. Between these two, all css3 selectors should be available to you, and they will work in all browsers. Simply add the libraries to your site in the ‘mylibs’ folder in the js folder supplied by the html 5 boilerplate and add the following lines of code to the head of your document:
<!--[if lt IE 9]>
<script src="<?php echo base_url(); ?>js/mylibs/nwmatcher-1.2.3.js"></script>
<script src="<?php echo base_url(); ?>js/mylibs/selectivizr.js"></script>
<![endif]-->
And thats it. All the css3 selectors are now available to you!
Now, lets move on to one of my favorite features of css3, the flexible box model. For this we will need to use yepnope. It gets slightly more complicated here, but if you wanted to you could skip the modernizr/yepnope combination and simply use ie conditionals and external stylesheets to achieve everything I am about to explain.
the html 5 boilerplate website template comes with modernizr installed by default. If you are unfamiliar with modernizr, it is a javascript file that only does one thing (well actually three, but only one is important to what we are talking about here) -
it adds classes to the <html> tag at the top of your page. These classes always relate to a feature of css 3, and they are always either a ‘yes’ or a 'no. For example, if the user’s browser supports the borderradius property in css3 it will add the class ‘borderradius’ to the <html> tag. Note, it is not adding a borderradius. It is simply letting you know as a designer that it is available. If it is not available it will add a no-borderradius class. These classes can then be used in your css file to write different classes for different situations. For example:
#divname
{
border-radius: 10px;
}
.no-borderradius #divname
{
border-radius: 10px;
behavior: url(../css/PIE.htc);
}
The nice thing about this is your css is all in one place, as opposed to using ie conditionals and alternate stylesheets (gets pretty messy when you’ve got tons of code). Instead, all of your classes for the header, for example, for all browsers can be in one place, in one stylesheet, all your classes for the #main div, etc… etc…
The other advantage over ie conditionals in your website’s code is that this method works for any browser that doesn’t support the features we are testing for. While most modern browsers DO support most of the features we are wanting to use, modernizr will serve to help out the few out there using old versions of firefox or safari. There are also a few features (such as html5 forms) that most modern browsers actually don’t yet implement. This will come in handy later. And, since we use yepnope, as new browsers begin to support these features, users will automatically see the browser’s rendering of the feature, and so they wont have to deal with the additional overhead of the js files. It’s what’s called being “future proof”. As the future comes, and better things come, users will automatically be upgraded to the better thing without you changing the code at all.
So with modernizr in place, we can use it as described in the sitepoint article above with another script called yepnope to test for features and load ‘polyfills’ if those features are not available.
Now, add the following code to your page, right after the ‘modernizr’ script call (should be toward the top)
<script src="js/mylibs/yepnope.js"></script>
and be sure to add the yepnope library to your mylibs folder.
Once you have modernizr and yepnope in place, you are going to want to put several polyfills in your mylibs folder.
here is a website listing many of the ones available: html5 polyfills.
However, I have picked out the ones I think are the best.
For the flexible box model, I use flexie, for transformations I use cssSandpaper and for html5 forms I use (as in the example given by sitepoint) h5f.js.
Download these libraries and add them to your mylibs folder.
Then add these lines to script.js in the js folder:
yepnope({
test: Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && Modernizr.input.pattern,
nope: 'js/mylibs/h5f.js',
callback: function(url, result, key) {
H5F.setup(document.getElementsByTagName('form'));
}
},
/*add support for flexible box model to non compliant browsers */
{
test: Modernizr.flexbox,
nope: 'js/mylibs/flexie.js'
});
/*add css transforms support for non-compliant browsers */
/*note: use -sand-transform for this, see useragentman.com */
/*yepnope({
test: Modernizr.csstransforms,
nope: ['js/mylibs/cssSandpaper/eventHelpers.js','js/mylibs/cssSandpaper/cssQuery-p.js', 'js/mylibs/cssSandpaper/jcoglan.com/sylvester.js','js/mylibs/cssSandpaper/cssSandpaper.js']
});*/
Notice that cssSandpaper is commented out. This is because cssSandpaper is a pretty heavy polyfill, and it is only used for css transformations in our case. Therefore, whenever I have a site that needs to use transformations I will uncomment it, but in the mean time its there in the template for us to use if we need it.
I would also recommend downloading the h5f zip file from github (by ryan seddon) and copying the form styling over to your style sheet for some default form styling. Then copy the css sprite image into your css folder. Now don’t worry, you dont have to use his form styling, so your creativity wont be hampered, but its good to have it there as a starting point. It is especially important to keep the form.valid, form.error and form.required styles as a starting point.
Now finally, we get to some of the funnest parts of css3 - border radius, box shadow, multiple background images and border image. All of these can be achieved using a library called css3 pie CSS3 PIE: CSS3 decorations for IE.
This works a little bit differently than the libraries we have used previously. Unfortunately, this one must be loaded from your css file. But, that is where modernizr shows all of its power. An htc file is loaded using the ‘behaviour’ property implemented only in Internet Explorer. In this case, loading it at the end of your class allows you to use border radius, box shadow, multiple bgs, and border images right ‘out of the box’, using css3 tags just as you normally would. I come back to the code I used earlier:
#divname
{
border-radius: 10px;
}
.no-borderradius #divname
{
border-radius: 10px;
behavior: url(../css/PIE.htc);
}
*note - the htc file path must be relative to your HTML file, NOT your css file as is usually the case with imgs etc. The code above links to a PIE.htc file located in the CSS folder. It is also important to use boilerplate’s .htaccess file. This file uses mime typing to ensure the server is able to deliver the htc files correctly. This is all set up for you automatically, ‘out of the box’, so all you have to do is make sure to leave the .htaccess file provided by html5boilerplate located in your website’s root.
The beauty of using this code, is that the browser will only download the PIE.htc file (about 20kb gzipped) if your browser doesn’t support that css3 feature (in this case border radius). So ie9 users wont be punished because of ie8’s faults.
All of your css code is all together, and making most of the major css3 features work across all browsers (including ie6) only requires one small additional class for every html element that you use these features on.
You may need to work with these a bit and get a feel for them, it is worth noting that unfortunately in the PIE library, for any background manipulations you will need to use the -pie-background tag (ex -pie-background: linear-gradient(#EEF, #FFF 70%)) other than this minor deviation, all other code in the pie library appears to work using the standard css3 tags themselves, so there will be no other additional styling necessary.
Also worth noting is that the css3 sandPaper transformations also require a special -sand-transform… prefix. Other than this, the sandPaper transformations work exactly as they do in css3.
These should be the only two things you need to remember. Dont forget to uncomment sandPaper when you need to do transformations, play around with the form styling (and the demo provided by Ryan Seddon), and you are ready to have an out-of-the-box html5 css3 experience.
Also, dont forget about the other polyfills on github. If there is a css3 feature I have not mentioned here that you have been itching to get your hands on, it is probably provided on that site.