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");
}
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 just want to know why this does not work :
<!--[if IE]>
<script src="scriptForIE.js"></script>
<![endif]-->
<!--[if !IE]>
<script type="text/javascript" src="../../js/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>
<![endif]-->
As you can see, I want to use a specific .js according to the browser. I probably made a mistake, I do not understand.
Thanks !
Ps: i'm using IE >= 8
if your trying to target IE8 use
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
see more here
http://www.quirksmode.org/css/condcom.html
Thx for your answers.
Finally I've adapted my js code to make it suits for IE and Firefox. I've used this :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
And I've also read that IE => 9 do not recognize anymore the conditions about IE.
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".
IE<9 does not understand data: URIs, so I'm outputting two different stylesheets: one with normal links to images for IE 8 and below, and one with base64-encoded inline images, for other browsers.
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/public/themes/url.style.css">
<![endif]-->
<!--[if gt IE 8]>-->
<link rel="stylesheet" type="text/css" href="/public/themes/b64.style.css">
<!--<![endif]-->
Problem: In IE9, I'm seeing a stray --> output on the page. Because it's inside the <head> it appears at the very top of the page. How should I get rid of it?
And I've got it. I did search for valid conditional comments, and found an article telling me to do what I was already doing, but then by chance I came across a by-the-way remark in another answer here which showed me the correct way to do it:
<!--[if lte IE 8]>
<span>This is for IE 7 and below.</span>
<![endif]-->
<!--[if gt IE 8]><!-->
<span>This is for all other browsers (IE 8, and browsers which don't do conditional comments).</span>
<!--<![endif]-->
See the difference: <!--[if gt IE 8]><!--> instead of <!--[if gt IE 8]>-->.