This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
To target elements only in IE browsers i'll use
IE6:
* html #nav li ul {
left: -39px !important;
border: 1px solid red;
}
IE7:
*+html #nav li ul {
left: -39px! important;
}
Does anyone know how to target IE8?
I'm not going to get in a debate about whether or not this method should be used, but this will let you set specific css attributes for IE8-9 only (note: it is not a selector, so a bit different than what you asked):
Use '\0/' after each css declaration, so:
#nav li ul {
left: -39px\0/ !important;
}
And to build off another answer, you can do this to assign variou styles to IE6, IE7, and IE8:
#nav li ul {
*left: -7px !important; /* IE 7 (IE6 also uses this, so put it first) */
_left: -6px !important; /* IE 6 */
left: -8px\0/ !important; /* IE 8-9 */
}
source:
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
2013 update: IE10+ no longer supports conditional comments.
Original answer:
Some people seem to be confused because this does not answer the letter of the question, only the spirit - so for clarification:
There is no such thing as a browser selector. There are hacks that take advantage of bugs and/or glitches in specific browsers' CSS parsers, but relying on these are setting yourself up for failure. There is a standard, accepted way to deal with this:
Use conditional comments to target IE only.
Example:
<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->
Everything inside the two <!--> will be ignored by all non-IE browsers as a comment, and IE versions that are less than IE8 will skip it. Only IE8 and greater will process it. 2013 update: IE10+ will also ignore it as a comment.
Take a look at these:
/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }
/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }
(Source: David Bloom’s CSS hack for IE8 Standards Mode)
you can use like this.
it's better than
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]-->
-------------------------------------------------------------
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->
div.foo { color: inherit;}
.ie7 div.foo { color: #ff8000; }
This question is ancient but..
Right after the opening body tag..
<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->
Right before the closing body tag..
<!--[if gte IE 8]>
</div>
<![endif]-->
CSS..
#IE8Body #nav li ul {}
You could do this for all IE browsers using conditional statements, OR target ALL browsers by encapsulating all content in a div with browser name + version server-side
CSS style only for IE8:
.divLogRight{color:Blue; color:Red\9; *color:Blue;}
Only IE8 will be Red.
first Blue: for all browsers.
Red: IE6,7,8 Only
Second Blue: IE6,7 Only
So Red = for IE8 only.
For a very complete summary of browser hacks (including Internet Explorer (IE), Safari, Chrome, iPhone, and Opera) visit this link:
http://paulirish.com/2009/browser-specific-css-hacks/
Building upon image72's excellent answer, you could actually have advanced CSS selectors like this:
<!--[if lt IE 7]><body class="IE IE7down IE8down IE9down IE10down"><![endif]-->
<!--[if IE 7]><body class="IE IE7 IE7down IE8down IE9down IE10down IE7up"><![endif]-->
<!--[if IE 8]><body class="IE IE8 IE8down IE9down IE10down IE7up IE8up"><![endif]-->
<!--[if IE 9]><body class="IE IE9 IE9down IE10down IE7up IE8up IE9up"><![endif]-->
<!--[if gte IE 10]><body class="IE IE10 IE10down IE7up IE8up IE9up IE10up"><![endif]-->
<!--[if !IE]>--><body class="notIE"><!--<![endif]-->
so that in your css you can do this:
.notIE .foo { color: blue; } /* Target all browsers except IE */
.IE9up .foo { color: green; } /* Taget IE equal or greater than 9 */
.IE8 .foo { color: orange; } /* Taget IE 8 only */
.IE7down .foo { color: red; } /* Target IE equal or less than 7 */
.IE8 .foo, .IE9 .foo {
font-size: 1.2em; /* Target IE8 & IE9 only */
}
.bar { background-color: gray; } /* Applies to all browsers, as usual */
/* Maybe show a message only to IE users? */
.notIE #betterBrowser { display: none; } /* Any browser except IE */
.IE #betterBrowser { display: block; } /* All versions of IE */
This is great because:
It's perfectly standards compliant (no ugly/dangerous css hacks)
No need to have separate stylesheets
You can easily target any version of IE as well as complex combinations
In the ASP.NET world, I've tended to use the built-in BrowserCaps feature to write out a set of classes onto the body tag that enable you to target any combination of browser and platform.
So in pre-render, I would run something like this code (assuming you give your tag an ID and make it runat the server):
HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody");
_body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion);
This code enables you to then target a specific browser in your CSS like this:
.IE8 #nav ul li { .... }
.IE7 #nav ul li { .... }
.MacPPC.Firefox #nav ul li { .... }
We create a sub-class of System.Web.UI.MasterPage and make sure all of our master pages inherit from our specialised MasterPage so that every page gets these classes added on for free.
If you're not in an ASP.NET environment, you could use jQuery which has a browser plugin that dynamically adds similar class names on page-load.
This method has the benefit of removing conditional comments from your markup, and also of keeping both your main styles and your browser-specific styles in roughly the same place in your CSS files. It also means your CSS is more future-proof (since it doesn't rely on bugs that may be fixed) and helps your CSS code make much more sense since you only have to see
.IE8 #container { .... }
Instead of
* html #container { .... }
or worse!
I have a solution that I use only when I have to, after I build my html & css valid and working in most browsers, I do the occasional hack with this amazing piece of javascript from Rafael Lima. http://rafael.adm.br/css_browser_selector/
It keeps my CSS & HTML valid and clean, I know it's not the ideal solution, using javascript to fix hacks, but as long as your code is originally as close as possible (silly IE just breaks things sometimes) then moving something a few px with javascript isn't as big of a deal as some people think. Plus for time/cost reasons is a quick & easy fix.
In the light of the evolving thread, see below for a more complete answer:
IE 6
* html .ie6 {property:value;}
or
.ie6 { _property:value;}
IE 7
*+html .ie7 {property:value;}
or
*:first-child+html .ie7 {property:value;}
IE 6 and 7
#media screen\9 {
.ie67 {property:value;}
}
or
.ie67 { *property:value;}
or
.ie67 { #property:value;}
IE 6, 7 and 8
#media \0screen\,screen\9 {
.ie678 {property:value;}
}
IE 8
html>/**/body .ie8 {property:value;}
or
#media \0screen {
.ie8 {property:value;}
}
IE 8 Standards Mode Only
.ie8 { property /*\**/: value\9 }
IE 8,9 and 10
#media screen\0 {
.ie8910 {property:value;}
}
IE 9 only
#media screen and (min-width:0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
IE 9 and above
#media screen and (min-width:0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
IE 9 and 10
#media screen and (min-width:0) {
.ie910{property:value;}
}
IE 10 only
_:-ms-lang(x), .ie10 { property:value\9; }
IE 10 and above
_:-ms-lang(x), .ie10up { property:value; }
or
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
IE 11 (and above..)
_:-ms-fullscreen, :root .ie11up { property:value; }
Javascript alternatives
Modernizr
Modernizr runs quickly on page load to detect features; it then
creates a JavaScript object with the results, and adds classes to the
html element
User agent selection
The Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Adds (e.g) the below to the html element:
data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
Allowing very targetted CSS selectors, e.g.:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Footnote
If possible, avoid browser targeting. Identify and fix any issue(s) you identify. Support progressive enhancement and graceful degradation. With that in mind, this is an 'ideal world' scenario not always obtainable in a production environment, as such- the above should help provide some good options.
Attribution / Essential Reading
Keith Clarke
Paul Irish
Web Devout
The Spanner
I realize this is an old question but it was the first result on Google when I searched and I think I have found a better solution than the highest ranked suggestion and what the OP chose to do.
#nav li ul:not(.stupidIE) { color:red }
So technically this is the opposite of what the OP wanted, but that just means you have to apply the rule you want for IE8 first and then apply this for everything else. Of course you can put anything inside the () as long as it is valid css that doesn't actually select anything. IE8 chokes on this line and doesn't apply it, but previous IEs (ok I only checked IE7, I have stopped caring about IE6), just ignore the :not() and do apply the declarations. And of course every other browser (I tested Safari 5, Opera 10.5, Firefox 3.6) applies that css as you would expect.
So this solution, I guess like any other pure CSS solution would assume that if the IE developers add support for the :not selector then they will also fix what ever discrepancy was causing you to target IE8.
OK so, it isn't css hack, but out of frustration for not being able to find ways to target ie8 from css, and due to policy of not having ie specific css files, I had to do following, which I assume someone else might find useful:
if (jQuery.browser.version==8.0) {
$(results).css({
'left':'23px',
'top':'-253px'
});
}
\9 doesn’t work with font-family, instead you’d need to use “\0/ !important” as Chris mentioned above, for example:
p { font-family: Arial \0/ !important; }
There aren't any selector hacks for IE8. The best resource for this issue is http://browserhacks.com/#ie
If you want to target specific IE8 you should do comment in html
<!--[if IE 8]> Internet Explorer 8 <![endif]-->
or you could use attribute hacks like:
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
For more info on this one check: http://www.paulirish.com/2009/browser-specific-css-hacks/
Related
Here is my block of CSS:
.actual-form table {
padding: 5px 0 15px 15px;
margin: 0 0 30px 0;
display: block;
width: 100%;
background: #f9f9f9;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}
I only want IE 7, 8, and 9 to "see" width: 100%
What is the simplest way to accomplish this?
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#myElement {
/* Enter your style code */
}
}
Explanation: It is a Microsoft-specific media query. Using -ms-high-contrast property specific to Microsoft IE, it will only be parsed in Internet Explorer 10 or greater. I have used both the valid values of the media query, so it will be parsed by IE only, whether the user has high contrast enabled or not.
Update 2017
Depending on the environment, conditional comments have been officially deprecated and removed in IE10+.
Original
The simplest way is probably to use an Internet Explorer conditional comment in your HTML:
<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->
There are numerous hacks (e.g. the underscore hack) you can use that will allow you to target only IE within your stylesheet, but it gets very messy if you want to target all versions of IE on all platforms.
Apart from the IE conditional comments, this is an updated list on how to target IE6 to IE10.
See specific CSS & JS hacks beyond IE.
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
/* IE9, IE10, IE11 */
#media screen and (min-width:0\0) {
#veintidos { color: red}
}
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* IE 10+ */
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: red; }
}
There are severals hacks available for IE
Using conditional comments with stylesheet
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->
Using conditional comments with head section css
<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->
Using conditional comments with HTML elements
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->
Using media query
IE10+
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
selector { property:value; }
}
IE6,7,9,10
#media screen and (min-width: 640px), screen\9 {
selector { property:value; }
}
IE6,7
#media screen\9 {
selector { property:value; }
}
IE8
#media \0screen {
selector { property:value; }
}
IE6,7,8
#media \0screen\,screen\9 {
selector { property:value; }
}
IE9,10
#media screen and (min-width:0\0){
selector { property:value; }
}
As well as a conditional comment could also use CSS Browser Selector http://rafael.adm.br/css_browser_selector/ as this will allow you to target specific browsers. You can then set your CSS as
.ie .actual-form table {
width: 100%
}
This will also allow you to target specific browsers within your main stylesheet without the need for conditional comments.
I think for best practice you should write IE conditional statement inside the <head> tag
that inside has a link to your special ie style sheet.
This HAS TO BE after your custom css link so it overrides the latter,
I have a small site so i use the same ie css for all pages.
<link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
this differs from james answer as i think(personal opinion because i work with a designer team and i dont want them to touch my html files and mess up something there) you should never include styles
in your html file.
A bit late on this one but this worked perfectly for me when trying to hide the background for IE6 & 7
.myclass{
background-image: url("images/myimg.png");
background-position: right top;
background-repeat: no-repeat;
background-size: 22px auto;
padding-left: 48px;
height: 42px;
_background-image: none;
*background-image: none;
}
I got this hack via: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
#myelement
{
color: #999; /* shows in all browsers */
*color: #999; /* notice the * before the property - shows in IE7 and below */
_color: #999; /* notice the _ before the property - shows in IE6 and below */
}
Welcome BrowserDetect - an awesome function.
<script>
var BrowserDetect;
BrowserDetect = {...};// get BrowserDetect Object from the link referenced in this answer
BrowserDetect.init();
// On page load, detect browser (with jQuery or vanilla)
if (BrowserDetect.browser === 'Explorer') {
// Add 'ie' class on every element on the page.
$('*').addClass('ie');
}
</script>
<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
div.ie {
// do something special for div on IE browser.
}
h1.ie {
// do something special for h1 on IE browser.
}
</style>
The Object BrowserDetect also provides version info so we can add specific classes - for ex. $('*').addClass('ie9'); if (BrowserDetect.version == 9).
Good Luck....
For IE9+
#media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.selector{
color: red;
}
}
IE Edge 12+
#supports (-ms-ime-align: auto) {
.selector {
color: red;
}
}
This one works on Edge and all IEs
:-ms-lang(x), .selector { color: red; }
It really depends on the IE versions ... I found this excellent resource that is up to date from IE6-10:
CSS hack for Internet Explorer 6
It is called the Star HTML Hack and looks as follows:
html .color {color: #F00;}
This hack uses fully valid CSS.
CSS hack for Internet Explorer 7
It is called the Star Plus Hack.
*:first-child+html .color {color: #F00;}
Or a shorter version:
*+html .color {color: #F00;}
Like the star HTML hack, this uses valid CSS.
CSS hack for Internet Explorer 8
#media \0screen {
.color {color: #F00;}
}
This hacks does not use valid CSS.
CSS hack for Internet Explorer 9
:root .color {color: #F00\9;}
This hacks also does not use valid CSS.
Added 2013.02.04: Unfortunately IE10 understands this hack.
CSS hack for Internet Explorer 10
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.color {color: #F00;}
}
This hacks also does not use valid CSS.
For /* Internet Explorer 9+ (one-liner) */
_::selection, .selector { property:value\0; }
Only this solution perfectly work for me.
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->
body.ie .actual-form table {
width: 100%
}
How to Hide CSS from Older Browsers Like Internet Explorer
Here is a COMPLETE Javascript-free, CSS-based solution that allows you to target Internet Explorer 1-11! My solution below works by hiding IE1-7 from all your modern sheets using #import, giving IE1-7 a clean, white page layout, then uses three simple CSS media query "hacks" to isolate IE8-11 in the imported sheet. It even affects IE on Mac. And no IE conditional comments are needed.
With this solution you will never have to customize your web applications for Internet Explorer ever again, and can safely move forward using cutting edge CSS in all your websites. Best of all it requires NO JavaScript to work!!
HOW IT WORKS
First create three CSS style sheets:
"OldBrowsers.css"
"ModernBrowsers.css"
"Import.css".
The first style sheet, "OldBrowsers", is a basic element "reset" style sheet that gives all browsers, old and new, a simple white, block-level layout and where you can style all the elements for every web browser ever made. This allows 20+ years of web browsers and their elements to all use the same HTML designs and look alike. This sheet is also seen by IE1-11. Add in this sheet all basic styles needed to style the elements only. The second sheet, "ModernBrowsers.css", is where you can safely put all your modern, cutting-edge CSS that styles both the elements with HTML5 modern designs, but control layouts, etc. IE1-7 will NOT see this sheet. The third sheet is an import sheet, "Import.css", that will load the second sheet mentioned above and all your advanced CSS style sheets using a single #import rule. This hides your modern style sheet from wide range of older browsers, including IE1-7. IE1-11 will see the "Import.css" sheet, but IE1-7 will not see "ModernBrowsers.css" sheet because of the #import rule.
<link media="screen" rel="stylesheet" type="text/css" href="OldBrowsers.css" />
<link media="screen" rel="stylesheet" type="text/css" href="Import.css" />
In your "Import.css" sheet add this #import rule exactly as formatted below. This "ModernBrowsers.css" sheet will be hidden from IE1-7 and a wide range of older browsers listed below:
#import 'ModernBrowsers.css' all;
All CSS in this imported sheet will be hidden from Internet Explorer 1-7 and a wide range of older browsers. IE1-7, and a wide range or older browsers, do not understand media type "all", nor the specific #import format shown above, so will fail to import this sheet. This specific version of import is not recognized by many older browsers (pre-2001). Those browsers are so old now, you just need to deliver them a clean white web page with stacked blocks of content.
The CSS you add to "OldBrowsers" allows you to set up old browsers and IE1-7 to use plain styling you control. I personally add only HTML "reset" element styling in this sheet and make sure all the HTML5 elements have simple clean designs. Newer browsers will cascade over these in the "ModernBrowsers.css" style sheet.
In "ModernBrowsers.css" you want to add all your modern styles, but also have special CSS hacks to target Internet Explorer 8-11 using CSS media queries (alongside all your normal selectors and classes). Simply add the following IE-only fixes to your modern style sheet to target these last specific IE browsers. Drop into these blocks any styles specific to these old IE browsers.
Note: Keep in mind HTML5 and most of CSS3 is generally supported starting with Internet Explorer 9 through 11. But there are bugs, missing element support, and other issues with IE8-11 and even the Trident Edge browsers miss. But you now can safely target these older IE 8-11 browsers this way, while using your cutting-edge CSS inside this sheet for all other modern browsers going forward:
/* IE8 */
#media \0screen {
body {
background: red !important;
}
}
/* IE9 */
#media all and (min-width:0\0) and (min-resolution:.001dpcm) {
body {
background: blue !important;
}
}
/* IE10-11 */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background: green !important;
}
}
Simple! You have now targeted styles for IE1-11 (all Internet Explorer browsers!)
With this solution you achieve the following:
The #import excludes IE 1-7 from your modern styles, completely! Those agents, along with the list below, will never see your modern imported styles and get a clean white style sheet content page older browsers can still use as far as viewing your content (use "OldBrowsers.css" to style them). The following browsers are excluded from "ModernBrowsers.css" using the above #import rule:
Windows Internet Explorer 1-7.x
Macintosh Internet Explorer 1-5.x
Netscape 1-4.8
Opera 1-3.5
Konqueror 1-2.1
Windows Amaya 1-5.1
iCab 1-2
OmniWeb
In your "ModernBrowsers" imported sheet, you can now safely target IE browsers version 8-11 using simple media query "hacks".
This system uses a simple #import style sheet system that is fast and manageable using traditional, non-support for external style rules rather than CSS fixes sprinkled throughout multiple sheets. (BTW...Do not listen to anyone saying #import is slow, as it is not. My import sheet has ONE LINE and is maybe a kilobyte or less in size! #import has been used since the birth of the WWW and is no different than a simple CSS link. Compare this to the Megabytes of Javascript kids today are shoving into browsers using these new "modern" ECMAScript SPA API's just to display a tiny paragraph of news!) One #import line now separates years and years of IE browser version from your newer CSS code and fancy layout designs. No scripting needed!
All old IE browsers and a wide range of other user agents are excluded from modern styles now using this import strategy, which allows these older browsers to collapse back to plain, "block-level", white pages and stacked content layouts that are fully accessible by older browsers. You can now spend MINIMAL time customizing your content for old browsers and instead let them see plain white stacked content pages for thousands of pages in your website!
Notice this solution has no IE conditional comments! You should NEVER use those since IE 10-11 no longer support IE conditionals.
With this solution, your modern web designs are now 100% free to use custom, cutting-edge CSS3 technologies without having to ever worry about older browsers and IE1-11 ever again!
Linked CSS has very wide support, even in older CSS1 browsers going back to 1995. It is just one more reason to NOT USE EMBEDDED or "style" element styles. Use these linked CSS designs, instead.
If you added a really good set of "reset" or element styles into the "OldBrowsers" style sheet, 20+ years of old and new browsers and their basic element designs will allow your core web page design to look the same using that one sheet. The idea with "reset" element CSS is to force all browsers through history, and their shared HTML element support, to look the same BEFORE you apply CSS layouts, scripting, and fancier CSS designs. The HTML basic elements have change very little in the past 25 years. So styling elements first to simplify text content display makes sense.
This is part of the new "progressive" CSS, 100% JavaScript-free, design concept in 2021 for addressing cross-browser style issues, where older agents are allowed to degrade gracefully to simpler layouts rather than struggling to fix problems in cryptic old, broken, box-model agents (IE5-6) in a piecemeal fashion to match complex CSS layouts. Most older web browsers do NOT need to recreate your custom layouts any longer. They just need to display basic text and media content. With the long tail of their slow demise online, IE 1-11 just need simple layout designs so the content is readable and accessible.
The advantage to this strategy is its 100% Javascript-free! You should NOT be using scripting to manage CSS in web browsers in 2021, anyway. I recommend you dump Modernizr and all "polyfills" and try my clean CSS solution instead when managing Internet Explorer in web browsers. My solution is effective in targeting IE1-11, giving you complete control over how you customize CSS for those targeted browsers, while freeing you up as a designer to focus on newer CSS3 and cutting-edge styles and layouts in Edge and all other modern HTML5 browsers going forward. I have been using a version of this since 2004, but recently updated it for 2021.
It's my hope we stop creating these gigantic, multi-megabyte, CPU-hog, JavaScripted, polyfill nightmare scripted solutions for addressing what used to be solved years ago with a few lines of simple Cascading Style Sheet code. :)
You can get my complete Universal CSS Framework from Git for free, which uses this same code plus even more goodies!
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
Friends, please help me in defining specific css rule for IE9?
For example like this
/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }
You can prepend the CSS style with
:root
to make it IE9-specific, like this:
:root #element { color:pink \0/IE9; } /* IE9 */
Use IE conditional comments:
<!--[if ie 9]>
your stuff here
<![endif]-->
\9 is a "CSS hack" specific to Internet Explorer.
This simply means that the one specific line of CSS ending with a \9;
In your example,
If your CSS looked like this...
html .twit-post .delete_note a
{
background-position-y: 2px\9;
}
html .twit-post .delete_note a:hover
{
background-position-y: -14px\9;
}
The result would be background-position-y: -14px; in IE 9
I think you can do the same as if you want to write specific code for IE6 but say IE9 instead :)
<!--[if IE 9]>
Special instructions for IE 9 here
<![endif]-->
use conditional CSS:
(place the code above the <head> on your html, and IE9 will read that extra CSS file)
<!--[if (gte IE 9)|!(IE)]><!-->
place the link to the CSS file here
<![endif]-->
This means the approach is with a new CSS file rather than a hack in the classes, this guarantees the CSS are valid.
I found that in some cases using negative values (when using a compiler to compile LESS files) using:
margin-right: -15px\9; /* This fails */
margin-right: ~"-18px\9"; /* This passes */
You shouldn't need to target IE9. It is capable of handling modern css and shouldn't be hacked. This is an outdated method of developing.
Can anyone please help me with this. I am new to css styling. I have a css file where all my styling resides for the asp.net website that I am trying to build. However it works fine on the server that has IE 7 installed on it and when I try to view it using chrome, firefox or IE 8 and above it kinda distorts the look of the website.
I need to change my margin according to the client browser. How do I achieve this? Ive heard that there is an "if" condition solution to this. Means I have to write seperate css files in my project and include the right one according to the browser?? Cant I just change the basic css to detect the browser and select the appropriate styles?
i want to choose different positioning for a division according to client browser. I am working on asp.net 2.0 by the way.
existing code:
#page
{
background-image: url('C:/Program Files (x86)/some-path-here/Images/img1.jpg');
}
I am trying to do this:
html>/**/body #page
{
background-image: url('C:/Program Files (x86)/some-path-here/Images/img1.jpg');
}
But the img1 does not load up for IE 8 and firefox. It does for IE 7.
I tried to target just IE 7 for my testing purposes with the following code in my html file:
<!--[if IE 7]>
body {
background-color: Red;
}
<![endif]-->
However when I test the page on IE 7 it just show me the "background-color: Red;" text. Why is that? Am i missing something here in this conditional statement? It is only taking the text and doing nothing with the background color. Thanks.
You can code for standards compliant browsers (Chrome, Safari, Firefox etc.) and then add conditional comments for internet explorer.
EDIT:
As a side point, look at Eric Myers' CSS reset. It's an excellent resource.
Conditional formatting for IE: http://www.quirksmode.org/css/condcom.html
In terms of Hacks you can write invalid markup for some browsers (such as IE) by using _ in front of the CSS attributes for IE 6/7 but it makes your CSS invalid per specifications - it will still run properly.
Instead of Conditional Comments and non-standards ompliant CSS hacks, check out the CSS Browser Selector plugin. This jQuery will allow you to write different rules for each browser inside the CSS file itself with no inaccuracies for standards and no Conditional comments. It can even allow you to target different browsers on different OS's.
For IE you'd write:
.ie .myDiv
{
background-color: #f00;
}
And for webkit browsers:
.webkit .myDiv
{
background-color: #bar;
}
Then IE (all versions) and Webkit browsers will display different background colors. You have a big choice of browsers to select as well :)
I going to mention below some of the CSS hacks I know for the Browsers that I learn while working here at Oodles Technologies.
I'm gonna list them out here as there are some properties which creates issue in webkit based browsers like safari, chrome and IE. Let us suppose that we can using this css code:
CSS targeting Chrome and Safari:
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> #media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome, if Chrome rule needed */
.selector { property:value; }
/* Safari 5+ ONLY */
::i-block-chrome, .selector { property:value; }
}
</span></span>
CSS target Safari 9 but ONLY on iOS
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> /* Safari 9+ (iOS Only) */
#supports (-webkit-text-size-adjust:none) and (not (-ms-accelerator:true)) {
.selector { property:value; }
}
</span></span>
CSS target Firefox only
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> #-moz-document url-prefix() {
.selector { property:value; }
}
</span></span>
CSS target IE10 only
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> #media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
.selector { property:value; }
}
</span></span>
CSS target IE9 only
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> <!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
</span></span>
CSS target IE8 only
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> <!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" media="screen" />
<![endif]-->
</span></span>
CSS target IE7 only
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> <!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen" />
<![endif]-->
</span></span>
Hope you find these useful
CSS Hacks are decreasing in popularity. You should instead start your css by using a CSS Reset. You can read more about reset options in this thread.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I do IE conditionals in CSS?
How can I apply the rules below to IE only?
.abc {
float:left;
height:0;
margin:0 10px;
width:0;
/*Apply these rules for IE only*/
position:absolute;
left:30;
top:-10;
/*Apply these rules for IE only*/
}
In browsers up to and including IE9, this is done through conditional comments.
<!--[if IE]>
<style type="text/css">
IE specific CSS rules go here
</style>
<![endif]-->
A good way to avoid loading multiple CSS files or to have inline CSS is to hand a class to the body tag depending on the version of Internet Explorer. If you only need general IE hacks, you can do something like this, but it can be extended to be version specific:
<!--[if IE ]><body class="ie"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->
Now in your css code, you can simply do:
.ie .abc {
position:absolute;
left:30;
top:-10;
}
This also keeps your CSS files valid, as you do not have to use dirty (and invalid) CSS hacks.
A fast approach is to use the following according to ie that you want to focus (check the comments), inside your css files (where margin-top, set whatever css attribute you like):
margin-top: 10px\9; /*It will apply to all ie from 8 and below */
*margin-top: 10px; /*It will apply to ie 7 and below */
_margin-top: 10px; /*It will apply to ie 6 and below*/
A better approach would be to check user agent or a conditional if, in order to avoid the loading of unnecessary CSS in other browsers.
I prefer using a separate file for ie rules, as described earlier.
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie-style.css"/><![endif]-->
And inside it you can set up rules for different versions of ie using this:
.abc {...} /* ALL MSIE */
*html *.abc {...} /* MSIE 6 */
*:first-child+html .abc {...} /* MSIE 7 */
Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.
Note: I'm looking for a 'clean' solution. Using a JavaScript browser sniffer to add a 'firefox' class to my HTML does not qualify as clean in my opinion. I would rather like to see something that depends on browser capabilities, much like conditional comments are only 'special' to IE…
This solution does not rely on JavaScript being turned on.
#-moz-document url-prefix() {
h1 {
color: red;
}
}
<h1>This should be red in FF</h1>
It's based on yet another Mozilla specific CSS-extension. There's a whole list of these CSS extensions right here:
Mozilla CSS Extensions. ⚠ Do note that they are mostly deprecated!
For more information about this specif CSS-extension, see this question: What does #-moz-document url-prefix() do?
Updated(from #Antoine comment)
You can use #supports
#supports (-moz-appearance:none) {
h1 { color:red; }
}
<h1>This should be red in FF</h1>
More on #supports here
Here is how to tackle three different browsers: IE, FF and Chrome
<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
width:490px;
}
/*This will work for firefox*/
#-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
width:486px;
}
</style>
<![endif]-->
Here is some browser hacks for targeting only the Firefox browser,
Using selector hacks.
_:-moz-tree-row(hover), .selector {}
JavaScript Hacks
var isFF = !!window.sidebar;
var isFF = 'MozAppearance' in document.documentElement.style;
var isFF = !!navigator.userAgent.match(/firefox/i);
Media Query Hacks
This is gonna work on, Firefox 3.6 and Later
#media screen and (-moz-images-in-menus:0) {}
If you need more information,Please visit browserhacks
First of all, a disclaimer. I don't really advocate for the solution I present below. The only browser specific CSS I write is for IE (especially IE6), although I wish it wasn't the case.
Now, the solution. You asked it to be elegant so I don't know how elegant is it but it's sure going to target Gecko platforms only.
The trick is only working when JavaScript is enabled and makes use of Mozilla bindings (XBL), which are heavily used internally in Firefox and all other Gecko-based products. For a comparison, this is like the behavior CSS property in IE, but much more powerful.
Three files are involved in my solution:
ff.html: the file to style
ff.xml: the file containg the Gecko bindings
ff.css: Firefox specific styling
ff.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
-moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
ff.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="load-mozilla-css">
<implementation>
<constructor>
<![CDATA[
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "ff.css");
document.getElementsByTagName("head")[0]
.appendChild(link);
]]>
</constructor>
</implementation>
</binding>
</bindings>
ff.css
h1 {
color: red;
}
Update:
The above solution is not that good. It would be better if instead of appending a new LINK element it will add that "firefox" class on the BODY element. And it's possible, just by replacing the above JS with the following:
this.className += " firefox";
The solution is inspired by Dean Edwards' moz-behaviors.
Using -engine specific rules ensures effective browser targeting.
<style type="text/css">
//Other browsers
color : black;
//Webkit (Chrome, Safari)
#media screen and (-webkit-min-device-pixel-ratio:0) {
color:green;
}
//Firefox
#media screen and (-moz-images-in-menus:0) {
color:orange;
}
</style>
//Internet Explorer
<!--[if IE]>
<style type='text/css'>
color:blue;
</style>
<![endif]-->
Now that Firefox Quantum 57 is out with substantial — and potentially breaking — improvements to Gecko collectively known as Stylo or Quantum CSS, you may find yourself in a situation where you have to distinguish between legacy versions of Firefox and Firefox Quantum.
From my answer here:
You can use #supports with a calc(0s) expression in conjunction with #-moz-document to test for Stylo — Gecko does not support time values in calc() expressions but Stylo does:
#-moz-document url-prefix() {
#supports (animation: calc(0s)) {
/* Stylo */
}
}
Here's a proof-of-concept:
body::before {
content: 'Not Fx';
}
#-moz-document url-prefix() {
body::before {
content: 'Fx legacy';
}
#supports (animation: calc(0s)) {
body::before {
content: 'Fx Quantum';
}
}
}
Targeting legacy versions of Firefox is a little tricky — if you're only interested in versions that support #supports, which is Fx 22 and up, #supports not (animation: calc(0s)) is all you need:
#-moz-document url-prefix() {
#supports not (animation: calc(0s)) {
/* Gecko */
}
}
... but if you need to support even older versions, you'll need to make use of the cascade, as demonstrated in the proof-of-concept above.
A variation on your idea is to have a server-side USER-AGENT detector that will figure out what style sheet to attach to the page. This way you can have a firefox.css, ie.css, opera.css, etc.
You can accomplish a similar thing in Javascript itself, although you may not regard it as clean.
I have done a similar thing by having a default.css which includes all common styles and then specific style sheets are added to override, or enhance the defaults.
The only way to do this is via various CSS hacks, which will make your page much more likely to fail on the next browser updates. If anything, it will be LESS safe than using a js-browser sniffer.
with -moz prefix
div:-moz-read-only {
background: green;
}
textarea:-moz-read-write {
background: green;
}
:-moz-any(div#foo) div.bar {
background: green;
}
li:-moz-first-node, li:-moz-last-node {
background: green;
}
CSS support can be used from JavaScript.
if (CSS.supports("( -moz-user-select:unset )")) {
console.log("FIREFOX!!!")
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
The following code tends to throw Style lint warnings:
#-moz-document url-prefix() {
h1 {
color: red;
}
}
Instead using
#-moz-document url-prefix('') {
h1 {
color: red;
}
}
Helped me out! Got the solution for style lint warning from here
How to Apply CSS to Only Firefox
This solution below offers you decent Firefox-only CSS support in a wider range of Firefox browser versions...
#supports (-moz-appearance:button) and (contain:paint) {
body {
background: red;
}
}
-moz-appearance:button was supported in Mozilla/Firefox as early as 2006. But the #supports rule was not supported till 2019 so that would be the earliest Firefox browser supporting this rule. contain:paint excludes Safari browsers from the rule. Internet Explorer and early Trident Edge browsers do not support #supports so also excluded from seeing the CSS rule. No known Chrome browser should support -moz-appearance:button, so excluded.
As always, all my CSS solutions are 100% JavaScript-free :)