Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

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

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

dustinhorton opened this issue Apr 7, 2011 · 20 comments

Comments

@dustinhorton
Copy link

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

what?

@dustinhorton
Copy link
Author

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
Copy link

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
Copy link
Author

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
Copy link

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
Copy link
Author

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

@necolas
Copy link
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
Copy link
Author

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

@paulirish
Copy link
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
Copy link
Author

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
Copy link
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
Copy link

dustin commented Apr 8, 2011

@dustinhorton != @dustin :)

@necolas
Copy link
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
Copy link

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
Copy link

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
Copy link
Author

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

@dustinhorton
Copy link
Author

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
Copy link
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
Copy link
Author

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

@roblarsen roblarsen mentioned this issue Jan 13, 2013
Closed
@cwebba1 cwebba1 mentioned this issue Feb 1, 2014
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@dustin @paulirish @irae @davidmurdoch @pyrsmk @necolas @dustinhorton