I’ve been working with the template engine Jade over the last few months and most recently with the redesign of this site. I was loving how clean and simple it was to use and learn. If you haven’t tried it, you really should at least once. But like most great things, there has recently been some changes to the engine that make the code a tiny bit uglier.
For the first few projects, I was able to use a simple doctype reference to let the app know that it needed to use html5. Under this I was able to add some conditional IE statements. If you aren’t familiar with these statements, please read Paul Irish’s post explaining why adding conditional IE classes is so important. This left me with some code that looked like this:
!!! 5
//if lt IE 7
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
//if IE 7
<html class="no-js lt-ie9 lt-ie8" lang="en">
//if IE 8
<html class="no-js lt-ie9" lang="en">
html(lang="en")
This seems pretty simple right. Well I thought so. However, upgrading the engine left me with errors and warnings that would give anyone anxiety. In the most recent release, the team behind Jade made this bit of code deprecated with no immediate explanation to be found. However, I was able to finally sort out that they removed the !!! 5 because it was no faster to write that statement out than it was to write doctype html. This is a standard practice when writing normal HTML so I was ok with this change. The problem I later encountered was the issue with the conditional classes. They would no longer render properly in older versions of IE. So I began my search again for a fix. I couldn’t find any. I finally came across a reported issue about no longer having clean code in Jade. After reading it a few times and seeing the fixes they included for various conditional javascript I devised that the new code should be:
doctype html
<!--[if lt IE 7]>
html(class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en")
<![endif]-->
<!--[if IE 7]>
html(class="no-js lt-ie9 lt-ie8" lang="en")
<![endif]-->
<!--[if IE 8]>
html(class="no-js lt-ie9" lang="en")
<![endif]-->
<!--[if gt IE 8]><!-->
html(class="no-js", lang="en")
<!--<![endif]-->
This worked beautifully. I was able to load my conditional classes and not worry about it getting in the way of my modern browsers. The only issue I have with this code is that it’s a bit dirty for Jade. But until I learn about a cleaner fix this will have to do. If you know of any other ways to accomplish this same bit of code then please let me know.
