How do you use conditional comments to target
Internet Explorer only
Certain IE versions
Certain IE versions and all other browsers
No IE, just other browsers
in a way that validates? (validator.w3.org/)
I tested these and they're valid HTML.
IMPORTANT: Only IE 5 through 9 support conditional comments.
<!-- 1. IE 5-9 only: -->
<!--<![if IE]>
<link rel="stylesheet" type="text/css" href="ie-5-through-9.css">
<![endif]>-->
<!-- 2. Some IE versions -->
<!--<![if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie-8-and-9.css">
<![endif]>-->
<!-- 3. Some IE versions, plus all non-IE browsers -->
<!--[if gte IE 8]>-->
<link rel="stylesheet" type="text/css" href="ie-gte8-and-non-ie.css">
<!--<![endif]-->
<!-- 4. All browsers except IE 5-9 -->
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="modern-ie-and-non-ie.css">
<!--<![endif]-->
I am in a situation where I need to load one of two stylesheets based on what browser is accessing the page:
if anything but IE then load the "new" stylesheet
if IE >= 9 then load the "new" stylesheet
if IE < 9 then load the old stylesheet
This is the code used to achieve that:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
This works well in all modern browsers, and old versions of IE correctly load the old styles. However in old versions of Firefox (3.6) and potentially others, the new css is not loaded and instead --> is printed to the web page. This is because of the line that states !IE - <!--> has to be added, otherwise IE 11 does not load the stylesheet. If I take that out it works properly in Firefox 3.6.
What is the proper way to set up these conditional comments to ensure it will work properly for the various browsers and versions?
I believe the problem lies in one of the <!-- delimiters, specifically the one in your IE9 conditional statement just before its corresponding <![endif]-->. The <!--[if gte IE 9]> comment hasn't been terminated yet, so it's actually invalid to have another <!-- delimiter there since it's not possible to nest comments in HTML. While current versions of Firefox behave as expected, I wouldn't be surprised if this was the reason Firefox 3.6 handled it differently.
If you get rid of that, Firefox 3.6 behaves correctly:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
In fact, you can make your code much DRYer by giving your IE9 conditional statement the <!--> treatment, like so:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
This eliminates the extra reference to the "new" stylesheet altogether while still allowing all browsers as well as IE9 to access it. Note that no other version of IE beyond 9 actually supports conditional comments anymore, so you could go further and change gte IE 9 to just IE 9, and it would still work in newer versions of IE (along with other browsers). Of course, you are welcome to keep it that way for the sake of clarity.
On a side note, although I said that it's not valid to have a <!-- sequence within a comment, the <!--> is interpreted as <! followed by the end delimiter --> rather than a <!-- followed by a >, which is why that bit is fine.
I am trying to make a website look better in IE, so i decided to use conditional comments. So I used this conditional comment to link to the stylesheet.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![end if]-->
That doesn't work, and it will either use the default stylesheet or it will display a blank page. So then i read somewhere that the comments were like this.
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<!--<![endif]-->
So i tried that and it did the exact same thing as the other one but the --> shows up on the page. I am still somewhat new to html, and any help would be nice.
Here is the correct format of the comment:
<!--[if IE ]>
Special instructions for IE here
<![endif]-->
here is a NOT IE comment:
<!--[if !IE ]>
According to the conditional comment this is not IE
<![endif]-->
source: http://www.quirksmode.org/css/condcom.html
edit: just noticed that their 'not' example is wrong. i have corrected it.
You should use like this :
Syntax :
<!--[if IE 8]> = IE8
<!--[if lt IE 8]> = IE7 or below
<!--[if gte IE 8]> = greater than or equal to IE8
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
reference link 1
reference link 2
Also its always good to declare what versions of IE you want to pull up the conditional sheet, for example if you want IE 9 and lower it would be as stated below.
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![endif]-->
HTML conditional comments were disabled in IE10. CSS conditional comments can be used to target styling in IE10+.
https://www.mediacurrent.com/blog/pro-tip-how-write-conditional-css-ie10-and-11/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// IE10+ CSS here
}
When faced with this problem, we went with the <script type="module"> solution. More details here.
We also wanted to access global variables we set using the ES6 code from other ES5 scripts to determine if we wanted to do something different. Obviously an export isn't going to work in this case, but you can assign variables to window.<something> and then access them like you would any other variable.
Only browsers running ES6 and supporting modules will run scripts included with type="module".
I'm having trouble getting
<!--[if !IE]>
to work. I'm wondering if it is because I have this in my document
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
When I add
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css" />
<!--<![endif]-->
to my header for some reason, it doesn't work. However, if I add
<!--[if !IE]><!-->
<style>
All my CSS content in here
</style>
<!--<![endif]-->
to the actual HTML page (in the header) it works.
How can I fix it?
When I removed <!-->, I only checked in Internet Explorer (IE) which was working, but now back in Firefox the no-ie.css file had been applied to Firefox too. So I added back in the <!--> and removed the / (and added that into the main template so the CMS wouldn't add it back in) and all is working back in Firefox, but now the style sheet is being applied to IE!
So I tried
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css">
<![endif]-->
and
<!--[if !IE]> -->
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css">
<!-- <![endif]-->
And that didn't work.
Basically I'm trying to get this page to work: http://css-tricks.com/examples/ResponsiveTables/responsive.php. But move the CSS content into a style sheet. Surely it's got to be simple. What am I missing? I'd rather not use jQuery if I don't have to.
<!--[if !IE]><!--><script src="zepto.min.js"></script><!--<![endif]-->
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->
Note: These conditional comments are
no longer supported from IE 10 onwards.
Browsers other than Internet Explorer treat the conditional statements as comments because they're enclosed inside comment tags.
<!--[if IE]>
Non-Internet Explorer browsers ignore this
<![endif]-->
However, when you're targeting a browser that is Internet Explorer not Internet Explorer, you have to use two comments, one before and one after the code. Internet Explorer will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-Internet Explorer browsers is therefore:
<!--[if !IE]-->
Internet Explorer ignores this
<!--[endif]-->
Note: These conditional comments are no longer supported from Internet Explorer 10 onwards.
Reasons for why the Internet Explorer targeting doesn’t work: Internet Explorer 10 and onward no longer support conditional comments. From the Microsoft official website:
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5.
Please see here for more details: Conditional comments are no longer supported.
If you desperately need to target Internet Explorer, you can use this jQuery code to add an ie class to and then use the .ie class in your CSS to target Internet Explorer browsers.
if ($.browser.msie) {
$("html").addClass("ie");
}
$.browser is not available after jQuery 1.9. If you upgrade to jQuery above 1.9 or you already use it, you can include the jQuery migration script after jQuery so that it adds missing parts:
jQuery Migrate Plugin
Alternatively, please check this question for possible workarounds: browser.msie error after update to jQuery 1.9.1
The Microsoft-recommended syntax for downlevel-revealed conditional “comments” is this:
<![if !IE]>
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css" />
<![endif]>
These aren’t comments, but they work properly.
I use this and it works:
<!--[if !IE]><!--> if it is not IE <!--<![endif]-->
For targeting Internet Explorer users:
<!--[if IE]>
Place content here for users of Internet Explorer.
<![endif]-->
For targeting all others:
<![if !IE]>
Place content here for Users of all other browsers.
<![endif]>
The conditional comments can only be detected by Internet Explorer. All other browsers treat it as normal comments.
To target Internet Explorer 6, Internet Explorer 7, etc. You have to use "greater than equal" or "lesser than (equal)" in the if Statement. Like this:
Greater than or equal:
<!--[if gte IE 7]>
Place content here for users of Internet Explorer 7 or above.
<![endif]-->
Lesser than:
<!--[if lt IE 6]>
Place content here for users of Internet Explorer 5 or lower.
<![endif]-->
Source: mediacollege.com
First of all, the right syntax is:
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="/stylesheets/ie6.css" />
<![endif]-->
Try these posts:
Conditional comments
How To Create an IE-Only Stylesheet
Another thing you can do:
Check the browser with jQuery:
if($.browser.msie) { // Do something... }
In this case you can change CSS rules for some elements or add
a new CSS link reference:
Read this: Applying stylesheets dynamically with jQuery
This is for until Internet Explorer 9:
<!--[if IE ]>
<style>
.someclass{
text-align: center;
background: #00ADEF;
color: #FFF;
visibility: hidden; // In case of hiding
}
#someotherclass{
display: block !important;
visibility: visible; // In case of visible
}
</style>
<![endif]-->
This is for after Internet Explorer 9
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {Enter your CSS here}
You need to add a space for the <!-- [if !IE] -->. My full CSS block goes as follows, since IE8 is terrible with media queries.
<!-- IE 8 or below -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/Resources/css/master1300.css" />
<![endif]-->
<!-- IE 9 or above -->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
href="/Resources/css/master480.css" />
<![endif]-->
<!-- Not IE -->
<!-- [if !IE] -->
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
href="/Resources/css/master480.css" />
<!-- [endif] -->
For the Internet Explorer browser:
<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<![endif]-->
For all non-Internet Explorer browsers:
<![if !IE]>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<![endif]>
For all Internet Explorer versions greater than Internet Explorer 8 or all non-Internet Explorer browsers:
<!--[if (gt IE 8)|!(IE)]><!--><script src="/_JS/library/jquery-2.1.1.min.js"></script><!--<![endif]-->
A conditional comment is a comment that starts with <!--[if IE]> which couldn't be read by any browser except Internet Explorer.
From 2011, conditional comments aren’t supported starting form Internet Explorer 10 as announced by Microsoft in that time: Conditional comments are no longer supported
The only option to use the conditional comments is to request Internet Explorer to run your site as Internet Explorer 9 which supports the conditional comments.
You can write your own CSS and/or JavaScript files for Internet Explorer only and other browsers won't load or execute it.
This code snippet shows how to make Internet Explorer 10 or Internet Explorer 11 run ie-only.css and ie-only.js which contains custom codes to solve Internet Explorer compatibility issues.
<html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<link rel="stylesheet" type="text/css" href='/css/ie-only.css' />
<script src="/js/ie-only.js"></script>
<![endif]-->
</html>
This works for me across all Internet Explorer versions greater than version 6 (Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, Internet Explorer 10, etc., Chrome 3 up to what it is now, and Firefox version 3 up to what it is now):
// Test if running in Internet Explorer or not
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}
In case you are working with IE 10 or above, as mentioned in http://tanalin.com/en/articles/ie-version-js/ the conditional comments are no longer supported.
You might refer to https://gist.github.com/jasongaylord/5733469 as an alternative method, which the Trident version is checked as well from the navigator.userAgent. This also verified in case the browser is working in compatibility mode.
Thank you Fernando68. I used this:
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}
if(isIE()){
$.getScript('js/script.min.js', function() {
alert('Load was performed.');
});
}
I am using this JavaScript code to detect an Internet Explorer browser:
if (navigator.appVersion.toUpperCase().indexOf("MSIE") != -1 ||
navigator.appVersion.toUpperCase().indexOf("TRIDENT") != -1 ||
navigator.appVersion.toUpperCase().indexOf("EDGE") != -1)
{
$("#ie-warning").css("display", "block");
}
I need a concrete if statement that will work in an .aspx file (default.aspx) that I am building, the file itself serves as my homepage. I have not moved onto further pages. I currently catering for IE8 + 7, FireFox and Chrome.
I seem to be noticing issues in layouts even though in my markup I have this:
<!-- <link rel="stylesheet" type="text/css" href="css/homepageStyes.css" /> -->
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
Whenever I comment out either line of code, my layout problems go away but at the moment I reckon the mark up posted above is not concrete enough in telling a browser which style sheet it is to attach?
I need something along the lines of but in XHTML mark up ofc:
if (browser == "ie" || browser != "ie6") // not supporting ie6
{
// attach this style sheet:
// <link rel="stylesheet" type="text/css" href="css/ie.css" />
}
else
{
// attach this style sheet:
// <link rel="stylesheet" type="text/css" href="css/homepageStyes.css" />
}
I'm a C# developer so this is my first time building a website from scratch. So the C# if statement above was a good way of explaining what I need.
Use these conditional comments:
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/homepageStyles.css" />
<!--><![endif]-->
The <!--[if gt IE 6]> comment ensures only IEs newer than version 6 will process and link to ie.css.
The <!--[if !IE]> tells IE to ignore what's in that conditional comment. The <!--> that directly follows is to terminate the if !IE component while maintaining a valid document. Anything past that will be read by other browsers and parsed, so homepageStyles.css will be linked to.
The second <!--> opens a comment so that IE can safely read the <![endif]--> that directly follows.