I'm trying to use conditional comments to load webcomponents polymer polyfill on ie11 and webcomponente-lite polyfill on ohter browser so I have:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/roboto-condensed/css/roboto-condensed.css">
<!--[if IE]>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<![endif]-->
<!--[if !IE]><!-->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!--<![endif]-->
The issue is that webcomponents-lite.min.js is always loaded, event in IE11
Any suggestion?
IE 11 does not support conditional comments.
Conditional comments are no longer supported
Impact Applies to Internet Explorer 10 and later. Affects IE10
Standards mode and later, including interoperable quirks mode. Support
for conditional comments has been removed in Internet Explorer 10
standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
You'll need to try another way to target IE11 specifically.
Searching around SO brought me to this answer, which uses feature detection to determine whether or not to load Polymer's polyfills.
Related
Executing my below code in IE browser and found look& feel issue in rendering the content based on the included font-awesome-ie7.min.css. Tried this code in IE8 browser mode with document mode (IE8 &IE7 standards)
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!--[if IE 7]>
<link rel="stylesheet" href="../assets/css/font-awesome-ie7.min.css">
<![endif]-->
Not rendering properly.
Looks like you have included a stylesheet for IE7 and trying to view output on IE8 while css will not work on this. To get output on IE8 you should try writing like this...
<!--[if IE 8]>
<![endif]-->
Hope this helps!
You need to tell us what version of IE you're using to test. IE 11 dropped support for conditional comments so it won't matter what you have as a conditional in there.
I would use lte (less than or equal to) IE 8 if you want to load for 7 as well.
You should load the regular font awesome css asset before the conditional statement. Load order is important.
I have the following stylesheet inside the HEAD piece of my website:
<!--[if !IE]-->
<link rel="stylesheet" href="theStyles/defaultStyle.css" type="text/css" charset="utf-8" />
<!--[endif]-->
<!--[if IE]>
<link rel="stylesheet" href="theStyles/defaultStyle_ie.css" type="text/css" charset="utf-8" />
<![endif]-->
I am running IE version 10 but for some reason it is reading the non IE stylesheet. Any idea how to fix it? Do I have to be specific in the IE condition?
I looked in the developer tool, and only the NON IE version has been loaded...
Ended up using this:
<script type="text/javascript">
if (window.clipboardData)
alert("You are using IE!");
else
alert("NON IE");
</script>
Per Microsoft:
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.
and
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
Only allow the IE style sheet within the conditional comments for IE. Your regular style sheet does not need the conditional comments. It should read as follows:
<link rel="stylesheet" href="theStyles/defaultStyle.css" type="text/css" charset="utf-8" />
<!--[if IE]>
<link rel="stylesheet" href="theStyles/defaultStyle_ie.css" type="text/css" charset="utf-8" />
<![endif]-->
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.
I created my website using a mac. As you know I can't test it out using Internet Explorer, I left it for the last but expecting layout disasters. The website looks perfect in Chrome, Firefox and Safari. As expected, IE shows it differently. How should I move on from here?
Create a style sheet just for IE?
Update my existing style sheet to display the website as expected in all the browsers I mentioned earlier?
To me, (1) seems to be the easiest choice so that I can tailor my CSS to display properly in IE without worrying about Chrome, Firefox and Safari. Do you think this is ok?
Thanks!
You can target specifically your stylesheet for IE only. You will need to put condition code on heading section of the page. See below for examples.
For all IE
<!--[if IE]>
For all IE
<![endif]-->
If you just want to target to specific version of IE then
<!--[if IE 7]>
For only IE 7
<![endif]-->
There are a couple things you can do.
Conditional Comments
Example of a conditional comment to target all versions of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
You can find more conditional comments http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Validate Your Css fixing some obvious markdown mistakes may improve your code immensely.
Which version of IE are you targeting? Most of the major pains with IE CSS2 bugs are in IE6, and to a lesser extent, IE7 - however IE8 and IE9 are much better and I haven't experienced any bugs that would require them to have separate stylesheets.
If you are targeting IE6/7 then you have my sympathy, but I don't see why you should bother as IE6 usage is negligible nowadays. However, if you must, then conditional comments are the least painful way of managing the problem. Simply do this in your <head> element:
<!--[if IE 6]>
<link rel="stylesheet" href="ie6patch.css" />
<![endif]-->
Read more here: http://www.quirksmode.org/css/condcom.html
Also, don't forget to add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to your page force IE8 and IE9 to use Standards mode.
In the future you can use a css reset to minimize differences between browsers. I have used this one in the past: http://developer.yahoo.com/yui/reset/
Also consider using a template like http://www.99lime.com or similar.
Check out conditional comments.
I have seen a couple of answers that relate to my questions but can't seem to get the problem solved.
I am trying to use the conditional comments to target IE as per Paul Irish Boilerplate i.e.
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if gt IE 9]> <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
Doctype is 'transitional'.
I am testing a site on a local server and looking at the developer toolbar in IE8, the class that is placed on the body is 'ie7'
After a looking into to it I am using the following to try and render in IE8 standards mode hoping that the class put on the body would be 'ie8'
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
It doesn't work. I also used the JS here to tell my what mode IE8 is in. Its says IE8 standards mode.
Any idea how I can get the class on the body of IE8 to read 'ie8'? Or at least, not 'ie7' like it currently does.
Or is it just not possible to do this testing on a local server meaning I have to put it on a live server before I can make the changes I want? Which seems a bit crazy...
Thanks
If you are using a local server you are probably in IE8 compatibility mode. This is the default for local sites.
To check hit F12 and the developer toolbar should load. It will show you what browser mode and document mode you are using. IE8 should display for both.
You can disable the default behaviour by clicking "Tools" > "Compatibility View Settings" and change the setting "Display intranet sites in compatibility mode".
According to this page: "Note that IE8 claims to be 7 in Compatibility View"
If the excellent people at JQuery can't seem to sort that out, then I think the answer is probably no. :/
If IE8 is in IE7 mode then the browser is correct to report itself as IE7; after all, the intention of IE7 mode is to render the page exactly the way IE7 would have done, so if you're doing browser detection, you would want to be told it's IE7 because it's the IE7 behaviour you would have to deal with (the fact that there are bugs with IE8's IE7 mode, and that it isn't quite the same as a real IE7 is another topic altogether).
What you seem to be wanting is IE8 to actually be in IE8 mode. This is a reasonable thing to want!
You said you're using:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
have you tried this instead:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
'edge' tells IE to use the most up-to-date rendering engine it has, which should force IE8 to go into normal IE8 mode. Maybe that would work better than telling IE8 to emulate itself?
By the way, if you're having trouble on machines in your local network with IE8 falling back to IE7 mode when you're not expecting it, be aware that there is a config setting in IE8 which specifies to "always use IE7 mode for intranet sites". This feature was put there by Microsoft to help with backward compatibility of custom-written intranet sites which didn't upgrade nicely to IE8, but frankly it causes more hassles than it saves. If this is the problem and you can't solve it any other way, you may find the easiest answer is simply to go to all the machines on your network and change the config setting (depending on the size of your network, of course!).