We have been using html conditional classes for a couple of years now. We have always talked about neat and clean code. Out of all the things, your html conditional classes should be neat and clean, precise, compact and targeted correctly. After-all, this is the very first thing you serve. Lets look at the most popular base from html5-boilerplate latest version
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
Meaningful default class name
First thing for most, the .no-js class is strictly for JavaScript. It is for detecting, if the JavaScript is enabled or not. If you are not using modernizr or if you are not processing .no-js by any JavaScript, use more meaningful class name like .default or .normal or .root or anything better. What we do in html5-boilerplate is make us of modernizr library. It detects all the available features on the user’s browser and if JavaScript is enabled, .no-js is changed to .js. If you do not use modernizr, you can make the switch by simple scripts like
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');
So in the absence of JavaScript, if you are not intended to use .no-js for any required modifications, make use of more meaningful class name like .root 😀
<!DOCTYPE html> <!--[if lt IE 7]> <html class="root lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="root lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="root lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="root"> <!--<![endif]-->
Drop lt IE 7 and IE 7 rules if not required
More and more Awesome People and Websites are dropping support for IE7 or less. If you are also not supporting IE7 or less ( you’re so cool 😎 , thanks for that !! ) , you can drop the lt IE 7 and IE 7 rules. You do not need them as you are not targeting IE7 or less. So your base will be:
<!DOCTYPE html> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
Use singular classes if required
If you are facing inconsistent issues in different versions of IE, use singular classes instead. Have a look at the very first setup at the top. Now if you are facing any issue in IE8, what you will write is .lt-ie9 .button {...}. But this will affect all the older versions of IE as well, because you will have this class present in all the older versions. That can be really annoying. If your issue is only and only in IE8, use a direct singular class .ie8. Base will look like this now:
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js ie6"> <![endif]--> <!--[if IE 7]> <html class="no-js ie7"> <![endif]--> <!--[if IE 8]> <html class="no-js ie8"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js ie9"> <!--<![endif]-->
But at the same time classes like .lt-ie9 have their own super benefits. If you are facing same issues in more than one version of IE, you fix them in One Go !! If required, you can also do some mix and match like
<html lang="en-US" class="no-js lt-ie9 lt-ie8 lt-ie7 ie6only">
Take care of IEMobile as well
You code should not mess up with IEMobile , it should not add unnecessary classes to it. Use !(IEMobile)
<!--[if lt IE 7]><html lang="en-US" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if (IE 7)&!(IEMobile)]><html lang="en-US" class="no-js lt-ie9 lt-ie8"><![endif]--> <!--[if (IE 8)&!(IEMobile)]><html lang="en-US" class="no-js lt-ie9"><![endif]--> <!--[if gt IE 8]><!--> <html lang="en-US" class="no-js"><!--<![endif]-->
Let me know your thoughts on this, there might be some important points I need to add in this guide . . .