This may be useful to you someday...

32 views
Skip to first unread message

Chris Maxwell

unread,
Aug 15, 2013, 3:56:03 AM8/15/13
to boston-r...@googlegroups.com
I needed to apply IE specific CSS to my application based on Paul
Irish's IE conditionals:

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

<!--[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]-->

...which is pretty straightforward except when using haml. What follows
is the sequence of errors I made � and the sources on my enlightenment �
until arriving at the correct syntax.

- - - - - - - - - - - - - - - - - - - - - - - - - -
My original interpretation:

/[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.no-js{:lang => "en"}
/<![endif]

Wrong!

- - - - - - - - - - - - - - - - - - - - - - - - - -
A variant of:

http://haml.info/docs/yardoc/file.REFERENCE.html#conditional_comments_
http://stackoverflow.com/questions/9107681/ie-conditional-comments-in-haml

/[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"}
=surround '<!--[if gt IE 8]><!-->'.html_safe,
'<!--<![endif]-->'.html_safe do
%html.no-js{:lang => "en"}

Followed by a shot in the dark...

=surround '<!--[if lt IE 7]>'.html_safe, '<![endif]-->'.html_safe do
%html{:class => "no-js lt-ie9 lt-ie8 lt-ie7", :lang => "en"}
=surround '<!--[if IE 7]>'.html_safe, '<![endif]-->'.html_safe do
%html{:class => "no-js lt-ie9 lt-ie8", :lang => "en"}
=surround '<!--[if IE 8]>'.html_safe, '<![endif]-->'.html_safe do
%html{:class => "no-js lt-ie9", :lang => "en"}
=surround '<!--[if gt IE 8]><!-->'.html_safe,
'<!--<![endif]-->'.html_safe do
%html.no-js{:lang => "en"}

Wrong, wrong!

- - - - - - - - - - - - - - - - - - - - - - - - - -
The right way:

https://gist.github.com/codesoda/3031540

/[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">
:plain
<!--[if gt IE 8] -->
%html{:lang => "en"}
/<![endif]

Chris

Reply all
Reply to author
Forward
0 new messages