I'm working with a theme and I found conditional comments to add classes to the html tag depending on version of Internet Explorer.
<!--[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]-->
The first three are pretty straightforward. I'm having trouble understanding the 4th one.
What exactly does it do ?
How does it work on non-IE browsers ?
Note that the 4th html tag isn't commented and has the condition gt IE 8, so just IE>8 and other browsers will read.
Older IE versions will read only the proper html tag for them and ignore the last because it is made for IE>8.
I am yet to find a satisfactory answer to this question (actually an answer at all!).
I'm sure most of you guys have taken a look at or worked with the html5 boilerplate project. You may have seen or be familiar with the following conditionals for IE:
<!--[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]-->
Now my question is, is there any particular reason for the tabs between the opening conditional/comment tag and the html tags? What would happen if I removed these and formatted in the following manner:
<!--[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]-->
I just don't understand the reason for this. If I format as in the case directly above, will this trigger some kind of quirks mode in IE? Really, I just find it an odd thing to look at. I mean I can see that visually all the html tags line up but besides this, what am I missing here? I should mention that I traditionally come from a C background and so my apologies if this is an obvious noob question.
Many thanks. I appreciate any and all advice.
<!--[if IEMobile 7 ]>
<html lang="en-US"class="no-js iem7">
<![endif]-->
<!--[if lt IE 7 ]>
<html lang="en-US" class="no-js ie6 oldie">
<![endif]-->
<!--[if IE 7 ]>
<html lang="en-US" class="no-js ie7 oldie">
<![endif]-->
<!--[if IE 8 ]>
<html lang="en-US" class="no-js ie8 oldie">
<![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!-->
<html lang="en-US" class="no-js">
<!--<![endif]-->
What are these useful for? What is the best and the most suitable codes as above should be in a web page?
Those are conditional comments.
The <!--[if IE.. comments are generally used for including some custom code in the HTML file only if the browser is some version of IE.
Specifically the code you posted detects multiple versions of IE including a Windows Phone 7 browser and defines CSS classes on the html root element accordingly.
This allows you to write CSS targetd specifically for that browser like this:
.iem7 .my .selector {
/* this rule will apply only if the browser is ie on windows phone 7 */
}
I tried adding Irish's html5boilerplate to a page but now am seeing all this extra space between my table tr's. There's no CSS that controls the page. It's just jsp code and html. Basically, there's code being added where the pages need to be in standards mode. All other pages had small, manageable differences. But this is an older page laid out using tables. I attempted
<pre>
<style>
table{display:block}
tr{margin:0;padding:0}
</style>
</pre>
to remove the margins to no avail.
When i add this to the head, I see strange effects in chrome and ff:
<pre>
<!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]-->
</pre>
If there's no easy fix, I guess adding the head will have to wait till the page gets redone.
In jade, I want to put in a html tag conditional as per this method, which puts in
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
at the top of a html file.
I tried
//[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
...
but jade ignores the html tag, and doesn't write in the end </html> tag. This is invalid html, and results in IE not displaying anything at all.
Is there any way of doing it?
I'm thinking I'll just use a javascript solution if there isn't a way.
This method works, with the closing html tag:
!!! 5
//if lt IE 7
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
//if IE 7
<html class="no-js lt-ie9 lt-ie8">
//if IE 8
<html class="no-js lt-ie9">
// [if gt IE 8] <!
html(class="no-js", lang="en")
// <![endif]
head
title= title
body!= body
from: https://gist.github.com/kmiyashiro/1140425#comment-675550
Update:
As pointed out by kumar-harsh this behaviour has now been depreciated, if you need this functionality you now should use regular html:
<!--[if IE]>
<html class="ie">
<![endif]-->
<![if !IE]>
<html class="not-ie">
<![endif]>
</html>
from: https://github.com/visionmedia/jade/issues/1345?source=cc#issuecomment-31920732
This is what you're looking for, and it will also give the closing html tag.
!!! 5
//[if lt IE 7]><html lang="en" class="no-js oldie lt-ie9 lt-ie8 lt-ie7"><![endif]
//[if IE 7]><html lang="en" class="no-js oldie lt-ie9 lt-ie8"><![endif]
//[if IE 8]><html lang="en" class="no-js oldie lt-ie9"><![endif]
//[if gt IE 8]><!
html(class='no-js', lang='en')
//<![endif]
head
Simply use this syntax, mind the different indentation:
!!! 5
| <!--[if lt IE 7]> <html class="ie6 oldie" lang="en"> <![endif]-->
| <!--[if IE 7]> <html class="ie7 oldie" lang="en"> <![endif]-->
| <!--[if IE 8]> <html class="ie8 oldie" lang="en"> <![endif]-->
| <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
head
…
In version 1.0.0 (released on 22 December 2013) Jade does not parse comments content any more and support for the IE conditional comments has been removed (//if lt IE 7 will not work as in version 0.35.0 and below).
The new approach is to use well formatted IE conditional comments. So in order to generate above IE conditional comments, Jade template will have to be as follows:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
html(class="")
<!--<![endif]-->
...
Note that the first four html elements are well formatted HTML elements. The last one uses Jade syntax. Also the last comment <!--<![endif]--> has to be indented.
With Jade version 1.0.0 and above it is safe to use HTML comments as Jade will ignore any line beginning with < character.
You can also visit this post on IE Conditional Comments in Jade which talks about difference between Jade version 0.35.0 and 1.0.0. It also shows alternative approach of using Jade mixins mechanism for conditional comments.
Starting at version 1.0.0, the // if construct is not magical anymore. Either render HTML verbatim (any line starting with < is transmitted as-is by Jade) or use a mixin, as per Tom's blog cited in another answer:
mixin ie(condition)
| <!--[!{condition}]>
block
| <![endif]-->
doctype html
html
head
title= My title
+ie('if IE 8')
link(rel='stylesheet', href='/stylesheets/style-ie8-1.css')
Very simple.
Exemple:
HTML
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
JADE
//[if lt IE 7]>
<html class="ie ie6" lang="en"> <![endif]
//[if IE 7]>
<html class="ie ie7" lang="en"> <![endif]
//[if IE 8]>
<html class="ie ie8" lang="en"> <![endif]
as far as i know you can not put html tags like this in jade. for this either you need to include an html or by using trailing (.) in tags which supports text like:
p. <html><script></script>....
So html tag does not support text so you cant do it. the other solution is:
-if IE==6
html.ie6
-if IE==7
html.ie7
-if IE==8
html.ie8
-if IE==9
html.ie9
head
body
h1 My sit