I am using simple method to target IE only CSS.
<!--[if !IE]><!-->
<body>
<!--<![endif]-->
<!--[if IE]>
<body class="ie">
<![endif]-->
<div class="Out">My test content
</div>
External CSS
.Out{
width:300px;/*Not for IE*/
}
ie. Out{
width:300px; /*only for IE*/
}
But In FF & chrome developer tool I am seeing body get class="ie" which is wrong.class="ie" is only for IE browsers.
There are number article I have referred
Reference:
https://css-tricks.com/snippets/html/add-body-class-just-for-ie/
https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Detecting IE11 using CSS Capability/Feature Detectionenter link description here
http://www.positioniseverything.net/articles/cc-plus.html .....etc list goes on
I have referred numbers of article but not helping.I think I am missing some things.
I have tried lots of thing from various source and article as I mentioned in my question.
Fortunately what work for me is answer from "SW4" in how-to-write-a-css-hack-for-ie-11
IE 8,9 and 10
.Out {
width:400px\0; /*For IE 8,9 and 10.*/
/* For me above code is also supporting in IE 11 also. However, for IE 10+ browser I have added media query using -ms-high-contrast below*/
width: 300px; /*for other Browsers*/
}
Here’s the technique, which is really rather simple: create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.
-ms-high-contrast supports two values: none and active. So to target IE10+ regardless of the property’s setting, use this media query:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
width:400px; /* IE10+ CSS styles go here */
}
Related
This question already has answers here:
How to target only IE (any version) within a stylesheet? [duplicate]
(6 answers)
Closed 5 years ago.
I am looking for a way to modify my style.css file to target ONLY Internet Explorer browser (so without impacting my styles for Chrome & Firefox).
Example
I want to the following style for Chrome & Firefox:
.header .currency {margin: **-28px** 0px 0px 0px;}
I want the following style for IE:
.header .currency {margin: **-30px** 0px 0px 0px;}
Note
Posts exist for CSS modification on HTML file and this is not what I am looking for. Therefore please do not provide response if this is not link to .CSS file.
IE6 to IE9
For versions of IE up to IE9, it's best to use conditional stylesheets :
<!--[if lte IE 6]> Internet Explorer 6 or less <![endif]-->
<!--[if lte IE 7]> Internet Explorer 7 or less <![endif]-->
<!--[if lte IE 8]> Internet Explorer 8 or less <![endif]-->
<!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->
Conditional stylesheets are ignored by every browser except versions of IE that correspond with the condition.
IE10 to IE11
Unfortunately, IE10 and IE11 do not support conditional stylesheets. However, you can use the following CSS hack to target only those two browsers :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
// Put your IE10+-specific CSS here
}
See browserhacks.com for an overview of different ways to target specific browsers with CSS.
Note
For various reasons, it's recommended to write as little browser-specific CSS as possible.
Best way is use conditional comments.
For example:
<!--[if IE 8]>
load here your ie8.css
<![endif]-->
IF you want edit only CSS:
/* IE css hack */
margin-top: 10px\9 /* apply to all ie from 8 and below */
*margin-top:10px; /* apply to ie 7 and below */
_margin-top:10px; /* apply to ie 6 and below */
Final mode, #media hack.
I was making my website using mozilla and chrome and edge as the main resource to see if It was working good dynamically.
But when I opened the IE browser my css, like "transforms" where all formatted in a odd way, the places where they were originally were not the same anymore in IE.
Is there a way to make css do a selection or restrict for each browser, like for chrome It uses "transform" then on IE it would use "right".
I can't use "right" on chrome or it will be desformatted so, I would like to know if there is a special condition.
When writing CSS or JS you'll want to check browser compatibility tables for the features that you use. You can find this on official resource websites such as https://www.w3schools.com/cssref/css3_browsersupport.asp
For transforms in particular, have a look at: https://www.w3schools.com/cssref/css3_pr_transform.asp
You'll either need to use features that are compatible across all the browsers that you wish to support (taking into account their versions) or, as you mentioned, code alternatives by detecting what features are available in your user's browser. A tool such as https://modernizr.com/ can help with that.
use following hacks for browsers specification.
google chrome:
#media screen and (-webkit-min-device-pixel-ratio:0)
{
#element { properties:value; }
}
firefox:
#-moz-document url-prefix() {
#element { properties:value; }
}
Opera:
#media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#element { properties:value; }
}
safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#element { properties:value; }
}
Internet Explorer 9 and lower :
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Internet Explorer 10 & 11 :
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
Microsoft Edge 12 :
#supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}
And for future details and specification see following links W3school & Site Point
Here is my code for IE9 and above:
<!--[if gte IE 9]>
<style type="text/css">
#bottom p{
font-size:10pt!important;
}
#pop_cities{
font-size:14pt !important;
font-weight:bold !important;
padding-right:10px !important;
}
</style>
<![endif]-->
How can I apply these style for the version 9 of Internet Explorer and above?
Conditional comments are no longer supported:
http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
They don't work for version 10 and greater.
There is a hack for Internet Explorer 10, which you might want to use:
. ie10 #hack{
/* Only works in IE10 */
}
Maybe you have to arm yourself with some JavaScript for the fight against the future versions of Internet Explorer, if you can't fix the underlying problem. For example with JQuery:
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
As #Spudley mentioned, the $_browser property is deprecated and already removed in the newer version of jQuery. Maybe it's better to check the browser for e certains feature you need. For example with Modernizr. This is also recommended in the JQuery documentation.
Conditional comments supported IE9 and below version
IE 10+ browser support #media screen
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/*css*/
}
In a html page support these browsers Mozilla Firefox14, IE8, Safari5.1.1, Chrome19.
Since to support all these browsers I have to use css hacks in order to maintain the proper alignment of the elements on page.
Below is the css:
For Mozilla Firefox and IE8:
.dis_stats
{
position:absolute;
margin-top:-30px;
margin-left:-190px;
background:#E0E0E0;
width:141px;
height:80px;
_position:relative;
_margin-top:-460px;
_margin-left:115px;
}
For Safari & Chrome:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.dis_stats
{
position:absolute;
background:#E0E0E0;
margin-top:-30px;
margin-left:731px;
width:141;
height:80;
}
}
Now what is happening on Mozilla it is running perfectly. But on IE8 it is applying the properties defined for Safari & Chrome and if I remove any of the Safari & Chrome's property then it will pick the same from intended properties (i.e defined for IE8 & Mozilla).
I am not getting any clue why is this happening. Anyone please suggest what is wrong here?
I recommend trying to work out a version that complies with standards and doesn't need hacks.
But if you must hack, you can consider conditional comments specially for IE 8 with separate stylesheet that fixes its problems:
<!--[if lt IE 8]>
<style type="text/css" src="path/to/ie-only-style.css">
<![endif]-->
This doesn't really explain what's wrong with IE, but can solve some IE-specific problems without using too much time (at cost of maintainability).
I am currently developing a theme for a homepage but ran into a few problems. For whatever reason I have no access to editing the html code itself, and I need to write custom .css for IE (specifically versions below IE9).
I have "two" issues. First one is dual backgrounds. Versions below IE9 can't seem to render them flawlessly. If IE skips the element, this is fine but since the graphic in this element co-works with another element (for a smooth graphical transition), it makes the other element look weird. The graphic in this second element is a background within a div-box. I want this background to be another custom background that's only rendered if the user is using IE as browser; and if possible, I want this to only apply to versions below IE9 (site is rendered with dual backgrounds just fine in IE9).
http://patrikarvidsson.com/project/sohelp/illustration.jpg
CSS is as follows (#mainframe is the part under the header navigation box). The lower image is how it is rendered in IE8. IE7 shows the same. First one is FF/Chrome/Safari and IE9.
#mainframe {
background: url('img/bg2.png') no-repeat,
url('img/bg1.png') repeat-y !important;
}
I've searched quite a lot on the net, also been asking friends and this does not seem to be working without writing conditional comments within the html markup. Am I missing something? Is this doable somehow with only the use of .css files?
Site is using jquery. I don't know this stuff, but I thought I'd mention it just in case.
You might want to look into this article which explains how to use conditional comments to set classes on the html element. You can then use that class to target specific browsers in your stylesheet, in a clean way.
Your html tag would look something like this:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
Edit 2
Since the announcement that IE10 will not support conditional comments I though it would be nice to update this answer. I tested the type of comments it will support and it seems that the above will still work, but if you want to target higher than 10 or only 10 you will be out of luck. As suggested by Microsoft themselves on their blog (link in comments #MarcoDemaio) you should use feature detection.
Then you can do something like this in your css:
.somestyle {
background: transparent url('derp.jpg') no-repeat;
}
/* ie6 fallsback class */
.ie6 .somestyle {
background: #eee;
}
Read the article, and good luck ;)
Edit 2:
Since IE7 isn't my greatest concern anymore and IE9 is pretty consistent in its behaviour I can get away wil just the following code (which will add a class only for IE versions less than IE9):
<!--[if lt IE 9]><html class="lte9"><![endif]-->
<!--[if gt IE 8|!IE]><!--><html><!--<![endif]-->
Edit 1:
Ok I managed to miss your "can't edit html" comment.
In that case you can only use browser specific hacks, I think they're dirty as hell but hey, if you have no other option......
Somthing like this:
.someclass {
*color: blue; /* IE 7 and below */
_color: blue; /* IE 6 */
}
/* IE6, IE7 - asterisk hack */
.someclass { *color: blue; }
/* IE8 - winning hack */
.someclass { color: blue\0/; } /* must be last declaration in the selector's ruleset */
For your dual backgrounds problem, you simply need to add another containing element.
<div class="element">
...
</div>
becomes
<div class="container">
<div class="element">
...
</div>
</div>
I'm not sure why you wouldn't be able to manually edit the HTML, but if you have access to a javascript file and you're using jQuery, you can add the class like so:
$('.element').wrap('<div class="container" />');
You can use CSS hacks to avoid using conditional comments. CSS hacks aren't as commonly used now since the average user uses a browser that doesn't require any hacks to display properly, but it is still a completely valid and reliable way to avoid using HTML conditional statements. Depending on the specificity you want, you have a bunch of different hacks that you can use to only target specific versions of IE:
* html .element { color: #fff; /* IE6 only */ }
html .element { _color: #333; /* IE7 only */
*+html .element { color: #999; /* IE7 only */ }
html .element { *color: #000; /* IE7 and below */
html .element { color: #ccc\9; /* IE8 and below */ }
So:
#container { background: url(img/bg1.png) repeat-y\9; }
#container #mainframe {
background: url('img/bg2.png') no-repeat, url('img/bg1.png') repeat-y !important;
background: url('img/bg2.png') no-repeat\9; }
I had this problem in my CMS application so...
Create a container div have it's class the browser name and version to be looks like
<div class="ie_6_0">
<div class="your_custom_elements">
///////
</div>
</div>
and do you CSS classes like
.your_custom_elements{common styles between versions}
.ie_6_0 .your_custom_elements{do somthink for old versions}
.ie_9_0 .your_custom_elements{do somthink for new versions}
UPDATE 1
or like
<div id="mainframe" class="ie_6_0">
///
</div>
and CSS like
#mainframe{common styles between versions}
#mainframe.ie_6_0{do somthink for old versions}
#mainframe.ie_9_0{do somthink for new versions}
ie_6_0: as your user browser name and version must request it and add it by code.