(!ie) in conditional comments around html tag #425

Closed
dustinhorton opened this Issue Apr 7, 2011 · 20 comments

Projects

None yet

7 participants

@dustinhorton

does this serve any purpose? and would removing it allow the removal of those dreamweaver-specific characters in the comment?

@davidmurdoch
Contributor

what?

@dustinhorton

wondering what purpose the !(IE) serves here:

[if (gte IE 9)|!(IE)]

also, as documented in the wiki, that first conditional comment contains an extra '<!', apparently because of an issue with dreamweaver and !(ie) conditions in conditional comments.

@irae
irae commented Apr 8, 2011

I think @dustinhorton don't understand IE conditional comments very well. If this is the case, PPK has a nice post about it.

Also you should read Paul Irish's explanation on this topic. I should note that this was linked in the code itself.

This is kinda basic stuff. If you google things before posting issues you can save a lot of waiting time for a response.

@dustinhorton

i've previously read both posts, and mentioned the second one in my second comment. and i appreciate your concern for my time, but i've googled it and it's nothing critical either way, just something i'm curious about, so i asked.

however, neither articles explain the necessity of the !(ie)...ppk's post doesn't even mention that at all.

i get the same result, with a few less characters, by just using:

[if gte IE 9]
@pyrsmk
pyrsmk commented Apr 8, 2011

I remember that it's there for compatibility with Dreamweaver which chokes on IE conditionals. If someone could confirm that...

@dustinhorton

@pyrsmk - there is an additional <! in the last conditional comment, apparently needed because dreamweaver has issues with !(IE) in conditionals. according to paul.

@necolas
Member
necolas commented Apr 8, 2011

I think you might be able to use this instead of having a gte IE9 and !IE statement:

<!--[if ! lt IE 9]><!--><html class="no-js"><!--<![endif]-->
@dustinhorton

yeah that's essentially what i'm suggesting, just different logic.

@paulirish
Member

thx for bringing it up dustinhorton.

the IE conditionals are pretty ugly and from a "i want my markup to feel nice and clean" POV, they really suck. at the same time, they're super useful.

as for dreamweaver,

i think a small change to my original code (around the !IE one) was made due to some comments like this one and some anecdotal evidence. Now i really dont' care what dreamweaver says, so if we have extra code just to pacify it, we should drop it.

that said it's been a long-ass time since i did testing on this so I kinda forget the details. ;)

new variations

<!--[if gte IE 9]><html class="no-js"><![endif]-->

(via @dustinhorton). AFAICT, we can't do this because it would assume no html tag for non-IE. now technically other browsers would create one but not one with the no-js class on it.

<!--[if ! lt IE 9]><!--><html class="no-js"><!--<[endif]-->

(via @necolas) this way you wouldnt need to do an OR to combo !IE and gte9 which is definitely a savings. ... if it works!

<!--[if ! lt IE 9]>--><html class="no-js"><!--<![endif]-->

Just a minorly shorter variation.

the MSDN page on CCs is pretty weak, so I'm a little unclear what the best way about this is.

If someone wants to try a few of these out and report back the findings, i'd be happy to tweak our syntax if we can get away with something smaller / more clear. ♡

@dustinhorton

Just wrote a comment and deleted it on my phone when attempting to edit it...but briefly:

I don't believe the html will be ignored. I removed the !(IE), and in all the browsers I tested, the no-js class was still on the tag meaning its not being ignored by non-ie browsers.

As I understand ie conditional comments, this makes perfect sense...non-ie browsers don't care about the content within them (either in the condition or the code between the comments). Might not be entirely true.

@necolas
Member
necolas commented Apr 8, 2011

OK I've done some quick tests.

@paulirish: You cannot use that shorted variation. It failed in IE 8 and --> was displayed in the browser. Probably fails in other versions of IE...but one fail was enough.

@dustinhorton: You're absolutely right about the gte IE9 also working. Paul and I were mistaken. Looking back, it seems obvious that there is no real difference between gte and ! lt...the IE conditional isn't what reveals the tag to non-IE browsers! Here's an attempt at an explanation.

This is a standard CC, contents inserted only to IE because it is commented out for other browsers.

<!--[if IE]><html class="ie"><[endif]-->

Adding the extra characters changes the boundaries of the HTML comments for non-IE browsers, while preserving the CC for IE. So the content is seen by all non-IE browsers and any IE browsers that meet the initial condition.

This is probably the shortest option for IE9+ and all non-IE browsers.

<!--[if gt IE 8]><!--><html class="modern"><!--<[endif]-->

Although perhaps using gte IE 9 is a safer option for reasons I am unaware of.

@necolas
Member
necolas commented Apr 8, 2011

On a related point. It seems 'wrong' to use HTML comments outside of the html element and it looks like it throws IE into compatibility mode. I know there is the .htaccess line to get around that, but not everyone will be using Apache.

@irae
irae commented Apr 8, 2011

Great discussion!

@dustinhorton I'm sorry for my initial judgment of your question. It seems
it really was a chance of improvement here.

I won't have time to test right now, but once you all decide what will be
the new version, I can test in some production sites I have already using
boilerplate and report if I find any problems.

On Fri, Apr 8, 2011 at 6:03 PM, dustin <
reply@reply.github.com>wrote:

@dustinhorton != @dustin :)

Reply to this email directly or view it on GitHub:
https://github.com/paulirish/html5-boilerplate/issues/425#comment_975710

@irae
irae commented Apr 8, 2011

@necolas there is an ongoing discussion on #378 about this problem with the compatibility view button. I agree with you, not everyone can tweak their servers. Care to comment there?

I had a pull request on that but I think I closed it accidentally :S I'll pull request again.

@dustinhorton

@necolas great explanation...thank you for doing it much better then i was able to.

@irae no sweat.

@paulirish i've a few sites in production and haven't seen any issues. will be interested to hear back from others.

@paulirish
Member

Necolas made the pull in #429

Divya landed it in d2acfe0

I'm adding some of these notes to my blog post on this.

@paulirish paulirish closed this Apr 9, 2011
@dustinhorton

was it determined the <! was still needed after the first conditional even with the !(IE) removed? and if so, is it still just because of dreamweaver?

@necolas
Member
necolas commented Apr 9, 2011

@dustinhorton I mentioned in my comment above (but in ref to Paul) that removing the <! will result in --> being rendered in IE 8 (and probably in other versions of IE) because it is no longer commented out. So it is needed. Nothing to do with Dreamweaver :)

@dustinhorton

ah, yes you did. i thought you were referring to what paul thought i was suggesting (his example of my suggestion is missing a '-->' and '<!--')

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment