Created
August 31, 2011 08:52
-
-
Save helloluis/1183106 to your computer and use it in GitHub Desktop.
How to get HTML5 Boilerplate-style Conditional Comments Working in Slim
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| doctype html | |
| /[if lt IE 7] | |
| | <html class="ie6"> | |
| /[if IE 7] | |
| | <html class="ie7"> | |
| /[if IE 8] | |
| | <html class="ie8"> | |
| /[if IE 9] | |
| | <html class="ie9"> | |
| | <!--[if (gte IE 9)|!(IE)]<!--> <html> <!--<![endif]--> | |
| head | |
| / various head stuff | |
| body | |
| / various body stuff | |
| | </html> |
Excellent. I've struggled with this for a long time (and given up). Slim can be a pain sometimes. But I forgive it.
Thanks.
Thanks for the tip. I tweaked the above code to avoid the non-standard un-indented "head" and "body" and also removed the end "html" tag, which is no longer necessary. The advantage of this is that the "html" tag is now in slim, and can be styled (i.e. adding a class or id to the html tag).
doctype html
/[if lt IE 7]
| <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7">
/[if IE 7]
| <html class="ie ie7 lt-ie9 lt-ie8">
/[if IE 8]
| <html class="ie ie8 lt-ie9">
/[if IE 9]
| <html class="ie ie9">
| <!--[if (gte IE 9)|!(IE)]<!-->
html
| <!--<![endif]-->
head
/ various head stuff
body
/ various body stuff
Even simpler, just use the /! for an HTML comment:
doctype html
/[if IE 8]
| <html class="ie8 lt-ie9" lang="en">
/[if IE 9]
| <html class="ie9" lang="en">
/! [if (gte IE 9)|!(IE)]<!--> <html lang="en"> <!--<![endif]
Here's a more robust version: https://gist.github.com/arxpoetica/8126ca51a52500e74b62
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Wow, thank you! I spent about an hour fiddling to try and get this working with Slim, but never quite got where I needed to be. Thank you!