Why using this HTML page on Internet Explorer 8:
<p>
<!--[if IE]> According to the conditional comment this is Internet Explorer<br /><! [endif]-->
<!--[if IE 5]> According to the conditional comment this is Internet Explorer 5<br /> <![endif]-->
<!--[if IE 5.0]> According to the conditional comment this is Internet Explorer 5.0<br /> <![endif]-->
<!--[if IE 5.5]> According to the conditional comment this is Internet Explorer 5.5<br /> <![endif]-->
<!--[if IE 6]> According to the conditional comment this is Internet Explorer 6<br /> <![endif]-->
<!--[if IE 7]> According to the conditional comment this is Internet Explorer 7<br /> <![endif]-->
<!--[if gte IE 5]> According to the conditional comment this is Internet Explorer 5 and up<br /><![endif]-->
<!--[if lt IE 6]> According to the conditional comment this is Internet Explorer lower than 6<br /> <![endif]-->
<!--[if lte IE 5.5]> According to the conditional comment this is Internet Explorer lower or equal to 5.5<br /> <![endif]-->
<!--[if gt IE 6]> According to the conditional comment this is Internet Explorer greater than 6<br /> <![endif]-->
</p>
I get this result?
According to the conditional comment this is Internet Explorer
According to the conditional comment this is Internet Explorer 7
According to the conditional comment this is Internet Explorer 5 and up
According to the conditional comment this is Internet Explorer greater than 6
Shouldn't I get IE8?
Thanks.
The only comment that appears incorrect it
According to the conditional comment
this is Internet Explorer 7
Is the browser in compatibility mode as this would render as IE7
For local documents, IE8 tends to automatically use the IE7 Compatibility Mode. In that case, IE8 acts as if it was IE7 (with a few quirks).
You’re either testing this locally, or your browser is currently set in IE7 Compatibility Mode.
Related
I am trying to target a particular styling for all browsers except for ie9 and below.
I did this to target IE9 and below:
<!--[if lte IE 9]>
<link rel="stylesheet" href="css/ie/ie.min.css">
<![endif]-->
I do not recall what would be the other way to target all other browsers except for IE9. I do recall there is a way to do it like I did to target IE9 and below but I do not recall.
Any help would be appreciated
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie/ie.min.css">
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" href="css/ie/ie-9.min.css">
<![endif]-->
<!--[if gt IE 9]><!-->
<link rel="stylesheet" href="css/normal.min.css">
<!--<![endif]-->
This method should provide you with separate stylesheets for less than IE 9, IE 9, and more than IE 9 (including all non-IE browsers). The trick for the last conditional is <!--> and <!--<!, which cause Edge and non-IE browsers to interpret the if and endif as separate comments.
To target a single version in particular, use <!--[if IE #]>.
As pointed out by jkdev, since IE 9 is the last version to support conditional comments, the last conditional could have been written:
<!--[if !IE]><!-->
<link rel="stylesheet" href="css/normal.min.css">
<!--<![endif]-->
The result would be the same as the first snippet: only IE 10-11, Edge, and non-IE browsers would get css/normal.min.css. None of the earlier IE versions would get this file since they would evaluate if !IE.
I want to load a .css file if the browser is ie8 or lower and other file if the browser is greater than ie8 or other browser (chrome, safari, etc).
I've read that ther isn't an else in html conditional. And the answers here always says to use something like this:
<!--[if lt IE 9]>
This is less then IE9
<![endif]-->
<!--[if gt IE 8]> <!-- -->
this is all browsers: IE9 or higher, firefox, chrome, etc.
<!-- <![endif]-->
The problem with this is that I don't want to do that only if the browser is greater than 8, I want to do iy if the browser is other than ie also.
How can I do it?
Thanks!
The <!-- --> will ensure that other browsers see the content between it and the next <!--. Notice how the syntax highlighter on Stack Overflow does not highlight the content as an HTML comment — that's how you can tell.
A more common variation that's somewhat shorter:
<!--[if gt IE 8]><!-->
this is all browsers: IE9 or higher, firefox, chrome, etc.
<!--<![endif]-->
Just put your styles before IE conditionals
<link rel="stylesheet" type="text/css" href="your_styles.css">
<!--[if lt IE 9]>
This is less then IE9
<![endif]-->
<!--[if gt IE 8]>
this is for: IE9 or higher
<![endif]-->
Are If statements available for html because I want this text to pop up when someone is using internet explorer <p>You are using Internet Explorer we don't support this browser</p>
And for firefox </p>Your browser is supported</p>
Is this possible?
HERE IS MY CODE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My title</title>
<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is <comment>not</comment> IE<br />
<!-- <![endif]-->
</p>
</head>
<body>
MY code here
</body>
</html>
There is no HTML if statement, but Internet Explorer has something called conditional comments. So you could say
<!--[if IE]>
<p>You are using Internet Explorer we don't support this browser</p>
<![endif]-->
<!--[if !IE]> -->
</p>Your browser is supported</p>
<!-- <![endif]-->
Although, the second part covers everything else, not only Firefox browser.
Take a look at jQuery.browser: http://api.jquery.com/jQuery.browser/
The $.browser property provides
information about the web browser that
is accessing the page, as reported by
the browser itself. It contains flags
for each of the four most prevalent
browser classes (Internet Explorer,
Mozilla, Webkit, and Opera) as well as
version information.
Available flags are:
webkit (as of jQuery 1.4) safari
(deprecated) opera msie mozilla This
property is available immediately. It
is therefore safe to use it to
determine whether or not to call
$(document).ready(). The $.browser
property is deprecated in jQuery 1.3,
and its functionality may be moved to
a team-supported plugin in a future
release of jQuery.
Because $.browser uses
navigator.userAgent to determine the
platform, it is vulnerable to spoofing
by the user or misrepresentation by
the browser itself. It is always best
to avoid browser-specific code
entirely where possible. The $.support
property is available for detection of
support for particular features rather
than relying on $.browser.
I have seen the following:
quirksmode
But this does not really show how I can detect for IE8 or IE9. Can someone tell me how I can do this with conditional comments?
The link you posted is correct. Those comments are what you need.
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if (IE 8)|(IE 9)]>
According to the conditional comment this is IE 8 or 9<br />
<![endif]-->
Conditional Comments (for your reference):
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
Between the square brackets are your conditions, you can do equals, not equals, less than, less than or equal to, greater than, greater than or equal to.
You can use conditional comments in Internet Explorer to add a CSS class to your HTML node. This is how html5boilerplate works to add browser specific CSS:
https://github.com/h5bp/html5-boilerplate/blob/master/index.html
For each browser you can use different kind of "conditional comments"
here is one of very good article by Chris Coyier over this issue.
http://css-tricks.com/new-poll-conditional-tags-for-all-browsers/
it is my personal experience it was good to use conditional comments.
yes you can detect ie8 and 9 also. Try this
<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>
<!--[if IE 8]><p>Welcome to Internet Explorer 8!</p><![endif]-->
<!--[if !(IE 9)]><p>You are not using version 9.</p><![endif]-->
<!--[if gte IE 8]><p>You are using IE 8 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->
<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>
<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->
In the if condition expresions lte denotes less than or equal to and gte denoted greater than or equal to and lt denotes less than.
I'm having a strange issue.
I am using Internet explorer 9 and just changing the browser mode to IE 7 or IE 8 etc ...
My problem is that I've added:
<!--[if lt IE 7]>
<link type=\"text/css\" rel=\"stylesheet\" href=\"/styles/ie7.css\" />
<![endif]-->
but it's not changing to the conditional css file when in IE9 's IE7 browser mode...
Is this normal?
if lt IE 7 will match IE6 (or lower).
To match IE7, use lte (less than or equal)
#SLaks is right about the error you are receiving.
I would like to add to that by showing you a better way to target IE:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]><html class="ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="en"><![endif]-->
<!--[if IE 10 ]><html class="ie10" lang="en"><![endif]-->
<!--[if !IE ]><!--><html class="non-ie" lang="en"><!--<![endif]-->
The benefit of doing it this way is that you get to keep the best practice of only using 1 stylesheet. You simply preface your target with the corresponding IE class you want to hack.
For example: .ie6 #target-id
For a more in depth explanation, check out Paul Irish's article:
Conditional stylesheets vs CSS hacks? Answer: Neither!