HTML5 Boilerplate tabs in IE conditional statements--why? - html

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.

Related

How to understand condition IE comments?

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.

Why commented codes of HTML not converting whlie jade conversion

I am trying to convert HTML code chunk to jade using some online tools but none seems to work for me, let me now what I am doing wrong here as I am new to jade so using these tools.
HTML code -
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js sidebar-large lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js sidebar-large lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js sidebar-large lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js sidebar-large"> <![endif]-->
Returned jade code -
doctype html
html.no-js.sidebar-large
// <![endif]
I am converting this chunk by chunk as my html file is too big so exceeds the word/character limit while using.
Tools Used -
http://html2jade.vida.io/
http://html2jade.aaron-powell.com/
These tools wont give you appropriate results until unless you provide them a clean markup with correct opening and ending tags.
In my above mentioned example it wont work as I have not included the <html> after <!DOCTYPE html>.
So correct code is -
<!DOCTYPE html>
<html>
<!--[if lt IE 7]> <html class="no-js sidebar-large lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js sidebar-large lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js sidebar-large lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js sidebar-large"> <![endif]-->
JADE result -
!!! 5
html
//if lt IE 7
//if IE 7
//if IE 8
//if gt IE 8

HTML5 boilerplate issue with tables

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.

How do I put a html tag conditional in jade?

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

What are all these comments I see on HTML pages after the doctype?

Can anyone tell me what this is:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js iframe" lang="en"> <!--<![endif]-->
I have seen this on so many pages but there is no JavaScript link on some of the pages to support the document declaration.
It seems to be snippet from html5 Boilerplate's standard format for 'browser detection' , see http://html5boilerplate.com/
The section that you have highlighted allows for only one section of the <html> tag to be parsed depending upon the flavour of browser that the site visitor is using.
Read more about this method at the authors website > http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
This is the doctype for HTML5 pages
<!DOCTYPE html>
The following lines means that the code between the commented tags is IE specific (first one is for browsers less than IE7 (IE6, IE5, etc...), second one for IE7, third one for IE8 and the last one for >= IE9)
<!--[if lt IE 7]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js iframe" lang="en"> <!--<![endif]-->
<!--[if lt IE 7]>
That means that code inside the <!--[if lt IE 7]>...<![endif]--> will work only in IE 7 browser
and <!--[if lt IE 8]>...<![endif]--> only in IE8 browsers
This hint working only in IE browsers. For example you can write <!--[if lt IE 7]><style .../><![endif]--> and this style will work only in IE 7. Than on the next line you can write <!--[if lt IE 8]><style .../><![endif]--> and this styles will work only in IE8
Those are only checks for compatibility with older browsers
<!DOCTYPE html> usually refers to HTML5, browsers below IE9 don't support HTML5 at all, so tweaks are needed. That's why there are HTML if-clauses that check if you use IE and which version. The HTML element gets a special class for that browser version so that CSS can see if it's IE and in which version (e.g. for fixing the box model of IE6)
The no-js class probably gets removed by JavaScript so that CSS can access specific elements only if JavaScript is on/off
You should use this as your Doctype: <!DOCTYPE html>
The rest is not relevant for the doctype, and is IE-specific.