In my site I have an IE HTML conditional like this :
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
..... the rest code of the html page
when I run my web page in IE 8 I only want the code inside the condition to be displayed and I dont want to display the rest of the web page.
How can I do that ?
Edit 1
When I tried this :
<!--[if gt IE 8]>
...My code
<![endif]-->
It didnt work when I run my web page on firefox or chrome.
I would prefer to use PHP for this action:
<?php if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') && preg_match('/(?i)MSIE [6-8]/',$_SERVER['HTTP_USER_AGENT'])) { ?>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<?php } ?>
A faked or filtered HTTP_USER_AGENT on IE is imho very unlikely.
Adding hyphens (--) makes it a Downlevel-hidden conditional comments which makes downlevel browsers (any browser or browser version that doesn't support conditional comments) ignore the HTML content inside the comment block - if the statement is true
Use the Downlevel-revealed conditional comments instead by removing the hyphens:
<![if gt IE 8]>
...Your content
<![endif]>
https://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx#dlrevealed
Related
Other than javascript, is there another way to use a different style-sheet for a web app in IE10 and IE11?
Per MSDN:
Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode. Use feature detection to provide effective fallback strategies for website features that aren't supported by the browser.
#yglodt you can not differentiate between 10 and 11 as 10 -- dropped support.
Looked over fallback strategy, not very impressed - you will test for feature availability.
You can use any language (JavaScript, PHP, Python, etc) to check agent and take action. Not the best, but works in desperate mode.
sorry for breaking your constraint, but this would be the only solution:
with this you can ad a IE10 class when the browser is indeed IE10:
<!doctype html>
<!--[if IE 7 ]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if !IE]><!-->
<script>if(/*#cc_on!#*/false){document.documentElement.className+=' ie10';}</script>
<!--<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
This works because of #datamafia's answer.
Now you can target .ie10 in your CSS and have different style for IE10 then for IE11 (IE11 is getting the rest of CSS)
You can do it with conditional comments in html. Read about it here: http://msdn.microsoft.com/en-us/library/ms537512.ASPX
Edit:
Some people mentioned that IE11 dropped support for conditional comments... which is sad.
Otoh you can still do it old-school by serving different stylesheets for the IE user-agent, with server-side browser sniffing.
Why the following code download BOTH 2.0.2 and 1.9.1 in IE8? (actually it's IE9 but in IE8 browser mode)
I am not so sure on the syntax, just copy/paste it from somewhere. But it works as expect on Firefox (only download 2.0.2) and IE9 (only download 2.0.2 as well), but on IE8 (again, IE9 in IE8 browser mode) both files get downloaded.
<head>
<!--[if lt IE 9]>
<script src="{{STATIC_URL}}js/jquery-1.9.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="{{STATIC_URL}}js/jquery-2.0.2.min.js"></script>
<!--<![endif]-->
</head>
BONUS question:
What's the complication if both jquery files are downloaded?
The correct code according to MS is:
<head>
<!--[if lt IE 9]>
<script src="{{STATIC_URL}}js/jquery-1.9.1.min.js"></script>
<![endif]-->
<![if gte IE 9]>
<script src="{{STATIC_URL}}js/jquery-2.0.2.min.js"></script>
<![endif]>
</head>
As you can see the first block is the same. The second block has had some syntax removed that was unnecessary and almost certainly what was confusing things. Additionally it uses the "downlevel-revealed" syntax of conditional comments which will display on everything that doesn't recognise this conditional comment syntax.
Searching for "internet explorer conditional comments" was all that was needed to find this definitive help page: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
On further investigation your original code looks like it was based on that given in http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/ . I would guess therefore that this should work and therefore your problems are more likely coming from your rather interesting test environment which is both IE8 and IE9 at the same time.
This question must be a duplicate, but I can't find the definitive answer on here.
How can I tell the browser not to load a script, if the browser is IE8 or below?
I know about targeting IE9 and above:
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
but then the script does not load in non-IE browsers.
How can I say "load the script if not IE, or if IE and greater than IE8"?
Conditional comment for 'Except IE8'?
<!--[if gte IE 9]><!-->
// Your script here. This will only be loaded if IE version is greater than 8, OR any other browser.
<!--<![endif]-->
Should work?
I recently started developing pages in HMTL 5 and everything works perfectly well in all other browsers except IE. What could be the problem?
Thank you in advance!
IE does not understand the new HTML5 element, you need to include a script that enables those element for IE.
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
More info: html5 shiv
I always use modernizr, it does the same job for you:
Thats because Internet Explorer interprets CSS And the new HTML5 tags differently than other browsers.
See: css-differences-in-internet-explorer-6-7-and-8 on smashingmagazine.com
There is a HTML5 boilerplate available which eliminates some of the crossbrowser differences, but not all: html5boilerplate.com.
Also, in conjunction with the library modernizr you are able to minimize the difference. But while you develop a website, you always do have to check the rendering in all the browsers on which they will appear, because different browsers don't render the same.
Try
<!--[if lt IE 9]>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<![endif]-->
If you are building responsive website you should use
<!--[if lt IE 9]>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<![endif]-->
File you can download from http://www.initializr.com/
<!--[if IE 6]>
I am using IE6
<![endif]-->
That works.
How do I do "or" IE7?
If you, for whatever reason, what to only test for IE6 or IE7, and maybe have some other conditions for IE5 elsewhere, there is also support for other operators:
<!--[if (IE 6)|(IE 7)]>
This is IE 6 or IE 7!
<![endif]-->
Check out the wikipedia article which has better documentation than Quirksmode on this.
you can do
<!--[if lte IE 7]>
I am using IE less than or equal to version 7
<![endif]-->
Have a look at http://www.quirksmode.org/css/condcom.html#link3 for detailed options..
same exact format. just change the ie version. Refer to here.
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx