<![if lt IE 7]> code to be executed by internet explorer versions prior to 7 <![endif]>
its great and seems to work fine. but the only technical specification i can find about is at microsoft and it clearly states that its only interpreted by internet explorer.
so usual comments look like this <!-- comment --> .
my question:
could some browser end up with not interpreting <![if lt IE 7]> as a comment but as code and just displaying it plain?
i know that this qustion may not be well formed but i don't know how to rephrase it to be more precise. please feel free to edit and comment if its unclear so i can modify.
It's not
<![if lt IE 7]>
it's
<!--[if lt IE 7]>
So no, other browsers that correctly parse HTML comments in the first place will always see the <!-- that opens the comment block.
Conditional comments are actually preceded by <!-- which makes them HTML comments...
<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->
So if the browser supports comments then it won't display it. And I would guestimate that any browser made since around 2000 has supported HTML comments.
reading a bit deeper at microsoft:
When comparing this type of comment to
the basic HTML Comment, notice that
there are no hyphens ("--")
immediately after the opening "" of
the comment block; therefore, the
comment delimiters are treated as
unrecognized HTML. Because the browser
does not recognize the
downlevel-revealed conditional
comment, it does nothing with it.
and
The downlevel-hidden conditional
comment contains hyphens ("--") in the
opening and closing tag, similar to
the basic HTML Comment. The condition
appears in the opening portion of the
tag, and [endif] is placed prior to
the closing portion of the tag. The
content is placed inside the comment
tags.
Because the first four characters and
the last three characters of the
comment are identical to a basic HTML
Comment element, downlevel browsers
ignore the HTML content inside the
comment block. Since content is
effectively hidden from browsers that
do not support conditional comments,
this type of conditional comment is
called downlevel-hidden.
If the result of the conditional
expression is true, the content inside
the comment block is parsed and
rendered by Internet Explorer 5 and
later versions. This behavior makes
the downlevel-hidden conditional
comment particularly useful for
content that has been specifically
designed for Internet Explorer.
Related
I've just started maintaining a very large legacy codebase that uses html5shiv. I notice from the documentation that it is supposed to be declared in a conditional comment after the style sheet links like this:
<link rel="stylesheet" type="text/css" href="/css/example.css">
<!--[if lt IE 9]>
<script src="scripts/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
However in my codebase it is declared before the style sheet links and without the conditional comments like this:
<script src="scripts/html5shiv/dist/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" href="/css/example.css">
I'm just trying to get a better understanding of why the docs recommend declaring in a comment and after the css. Is not doing so going to cause any trouble and if so what sort? The reason I ask is I was considering removing it due to us no longer supporting old versions of IE and was wondering if doing so is likely to cause any issues in newer browsers.
the conditional comments only load the html5shiv code on the condition that the version of Internet Explorer is lower than 9. Other browsers, such as Firefox and Chrome, will also ignore this tag and won't execute the script, thus saving bandwidth.
html5 shiv is based on a simple workaround: it directs IE to create the elements with JavaScript (they don't even need to be inserted into the DOM).
Is there a difference between ending the first line of an IE conditional comment with
>--> versus ><!-->?
Examples:
<!--[if !IE]>-->
THIS----^^^^
<!--<![endif]-->
Versus...
<!--[if !IE]><!-->
THIS----^^^^^^
<!--<![endif]-->
Both approaches result in exactly the same code being commented out, so
I am wondering where these two barely-different constructs came from.
MSDN suggests >-->, but I've seen ><!--> in many blog posts and
SO answers.
Is there a particularly stubborn browser out there that chokes on
Microsoft's suggested >--> construct?
What's the reason for this fracture?
Edit: Through some non-thorough testing I found that >--> did not work properly in IE9, but ><!--> did work.
The proper syntax for conditional comments is as follows:
<!--[if IE]>
Foo
<![endif]-->
So all other syntaxes are wrong.
What your mentioned syntaxes would do is close the comment right after the condition, so both of those would have no effect at all. The HTML parser recognises the --> that occurs in both of the examples you gave, so it will stop parsing it as a comment right away, so it will show whatever's after that as normal HTML.
If you look at the url you provided this is also the same as what MSDN says. The code examples provide a good list of examples, so if you copy those directly, it should work just fine.
I know this is possible for css conditional formatting:
<!--[if !IE]>
link/css style goes here
<![endif]-->
But is is possible to have an OR statement in there? Such as:
<!--[if !IE or !Opera]>
link/css style goes here
<![endif]-->
Thanks in advance!
Conditional Comments are an IE-specific feature, and will be ignored by opera etc.
They do support "or", however in the form of a pipe like so;
<!-- [if (IE 6)|(IE 7)]>
this is only seen by IE 6 and 7
<![endif]-->
source: msdn
EDIT
As commented, it is indeed preferable to write cross-browser-compatible CSS when possible, and use conditional comments only as a last resort. To make life easier, be sure to avoid quirks mode and use feature detection over user agent sniffing. Check out the modernizr library which helps with the latter.
I just wanna know how to do an if-statement in simple HTML. Like the [if IE6] thingy
I'd like to do something like this
[IF 5>6]
How's the syntax? I can't seem to find anything but [If!IE6] and things like that, is that even possible?
Thanks a lot
Edit: I want to compare just scalar numbers, cause I have a dynamically created HTML. For example [If 4 == 6]. I DON'T WANT TO CHECK IE VERSIONS.
Not in HTML. Consider using JavaScript instead.
No, it's not possible. What you have seen is conditional comments in IE, which only checks version numbers of IE, and is typically used to inject IE specific style sheets to fix CSS bugs for that particular browser.
The <!--[if IE]> syntax only works in Internet Explorer. You'll need to use javascript or css to conditionally display html in other browsers.
If you want to check for browser versions:
<!--[if lt IE 7]>
<!-- For LOWER than IE7 -->
<![endif]-->
<!--[if IE 6]>
<!-- For JUST IE6 -->
<![endif]-->
<!--[if gt IE 7]>
<!-- For HIGHER than IE7 -->
<![endif]-->
Other than that, you cannot use if statements in HTML, as it is a markup language and not a programming language. You need to do it either server side or with Javascript.
I believe this is the page you are looking for http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
(I typed into google "IE conditional comments". It was the second result.)
The closest thing I can think of is *NgIf or using ternary expressions in your html using angular - however, the assignment of the variables and the logic of that ngif statement would be done in javascript.
[If lte IE 6]
This selects IE 5, 5.5 and 6. It's the closest to what you want.
If you insert Javascript into your code, then you can easily use the if statement.
To insert you have to use script and /script
So far I know, the conditional comments are only supported for different Versions of IE.
Likeways, can we provide conditional comments for other browsers too.
If Yes, How? If no, what could be the best alternative?
CSS Conditional Comments are meant only for IE.. However, you can detect Firefox:
If the following code fails to exclusively detect Firefox..
<!--[if !IE]>
...statements...
<![endif]-->
Use "Downlevel-revealed Conditional Comments" to get it working...
<![if !IE]>
...statements...
<![endif]>
Example to force Firefox to use an exclusive css..
<![if !IE]>
<link href="css/ff.css" rel="stylesheet" type="text/css" />
<![endif]>
Having said that, you should not be much worried about other browsers which are standard-compliant.
As far as I know, CSS conditional statements are an IE exclusive. They should not be needed for other browser since they follow standards reasonably well. Why would you need them?
There are not conditional comments for other browsers only IE and versions of IE.
You can using Javascript do checks for other browsers and apply styles as follows.
You can do a check for the browser to not be IE with conditional comments but just no.
I would suggest visiting W3.org and building your site to be functional with a standard conforming browser then use the conditional comments to fix up how it loads in IE if there are issues (there usually is).
Check out the CSS Browser Selector plugin. I use it on my site, you basically just write the CSS and tell which browser you want it to target. I use it on my site and it works great!
Hope it helps.
As noted in other answers there are no conditional comments for browsers other than IE. Using JS detection is the way to go here.
If you want to have the commented element affect the IE condition AND other browsers then simply do this:
<!--[if gt IE 8]><!-->
<link href="sample.css" rel="stylesheet" type="text/css" />
<!--><![endif]-->
As you can see from the syntax highlighting the link element is not commented out so it will be visible for non-IE browsers and for IE it will follow the condition (greater than IE 8 in this example).
I wish there was a solution to this, especially for email rendering engines. There are even conditional comments for outlook, but none for Gmail.
<!--[if gte mso 9]>
<![endif]-->