Now that Internet explorer no longer supports Condition Tags like <![if IE]><![endif]> how do you guys handle custom code only for IE? I need to insert custom CSS that I want to work only for IE. I couldn’t find any simple solution for this.
OPTION 1 - For IE10
<script>
if(Function('/*#cc_on return document.documentMode===10#*/')()){
document.documentElement.className+=' ie10';
}
</script>
The CSS to style it:
.ie10 .yourclass {
/* IE10-only styles go here */
}
OPTION 2 - For IE10 (The original suggestion)
Javascript:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
HTML:
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
CSS styling would be (if any needed):
html[data-useragent*='MSIE 10.0'] .yourclass {
color: blue;
}
Source: css-tricks
For IE 6 to 9:
<!--[if IE]>
IE<br />
<![endif]-->
<!--[if IE 6]>
IE 6<br />
<![endif]-->
<!--[if IE 7]>
IE 7<br />
<![endif]-->
<!--[if IE 8]>
IE 8<br />
<![endif]-->
<!--[if IE 9]>
IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
Not IE 5-9<br />
<!-- <![endif]-->
Related
I have an exercise question which is:
Write a snippet of CSS that will display a paragraph in blue in older browsers, red in newer browsers, green in IE6 and black in IE7
I'm beginning to think this is a trick question as after much googling, the only conditional browser code I can find goes in html like this:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
Although this didn't actually work for me as vis studio just processes this statement as a comment. As far as I can tell it's not possible to write a css snippet to do this, am I right?
I really should not be giving you the answer to a quiz... but
<!--[if IE]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie8">
<![endif]-->
<!--[if IE 9]>
<div class="ie9">
<![endif]-->
<!--[if gte IE 8]>
<div class="ie8plus">
<![endif]-->
<!--[if lt IE 9]>
<div class="ie9lower">
<![endif]-->
<!--[if !IE]> -->
<div class="not-ie">
<!-- <![endif]-->
</div>
I'll leave the CSS rules to you ;)
Use different css files for any version IE
<!--[if !IE]--><link href="styles.css" rel="stylesheet" media="all" /><!--[endif]-->
<!--[if IE 6]><link href="ie6.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 7]><link href="ie7.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 8]><link href="ie8.css" rel="stylesheet" media="all" /><![endif]-->
I'm using the conditional statement here to add i.e. browsers css styles
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
If I test in emulators this conditional statement doesn't seem to work, the html tag doesn't have the 'lt-ie9' class.
If I test in products like browserstack the conditional statement seems to work and I can see the text thats is shown with the class .lt-ie9
Is the conditional html tag correct? Should I not trust the emulators
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
.test{
color: red;
display: none;
font-size: 2em;
}
.lt-ie9 .test{
display: block;
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Title of the document</title>
</head>
<body>
<div class="test">IE8</div>
</body>
</html>
Without knowing the emulators in question, there's no way for us to know. Your best course of action in debugging is to copy down that code into the body and replace the html tags with something visible:
<!--[if lt IE 7]> IE, Less than 7<![endif]-->
<!--[if IE 7]> IE 7 <![endif]-->
<!--[if IE 8]> IE 8 <![endif]-->
<!--[if gt IE 8]><!--> IE 9+ or not-IE <!--<![endif]-->
With HTML comments, I am trying to do something like the following -
<!-- [if lte IE 8] --> //if browser is IE8 or less display the following
<div>IE8</div>
<!-- [endif] -->
<!-- [if ANY OTHER BROSWER] --> //any other browser do this
<div>Any other browser</div>
<!-- [endif] -->
I can't seem to find a combination that works? How can this be done?
Reference
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if gt IE 7]>
According to the conditional comment this is IE greater than 7<br />
<![endif]-->
For example,
<html>
<head>
<link rel="stylesheet" href="my-styles.css">
<!--[if IE 8]>
<link rel="stylesheet" href="my-ie8-only-styles.css">
<![endif]-->
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Or you could use it to only render certain html markup...
....
<!--[if IE 8]>
<div id="ie8Only">IE8 Only</div>
<![endif]-->
....
I know it's a bit old question, but here's my solution
<!--[if lt IE 9]><!-->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/html5shiv.js"></script>
<!--<![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<!--<![endif]-->
I'm currently running this code. I also have an external stylesheet that applies all my styles of the page correctly but i'm running in this issue at the moment.
When i call .ie9 as a class in my external stylesheet and want to apply a gradient style to it, it isn't running my code in the Internet Explorer emulation.
However when i run the code not in the .ie9 class the code actually works so i made some mistake somewhere. Perhaps you might know what the issue is here.
HTML Code:
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--><html lang="nl-NL"> <!--![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS Code:
.ie9 {
.section-example{
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#80c9db', EndColorStr='#30aac8');
}
}
The problem was actually different. Internet Explorer 11 emulator does not load conditional html statements for some reason.
May it works for greater than ie9:-
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
or
<!--[if lt IE 9]>
<link href="<?php bloginfo( 'template_url' ); ?>/css/ie9.css" rel="stylesheet" type="text/css" />
<![endif]-->
i am using the following cc's, i have a few issues with :before layout for gt-ie8 that i want to target
<!--[if IE 8]> <html class='ie ie8 lt-e9 lt-e8'> <![endif]-->
<!--[if IE 9]> <html class='ie ie9'> <![endif]-->
<!--[if gt IE 9]> <html class='ie gt-ie9'> <![endif]-->
<!--[if !IE]><!--> <html class='not-ie'> <!--<![endif]-->
my problem is that FF and chrome both pick up the .gt-ie9 class. I have been using html5bp and i am trying configuration from browserhacks.com