New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
7 participants
@dustinhorton

dustinhorton commented Apr 7, 2011

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

@davidmurdoch

This comment has been minimized.

Show comment
Hide comment
@davidmurdoch

davidmurdoch Apr 8, 2011

Contributor

what?

Contributor

davidmurdoch commented Apr 8, 2011

what?

@dustinhorton

This comment has been minimized.

Show comment
Hide comment
@dustinhorton

dustinhorton Apr 8, 2011

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.

dustinhorton commented Apr 8, 2011

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

This comment has been minimized.

Show comment
Hide comment
@irae

irae 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.

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

This comment has been minimized.

Show comment
Hide comment
@dustinhorton

dustinhorton Apr 8, 2011

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]

dustinhorton commented Apr 8, 2011

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

This comment has been minimized.

Show comment
Hide comment
@pyrsmk

pyrsmk Apr 8, 2011

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

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

This comment has been minimized.

Show comment
Hide comment
@dustinhorton

dustinhorton Apr 8, 2011

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

dustinhorton commented Apr 8, 2011

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

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Apr 8, 2011

Member

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

This comment has been minimized.

Show comment
Hide comment
@dustinhorton

dustinhorton Apr 8, 2011

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

dustinhorton commented Apr 8, 2011

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Apr 8, 2011

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. ♡

Member

paulirish commented Apr 8, 2011

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

This comment has been minimized.

Show comment
Hide comment
@dustinhorton

dustinhorton Apr 8, 2011

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.

dustinhorton commented Apr 8, 2011

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Apr 8, 2011

Member

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.

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.

@dustin

This comment has been minimized.

Show comment
Hide comment
@dustin

dustin commented Apr 8, 2011

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Apr 8, 2011

Member

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.

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

This comment has been minimized.

Show comment
Hide comment
@irae

irae 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 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

This comment has been minimized.

Show comment
Hide comment
@irae

irae 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.

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

This comment has been minimized.

Show comment
Hide comment
@dustinhorton

dustinhorton Apr 8, 2011

@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.

dustinhorton commented Apr 8, 2011

@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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Apr 9, 2011

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.

Member

paulirish commented Apr 9, 2011

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

This comment has been minimized.

Show comment
Hide comment
@dustinhorton

dustinhorton Apr 9, 2011

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?

dustinhorton commented Apr 9, 2011

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Apr 9, 2011

Member

@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 :)

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

This comment has been minimized.

Show comment
Hide comment
@dustinhorton

dustinhorton Apr 9, 2011

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 '<!--')

dustinhorton commented Apr 9, 2011

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