HTML5 Boilerplate, IE7 & 8, LESS and how to make those things effectively work
HTML5, Boilerplate, fallback, Internet 7 and 8, and some notes about how LESS can simplifies the whole thing.
Totally fascinated with HTML5 and the new possibilities it offers I’ve started writing down a new personal framework to be used as fundamental to themes I’m producing for WordPress. The feeling is great, motivation very high. I decided to get inspiration from the HTML5 Boilerplate in the belief that it represents sort of well thought out ground for a HTML5 framework. Lot of new things to learn and quite a good fun exploring all of them.
But something wasn’t working quite right last night.
The task was to complete few cross-browser tests and make sure that a website I released lately is still enjoyable when viewed through obsolete browsers, specifically Internet Explorer 8 and 7.
The HTML5 Boilerplate way
There is undoubtedly mastery in the way the markup is arranged in the HTML5 Boilerplate. Straight at the very beginning you find those lines.
<!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> ...then all the other things you usually put in the <head> of the page
More details can be found on Conditional stylesheets vs CSS hacks? Answer: Neither! by Paul Irish.
Brilliant, isn’t it? Assigning proper classes directly on the <html> tag makes possible to target everything enclosed in that page. So no more additional CSS files for this and that version of IE, like the “deprecated” line below.
<!--[if IE 8]><link rel="stylesheet" href="styles/style-ie8.css" type="text/css" media="screen" /><![endif]-->
I do prefer having one unique CSS file and styling everything from there, cross browser fixes included. Ok, sounds super good. How can I do it?
LESS keeps everything oh! so simple
Structuring the page in the way suggested by the HTML5 Boilerplate seemed such a good idea to me. At the end of my stylesheet I can add now a new section and target obsolete *ugly* browsers from there. For instance, those lines below were enough to fix the whole website I was working on last night.
/*---------------------------------------------*/
/* IE fixes */
/*---------------------------------------------*/
.ie7,
.ie8 {
#top-nav li li a {
background-color: #eee;
}
.subcontainer {
width: 970px !important;
}
}
I’m regularly amazed by the simplicity achievable with the use of a dynamic stylesheet language approach like LESS.
If you’re wondering what the heck is that code above, well, you should have spent the last year in a cave. Please, make friendship with LESS or Sass. The point here is to make all of this simple and effective.
Woah, great! Does it actually work?
Damn awesome, right? Too bad it did not work in Internet Explorer 7, neither in IE8. At first I was confused.
Then I realized that those browsers might not recognize or accept classes assigned directly to the <html> element. Fact that invalidates pretty much the whole approach. Funny, huh?
I will surely investigate further but last night I had to make it right before morning. So I figured it out a simple solution.
Not quite sure yet if old browsers can use classes in the <html> element, I know they do if assigned on the <body>. So I moved all the control version down there. It looks something like this.
<!doctype html> <html lang="en"> <head> <!-- all other things you usually put in the <head> --> </head> <!--[if lt IE 7]> <body class="no-js ie6 oldie"> <![endif]--> <!--[if IE 7]> <body class="no-js ie7 oldie"> <![endif]--> <!--[if IE 8]> <body class="no-js ie8 oldie"> <![endif]--> <!--[if gt IE 8]><!--> <body class="no-js"> <!--<![endif]-->
I’ve simply moved the version check at the <body> level, instead than on its parent <html>. You would probably agree that it does not help assigning those classes to the <html> element if the browsers you’re supposed to target do not acknowledge your sweet efforts to make it pretty. And anyway what exactly are you gonna style in the <head> of the page?
Now it works like a charm. And it could boil down just to that. Or… eventually not: are you using WordPress?
WordPress and body_class()
If you’re using WordPress you might wonder if we can do even better. I would say yes, we can. I actually use the code below, just after the closing </head> tag.
</head>
<!--[if lt IE 7]> <body <?php body_class("no-js ie6 oldie"); ?>> <![endif]-->
<!--[if IE 7]> <body <?php body_class("no-js ie7 oldie"); ?>> <![endif]-->
<!--[if IE 8]> <body <?php body_class("no-js ie8 oldie"); ?>> <![endif]-->
<!--[if gt IE 8]> <!--><body <?php body_class("no-js"); ?>> <!--<![endif]-->
...normal markup after this point, <header> or #wrap, for instance?
This opens the <body> section and set up the appropriate classes to let you target various obsolete versions of Internet Explorer (urgh!).
Last note about the “no-js” class
You might also question why I set everything with a “no-js” class. The answer would open a new chapter and topic, so let me just add as a note that if you load a proper Javascript library or app like jQuery or Modernizr, those stuffs will be more than glad to take care of whatever has a “no-js” class mutating it into .js directly in the DOM. If no Javascript is available, then it will stay “no-js” and you can start styling and compensating from there.
End. Finish. Finito. If you’ve anything to add or comment, please do. Thanks for reading!
