I have a page which uses the AlphaImageLoader CSS filter for IE8 like so:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale');
In my test IE8 (Windows XP, factory settings), everything is fine. The client however received a screenshot from someone claiming to be also using IE8 which looks like the browser completely ignores the filter directive. All other styles in the IE-specific stylesheet loaded via conditional comments appear to be working. Is there any setting in IE or in Windows which would be causing this?
Thanks, Simon
IE8 replaced filter with -ms-filter.
If you want to support all versions of IE, you need to provide both of these styles.
The syntax for -ms-filter is slightly different to filter as well:
All filters are now specified with their full progid string (as per your example, but some filters could previously be specified with a shorter syntax).
The value for -ms-filter must be enclosed in quotes. This is to prevent it from being invalid CSS syntax (since it contains a colon after progid it is invalid CSS; in bad cases has been known to cause parsing errors in other browsers that stop them from reading the rest of the CSS file properly).
So in your example, you need the following styles:
.myelement {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale')";
}
Note that IE9 has dropped support for both filter and -ms-filter, in favour of the equivalient standard CSS3 properties.
Hope that helps.
This simple test case: http://fiddle.jshell.net/TyMxr/show/light/
<div></div>
div {
border: 2px solid red;
width: 256px;
height: 256px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=128&d=identicon&r=PG', sizingMethod='scale');
}
works in IE6, IE7, IE8, IE9, and Quirks Mode in any of those versions.
I can't think of any reason this wouldn't work in IE.
Do you have a test page to look at? I think something else must be going on.
Related
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".
It's very bad habit to apply css for specific browser. But there are solutions also:
Only Moz:
#-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
Hope this answers your question.
As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm.
Using this class as a base, you can target browsers
function detectBrowser() {
if (navigator.userAgent.includes("Chrome")) {
return "chrome"
}
if (navigator.userAgent.includes("Firefox")) {
return "firefox"
}
if (navigator.userAgent.includes("Safari")) {
return "safari"
}
}
document.body.className = detectBrowser()
p {
display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
I have used this hack to make css changes needed for firefox. It has worked, but when I validated the code I have the below error. Can I use the code below, or is there a better way?
751 Sorry, the at-rule #-moz-document is not implemented.
798 Parse Error }
/*********************************
FIRE FOX HACK TO FIX ERRORS
***********************************/
#-moz-document url-prefix() {
#rectangle {
width: 1030px;
right: -100px;
}
}
Any CSS at-rule that starts with #-moz- is a Gecko-engine-specific rule i.e. it is a Mozilla-specific extension, not a standard rule.
The url-prefix rule here applies the contained style rules to any page whose URL starts with it. When used with no URL argument like #-moz-document url-prefix() it applies to ALL pages. That's effectively a CSS hack used to only target Gecko (Mozilla Firefox). All other browsers will ignore the styles.
Hence, you can perfectly use #-moz- styles to target only the Firefox browser.
See here for a list of other Mozilla-specific extensions.
See here for valid #moz document rules.
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 want to use gradient for background in Mozilla Firefox Like
background: -moz-linear-gradient(#C6991D, #F7D065) repeat scroll 0 0 transparent;
And for other browsers i m using background-color Like
background-color: #DFB542;
I need to put condition only for firefox. I know the condition for IE
<!--[if IE 6]>
instructions for IE 6 here
<![endif]-->
But not for firefox. Plz help me.
Thanks!
this does not need conditionals
background-color: #DFB542;
background: -moz-linear-gradient(#C6991D, #F7D065) repeat scroll 0 0 transparent;
since -moz- is a vendor-specific prefix by itself, only firefox reads it. it' ignored by other browsers.
placing it in this order in your CSS, firefox will read the first declaration and then the second will override or cascade over the first.
on other browsers, they read the first declaration but ignore the seconds since they don't know how to parse it. they skip over the second declaration.
Firefox doesn't understand conditional comments, only IE does. So
Firefox simply skips on <![if !IE 7]and <![endif] as unrecognized
tags but it render the rest. It means that you cannot use content-
revealing comments here, only content-hiding ones.
See this post
You can do it with javascript
if(navigator.appCodeName=='Mozilla' || navigator.appCodeName=='Netscape'){
document.write('<style type="text/css">');
//document.write('your css code');
document.wirite('</style>');
}
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!