Target IE9 Only via CSS [duplicate] - html

This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
Just wondering given these IE hacks in my bag of tricks
"\9" - for IE8 and below.
"*" - for IE7 and below.
"_" - for IE6.
i.e. such as
body {
border:2px solid blue;
border:2px solid yellow \9;
*border:2px solid green;
_border:2px solid orange;
}
Whether anyone has such a hack for IE9 ? i.e. I'm trying to target IE9 only via CSS ?

Terrible, but it should work:
body {
border:2px solid blue;
border:2px solid yellow \9;
*border:2px solid green;
_border:2px solid orange;
}
body:nth-child(n) {border:1px solid purple \9; /*Should target IE9 only - not fully tested.*/}

I suggest using condcoms to feed an IE9 css file or have a conditional html class, similar to:
<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

IE9 is pretty standards compliant. You shouldn't need to hack it.
Also, you should be using IE conditional comments to load different styles. For IE 9 you would do:
<!--[if IE 9]>
<!-- conditional content goes here -->
<![endif]-->

At this adress : http://www.impressivewebs.com/ie10-css-hacks/
I found a media query specific for IE10 only (and below) :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}

As noted in some of the comments, there are times when conditional HTML won't work for a specific situation, especially if you're unable to modify the page code itself. So here's a workaround:
Base Style
.test{color:red;}
Browser-Specific Overrides
IE < 8: html >/**/body .test { color: green; }
IE 9: :root .test{color:green \ ;}
IE 8 and 9: .test{color:green \ ;}
IE 9 and Opera :root .test {color: green\0;}
Notes
The above won't work for background or font-*, and any \0 or \9 hacks are generally unstable. For a complete list of CSS hacks, see http://mynthon.net/howto/-/webdev/CSS-big-list-of-css-hacks.txt.

Related

Specify CSS properties for the IE only in the CSS file

Actually I need to specify this property
margin-left:-20px;
only for the IE-11 and the rest of the properties for all browsers in CSS file
.navigator li a span {
display: block;
float: right;
width: 80px;
height: 50px;
margin-right: -10px;
margin-left:-20px;
}
Is there a way to do that, as I tried many solutions and didn't work
Thanks in advance!
I wrote is very simple and only supported by IE 11+
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
// or you can try this
<style>
#media all and (-ms-high-contrast:none)
{
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
and of course the div...
<div class="msie11">
This is an Internet Explorer 11 and greater CSS Hack
<div>
So the text shows up in blue with internet explorer 11 and greater. Have fun with it.
for more reference you can look around with given link
Reference
It sounds like your problem could be solved in some other way than browser-conditional styles, please try that first, but in any case:
For IE 10 and 11, you can use this:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
Note though, that it will recognize both IE 10 and 11.
source: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/
You may also want to take a look at this:
http://marxo.me/target-ie-in-css/
For IE 9 and lower, you can use this:
You create a separate stylesheet for that, and then you use this to include that in your HTML.
source: https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
For example, if you wanted to target IE 7, you would do this. You can just change the version number to what you will.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
And then you can also target lower or higher versions than a specific version:
Lower than IE 8 and IE 8:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Higher than IE 8:
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Note that you can use lt, lte, gt or gte.

Web page display in IE9 and earlier

i made web page and styled it using CSS3 (gradients, image-border, text-shadow etc.). Our work browser (IE9) totally ruined the look of it. Don't you please know how to fix in css that when browser is lower than IE10, don't use this set of styles but this set of style? Thanks a lot :)
There are differents solutions.
1 IE Conditional Comments in the "head"
ex:
<!--[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]-->
2 CSS Rules Specific to Explorer (IE CSS hacks)
IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon.
IE7 or below: add an asterisk (*) before the CSS property.
IE6: add an underscore (_) before the property.
ex:
.box {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
In my opinion the second one is the best way!
You can fix it using this conditional statement
<!--[if lte IE 9]>
// Your css for IE9 and below or
// Perhaps importing a specific style sheet as
<link rel="stylesheet" type="text/css" href="ie9_and_below.css" />
<![endif]-->
you can apply text shadow using
.shadow {
filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}
Complete documentation
gradient can be applied as
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
The border-image property is not supported by IE, check: this
you can make it possible using css3pie for you to use a border-image in IE 6-9

I want the background picture not to be displayed in the IE. How do I do that?

Here's the CSS , and I want the background picture not to be displayed in IE . Instead I just want the background color to be displayed. How do I do that?
html, body {
margin:0;
padding: 0;
background: #a9ac41;
background-image: url("background.png");
background-repeat: no-repeat;
background-size: cover;
margin:0;
padding: 0;
}
I'm guessing that the problem here is background-size. IE8 and earlier don't support it, so you're seeing your image messed up in IE8 and you want to solve it by reverting to a plain background.
Firstly, I should tell you that background-size is supported in IE9 and later, so you don't need to do this as a blanket change for all IE versions. You only really need to deal with the lack of support in IE8 and earlier.
Here are some options for you:
Pure CSS solution:
You can take advantage of the way CSS handles unknown properties to provide a pure CSS fallback for browsers that don't support background-size, by specifying the size as a parameter in a shorthand background style:
background: #a9ac41;
background: url("bgimage.png") cover;
IE8 will ignore the second background entirely because doesn't understand cover. Other browsers will ignore the first one because the second one overrides it. Problem solved: all browsers have a working background.
Feature detection solution:
You could use a tool like Modernizr to test for browser support of background-size, and then use Javascript to change the page accordingly (eg load a different stylesheet if it is/isn't supported).
filter solution:
Although IE8 doesn't support background-size, it is possible to use the -ms-filter property to emulate it, with some degree of success. You would use code like this:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Example taken from MDN
Polyfill solution:
There are some 'polyfill' scripts available which implement some of the missing CSS features into old IE versions, including background-size. In this case, the one I'd recommend is CSS3Pie. Follow the instructions on the css3pie site and you'll be able to use standard background-size even in very old IE versions.
Hope that helps.
use conditional statement.
<!--[if IE]>
Place IE specific content.
<![endif]-->
If version specific, you can mix the code like this -
<!--[if lt IE 8]>
Place content for IE lower than 8
<![endif]-->
created a rough tested code, and checked in IE 9 -
<!--[if gte IE 8]>
<style>
html, body {
background: #a9ac41;
background-image: url("http://dummyimage.com/600x400/000/fff.png");
background-repeat: no-repeat;
background-size: cover;
margin:0;
padding: 0;
}
</style>
<![endif]-->
<html>
<body>
<body>
</body>
</html>
EDIT
Conditional statements wont work for IE10 so you can manage it via media queries.
Example thread - https://gist.github.com/atk/4025104
Conditional stylesheets are what you need.
By using the code below you can set a stylesheet that is only used in IE, in which you can set an alternative style for the body.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
replace the tag html of your HTML for this:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
then in the css:
html,body{
margin:0;
padding: 0;
background-image: url("background.png");
background-repeat: no-repeat;
background-size: cover;
margin:0;
padding: 0;
}
html.lt-ie9,html.lt-ie9 body{
background: #a9ac41;
background-image: none;
}
Note: IE10 doesn't support conditional comments son this method works in < IE9.
Depending on which version(s) of IE you want to target, you can use conditional comments (and/or an IE-only stylesheet):
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Note that this won't work in IE10.
There's lots of different ways to do this, and it really depends on what else you're doing with the page. One simple way would be the following HTML in the <head> tag.
<!--[if IE]><style>html,body{ background-image: none; }</style><![endif]-->
Copy and paste this code in your html.
<!--[if IE]>
<stye>
html, body {
background-image: none;
}
</style>
<![endif]-->
There is obviously multiple ways to answer this question, some good methods already mentioned. Here is another method that I use most often and it requires less bytes:
To target only Internet Explorer, put an "*" in front of the code that you want to target for I.E. Using your example above, for the background to not appear in I.E. use the * like so:
html, body {
margin:0;
padding: 0;
background: #a9ac41;
*background-image: none;
background-image: url("background.png");
background-repeat: no-repeat;
background-size: cover;
margin:0;
If and when it doesn't work, likely your rules are conflicting. In such cases, use "!important", like so:
*background-image: none !important;

How do I use conditional formatting inside of a CSS style sheet?

I am looking to use some conditional styling for IE 9 - but I want to have the conditions inside my main style sheet - not using a second style sheet or referencing it in the HTML page. At the moment, I am putting this code in the HTML page, which works because it overwrites the other styles in the main style sheet:
<!--[if IE 9]>
<style>
nav li a:hover {
text-decoration: underline;
color: black;
}
nav .four a:hover{
color:white;
}
</style>
<![endif]-->
But I would like to have these conditions in the CSS sheet, so that its all located in one place and I don't have to repeat the code in every page. I would also rather avoid having a separate CSS just for IE 9 - I already have one for IE 7-8. I tried this in the style sheet:
<!--[if IE 9]>
nav li a:hover {
text-decoration: underline;
color: black;
}
nav .four a:hover{
color:white;
}
<![endif]-->
The above code is specific for my nav bar for IE 9 (its a fix for the nav bar because IE 9 doesn't support text-shadows).
Is there a way to do this in the CSS style sheet?
Conditional Comments are only for HTML, but you can take advantage of it in your CSS. HTML5Boilerplate does this by adding a class to the html element (https://github.com/h5bp/html5-boilerplate/blob/master/index.html)
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
This gives you a hook you can use for targeting IE only:
.lt-ie8 .my-style { color: red }
That's standardly impossible. Conditional blocks in IE can only be used in HTML web pages.
However, the browser vendors have always been funny with their css parsers, including Microsoft. So there is some number of what we call css hacks which can be used to have some rules interpreted by some parsers but not by others.
Please not that it's something which should be avoided if possible : the stylesheet will not be w3c compliant anymore, and it is definitely not a 'clean' solution (more like the dirty legacy workarounds which were commons during IE6's dark reign).
Here are all the ways to do what your asking. Number 6 is prob what your after. Just change the 9 to 11. http://www.visibilityinherit.com/code/target-ie.php

Css Conditional on IE

I want to say something like
#mydiv { background-color: (IE ? red : blue) }
I believe this can be done with conditional comments but it will be ugly. Is there some other hack that is cleaner?
I doubt you can get much less "ugly" than this:
Inside CSS file for all browsers:
#mydiv { background: blue }
After you have included that CSS file:
<!--[if IE]>
<style type="text/css">
#mydiv { background: red }
</style>
<![endif]-->
Of course, you can load a whole new stylesheet for IE.
The cleanest, least hacky way that I've seen to solve this is to ALWAYS load a special stylesheet specifically for various versions of IE.
Put all of your IE Version specific styling in those files. It may not look elegant at first but as you add more and more IE Version specific rules...it makes things infinitely easier.
...not to mention that you don't have to worry about browsers changing the way they handle the various loopholes people use to implement IE hacks.
You might want to consider the way that html5boilerplate uses:
html:
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
css:
#mydiv { background-color: blue; }
.ie7 #mydiv, .ie6 #mydiv { background-color: red; }