This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
Is there a hack to target IE9 only? I am facing a problem in IE9 only, other browsers are working fine. I am using \9, but it is effecting IE8 as well.
I don't want to use conditional comments.
You can use this :root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */
I came up with a media query that does this as well. It specifies only IE9.
#media all and (min-width:0\0) and (min-resolution:.001dpcm)
{
#div { color:red; }
}
Other ones I have worked out, including a msie 9+ media query are on my github page: https://github.com/jeffclayton/css_hack_testing - most of these I have sent to browserhacks.com for inclusion.
2017 UPDATE: To see it working, I created a live test page here for this and many others I worked on http://browserstrangeness.bitbucket.io/css_hacks.html and MIRROR: http://browserstrangeness.github.io/css_hacks.html
Please be aware it is min-width:0\0 (zero-backslash-zero) when you copy the code to your own site. Not to be confused with min-width:0 (just a single zero) which does not work to differentiate IE9 from other browsers.
There is another way!
:root #div { background: #fff \0/IE9; } /* IE9 */
Use the :root psuedo selector. This works because the #media all and (min-width:0) part as been removed in favor of this method in IE9.
Be aware though, that this is not a safe method as it doesn't work on all selectors. The best thing to use is conditional comments, it is the safest, easiest and best way to target different versions of Internet Explorer except IE10 which has dropped the support for conditional comments.
In my IE9 EMULATOR none of the solutions listed worked. The only hack that properly enabled us to resize, for example, a checkbox in IE9 was:
/* IE9 */
:root input#my-checkbox {
width:20px !important \ ;
height:20px !important \ ;
box-sizing:content-box !important \ ;
}
I don't know if this also affects IE8 or IE10 etc but we have conditionals handing those separately anyway.
Hopefully this helps someone.
Related
I had some issues with the printing the background colors.
print-color-adjust made the background color issue solved in chrome.
body{
-webkit-print-color-adjust: exact;
}
What are the alternate CSS in firefox and IE for this.
Feb 2023 Update: As of mid-2022 onwards, we can simply use print-color-adjust: economy|exact on the element, without the need to place inside a print media query.
color-adjust on it's own will become depreciated. (Thank you to misterManSam for the depreciation warning.)
Previous answer (originally from 2016):
As mentioned -webkit-print-color-adjust: exact is specific to WebKit browsers, including Google's Chrome and Apple's Safari; therefore the code should work adequately in those aforementioned browsers with perhaps slightly varied results (depending on your site/app styling).
There have been proposals to standardize this snippet to work universally for not just browsers but for different devices too. The code is simplified to: color-adjust. Similarly to the webkit-print-color-adjust property, the possible values are the same for the proposed property economy | exact.
If you want to use the property for printing purposes, simply use within a selector inside a #media print query.
For example:
#media print {
body { color-adjust: exact; }
}
I cannot guarantee the widespread adoption on browsers for the drafted property, however it is currently working on the latest version of FireFox (at the time of writing, version 50.0).
[Source]
There is the alternate CSS to print background colors for Chrome And Firefox.
td {
-webkit-print-color-adjust: exact;//:For Chrome
color-adjust: exact;//:For Firefox
}
This is beginning to work in Firefox (at least version 48.0.2) with the "color-adjust" property.
td {
background: #000 !important;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust#browser_compatibility
Firefox accepts print-color-adjust and color-adjust;
Safari accepts print-color-adjust and -webkit-print-color-adjust (edit: https://caniuse.com/?search=print-color-adjust says it only supports -webkit- version; if anyone actually using Safari can settle this, I'll edit);
Chrome and Edge accept -webkit-print-color-adjust.
I am working on a web design that uses Bootstrap and so I'm customizing the Bootstrap framework.
I have designed an element that because of lack of support for transitions in IE9, lack of support for some features like opacity and some others in IE8 and lack of support for box-sizing, correct position:absolute positioning and other problem, I need a way to differentiate between IE versions right from CSS style sheets, because I'm customizing the Bootstrap framework, I prefer a single complete .css framework file so, here is the question:
How do I differentiate between IE versions 6 to 10 using IE CSS Hacks on a single CSS role?
I hI was dealing with IE and needed to target every particular version separately and after some testing came up with this css:
body {
background-color:#0099CC; /* For Other standard browsers */
background-color: #FFFF00\9; /* For IE9 (Note: There is "NO" space before \9) */
background-color: #00E300 \9; /* For IE8 (Note: There is "ONE" space before \9) */
*background-color: #FF9900; /* For IE7 */
_background-color: #FF0000; /* For IE6 */
}
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
body{
background-color:#FF99CC; /* For IE10 */
}
}
These codes make IE 6 to 10 show different colors for body background.
I used IE 10.0.9200.16384's "Browser Modes" for testing the IE 7 to 10 and "IETester" program for IE 6 testing and they worked like a charm.
Shared my experience here for your use and if you tested them and had successful or unsuccessful results please submit your experience here to share with others.
Thanks.
I just ran into what seems like absurd behavior to me. If IE8 doesn't understand part of a rule it ignores the entire thing:
input[type=radio]:checked,
input.checked {
/* Some CSS */
}
I already have IE8 specific JS adding the .checked class, but because it doesn't understand :checked, it ignores the entire thing, so I'm forced to now have several rules:
input[type=radio]:checked{
/* Some CSS */
}
input.checked {
/* The exact same CSS */
}
So my question -- does anyone know of a way to get IE8 and below to ignore the :checked instead of throwing out the entire rule?
Very basic example: http://jsfiddle.net/8UT56/
You can use a library like http://selectivizr.com/ to give IE newer selectors.
The title sums it up. I'll get this out of the way and say I am aware that css hacks are dirty ugly horrible things. Sometimes dirty problems call for dirty solutions though :)
So does anyone know of a css selector hack that works for recent safari versions but is not a general webkit hack ? My site behaves properly in chrome but has a bug in safari. So if anyone knows how i can select an element to only have a certain style in safari let me know!
What I'd do, is sniff the user agent of the browser with javascript, and add a class to the <body> element, based on that. That way you don't have to rely on any kind of hack, you just write your selectors based on the class:
.safari .misbehaving-div {
}
I believe there is already a JS framework that does exactly this, but I don't remember the name.
Ended up using this:
http://rafael.adm.br/css_browser_selector/
This works perfectly
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass{
background: red;
}
/* Safari only override */
::i-block-chrome,.myClass{
background: green;
}
}
Firefox 3.5 now supports the nth-* pseudoclass, which was what I was using to target my css for Safari and Chrome. Now Firefox reads those too, causing minor layout issues. Does anyone know a way to specifically target FF 3.5+?
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ {
height:19px
}
How about this, I tested it in Safari 4 and the height is 19px, in Firefox 3.5 the height displays as 39px.
<style>
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ { height:19px }
BODY:nth-of-type(1) #topsearch input[type=submit], x:-moz-any-link, x:default { height: 39px; }
</style>
CSS Browser selector lets you write CSS that targets specific browsers, without worrying about hacks. I cannot recommend it highly enough.
On a "religious" note, we shouldn't be using CSS to target any browser. Unfortunately due to IE being waaaay behind on supporting CSS features (and all the bugs) hacks have been applied to target CSS for a given browser.
The Conditional Comments that IE uses... although ugly... do provide a handy mechanism for targeting a browser (and version)... I almost wish other browsers supported this.
I've seen a few sites do this... which is an interesting approach to handling targeting of various browsers.
<head>
<style>
body.safari form input{
/*special styles for Safari*/
}
body.firefox form input{
/*special styles for Firefox*/
}
body.firefox.v3-5 form input{
/*special styles for Firefox 3.5*/
}
</style>
</head>
<body>
<script>
//run code here, that sets the class and or id attribute on the body tag...
</script>
In the long run, they are all hacks... it just depends what kind of hacks you're willing to live with ;-)
Incidentally the "BODY:nth-of-type(1) ..." syntax breaks YUI compressor's ability to minify CSS. Instead I use "body:first-of-type ...".
My approach using a PHP class to detect os, browser and browser version. You can target any version of almost any browser on any operating system.
using http://rafael.adm.br/css_browser_selector/
just substitute this part:
is('firefox/2')?g+'
ff2':is('firefox/3')?g+' ff3'
for this part:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3')?g+' ff3'
that should do the trick
PS: if you want to also catch other 3.x versions you might want to add:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3.6')?g+'
ff3_5':is('firefox/3.8')?g+'
ff3_5':is('firefox/3')?g+' ff3'
This works:
#media screen and (-webkit-min-device-pixel-ratio:0){
#topsearch input[type=submit] { height:19px; }
}}
That targets newer WebKit browsers, and not Gecko or Trident.
A lot has changed in the last few years. For a Firefox 3.5+ hack, here is one I created for that purpose:
/* Firefox 3.5 and newer */
_:-moz-handler-blocked, :root .selector { property:value; }
To test it you can see these live along with many others for different versions of browser at my live CSS hacks test site here: http://browserstrangeness.bitbucket.org/css_hacks.html#firefox
Enjoy!