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 in here
</style>
<!--<![endif]-->
to the actual html page (in the header) it works. Any suggestions? Cheers
Update to my question
Ok, when I removed
<!-->I only checked in IE which was working but now back in FF the no-ie.css had been applied to FF 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 FF but now the stylesheet 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 into a stylesheet. Surely it's got to be simple. What am I missing? I'd rather not use JQuery if I don't have to. Cheers
This question is related to
html
internet-explorer
conditional-comments
I use that and it works :
<!--[if !IE]><!--> if it is not IE <!--<![endif]-->
This is for until IE9
<!--[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>
This is for after IE9
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {enter your CSS here}
I get this code works on my browser:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
Note for this code: HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries
Conditional comment is a comment starts with <!--[if IE]> which couldn't be read by any browser except IE.
from 2011 Conditional comment isn't supported starting form IE 10 as announced by Microsoft in that time https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx
The only option to use the Conditional comments is to request IE to run your site as IE 9 which supports the Conditional comments.
you can write your own css and/or js files for ie only and other browsers won't load or execute it.
this code snippet shows how to make IE 10 or 11 run ie-only.css and ie-only.js which contains custom codes to solve IE 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>
Browsers other than IE treat the conditional statements as comments because they're enclosed inside comment tags.
<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->
However, when you're targeting a browser that is NOT IE you have to use 2 comments, one before and one after the code. IE will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-IE browsers is therefore:
<!--[if !IE]-->
IE ignores this
<!--[endif]-->
Note: These conditional comments are no longer supported from IE 10 onwards.
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.
<!--[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.
For targeting IE 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 thread it as normal Comments.
To target IE 6,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]-->
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.
An update if somebody still reaches this page, wondering why the ie targeting doesnt work. IE 10 and onward no longer support conditional comments. From the MS 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: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
If you desperately need to target ie, you can use this jquery code to add a ie class to and then use .ie class in your css to target ie browsers.
if ($.browser.msie) {
$("html").addClass("ie");
}
Update: $.browser is not available after jQuery 1.9. If you upgrade to jQuery above 1.9 or you already use it, you can include jQuery migration script after jQuery so that it adds missing parts: jQuery Migrate Plugin
Alternatively, please check this thread for possible workarounds: browser.msie error after update to jQuery 1.9.1
First of all the right syntax is:
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="/stylesheets/ie6.css" />
<![endif]-->
Try this post: http://www.quirksmode.org/css/condcom.html and http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Another thing you can do:
Check browser with jQuery:
if($.browser.msie){ // do something... }
in this case you can change css rules for some elements or add new css link reference:
read this: http://rickardnilsson.net/post/2008/08/02/Applying-stylesheets-dynamically-with-jQuery.aspx
This works for me across all browsers greater than version 6 (IE7, 8, 9, 10, etc, Chrome 3 up to what it is now, and FF ver 3 up to what it is now):
//test if running in IE or not
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}
For IE browser:
<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<![endif]-->
For all non-IE browsers:
<![if !IE]>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<![endif]>
For all IE greater than 8 OR all non-IE browsers :
<!--[if (gt IE 8)|!(IE)]><!--><script src="/_JS/library/jquery-2.1.1.min.js"></script><!--<![endif]-->
I am using this javascript to detect IE 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");
}
You need to put 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] -->
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.');
});
}
Source: Stackoverflow.com