Related
I tried using transition on Firefox 15 and it didn't work even though it worked on other versions of Firefox and other browsers like Chrome and Safari.
When I view the properties using Firefox's inspector the transition is struck through and gives an error of "Invalid property value". MDN and caniuse say it's supported on Firefox 4 and above!
#mydiv {
transition: width 1s; /* Did I do this wrong? */
background: #f00;
width: 100px; height: 100px;
}
#mydiv:hover { width: 200px }
How come sometimes properties like transition and animation work in some browsers and are invalid in others?
Disclaimer: This is the canonical duplicate for all questions solvable completely by adding vendor prefixes. Stack Overflow questions should not be this broad unless discussed on meta and a canonical answer created thereafter like this one was.
Though it is not always the case, one of the most common reasons why a property like transition or animation works on some browsers and not others is because of vendor prefixes.
What are vendor prefixes?
At the time version 4 of Firefox was introduced, the CSS transition module specification was a Working Draft. Before a spec is finalized (in practice, this is when it reaches Candidate Recommendation), browser vendors add vendor prefixes to properties, values, and #-rules to prevent compatibility problems in case the spec changes.
Vendor prefixes are exactly what their name describes - a vendor-specific (vendor meaning a company who develops a browser) prefix of a property or value. They are often implemented in a specific way for each browser because the property or value is still in one of the many experimental phases before the Candidate Recommendation stage, which is the stage where they are considered implementation-ready.
The most common ones are -moz- (Mozilla Firefox), -webkit- (Chrome, Safari, etc.), and -ms- (Microsoft Internet Explorer), but there are more.
When do I need to use them?
That depends completely on what browsers you're looking to serve, what properties and values you're using, and at what point in time you are developing your website. There are sites that try to keep a current list but they are not always accurate or kept up-to-date.
Following are some of the most commonly prefixed properties and values. If your project does not supporting the browsers mentioned in the comment to the right of the property, then there is no need to include it in your CSS.
Transitions
An unprefixed property sometimes has prefixed equivalents, such as -webkit-transition.
In order to get full possible browser support, the following is necessary:
.foo {
-webkit-transition: <transition shorthand value>; /* Safari 3.1-6, Chrome 1-25, Old Android browser, Old Mobile Safari, Blackberry browser */
-moz-transition: <transition shorthand value>; /* Firefox 4-15 */
-o-transition: <transition shorthand value>; /* Old opera */
transition: <transition shorthand value>; /* Modern browsers */
}
Note that an -ms- prefix exists for transition, however it was only implemented by pre-release versions of IE10 which are no longer functional, and it is therefore never needed. It is implemented unprefixed in IE10 RTM and newer.
Transforms
.foo {
-webkit-transform: <transform-list>; /* Chrome 21-35, Safari, iOS Safari, Opera 22, many mobile browsers */
-ms-transform: <transform-list>; /* IE9 */
transform: <transform-list>;
}
Animations
Animations need to have the property prefixed and the corresponding keyframes prefixed, like so:
.foo {
-webkit-animation: bar; /* Safari 4+ */
-moz-animation: bar; /* Fx 5+ */
-o-animation: bar; /* Opera 12+ */
animation: bar; /* IE 10+, Fx 16+ */
}
#-webkit-keyframes bar { /* Keyframes syntax */ }
#-moz-keyframes bar { /* Keyframes syntax */ }
#-o-keyframes bar { /* Keyframes syntax */ }
#keyframes bar { /* Keyframes syntax */ }
Flexbox
Values can also be prefixed, as in the case of flexbox. Note: For maximum browser compatibility, flexbox-specific properties like ordinal-group, flex-flow, flex-direction, order, box-orient, etc. need to be prefixed in some browsers in addition to the following:
.foo {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: <flex shorthand value>;
-moz-box-flex: <flex shorthand value>;
-webkit-flex: <flex shorthand value>;
-ms-flex: <flex shorthand value>;
flex: <flex shorthand value>;
}
Calc
.foo {
width: -webkit-calc(<mathematical expression>); /* Chrome 21, Safari 6, Blackberry browser */
width: -moz-calc(<mathematical expression>); /* Firefox <16 */
width: calc(<mathematical expression>); /* Modern browsers */
}
Gradients
See CSS Gradients on CSS-Tricks for more information.
.foo {
background-color: <color>; /* Fallback (could use .jpg/.png alternatively) */
background-image: url(bar.svg); /* SVG fallback for IE 9 (could be data URI, or could use filter) */
background-image: -webkit-gradient(linear, left top, right top, from(<color-stop>), to(<color-stop>)); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
background-image: -webkit-linear-gradient(left, <color-stop>, <color-stop>); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background-image: -moz-linear-gradient(left, <color-stop>, <color-stop>); /* Firefox 3.6 - 15 */
background-image: -o-linear-gradient(left, <color-stop>, <color-stop>); /* Opera 11.1 - 12 */
background-image: linear-gradient(to right, <color-stop>, <color-stop>); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
}
Note that left and to right represent the same direction, left-to-right, and therefore left and to left point opposite ways. See this answer for some background info.
Border-radius (Not needed in most cases)
.foo {
-webkit-border-radius: <length | percentage>; /* or iOS 3.2 */
-moz-border-radius: <length | percentage>; /* Firefox 3.6 and lower */
border-radius: <length | percentage>;
}
Box shadow (Not needed in most cases)
.foo {
-webkit-box-shadow: <box-shadow shorthand value>; /* iOS 4.3 and Safari 5.0 */
-moz-box-shadow: <box-shadow shorthand value>; /* Firefox 3.6 and lower */
box-shadow: <box-shadow shorthand value>;
}
How can they be implemented with JavaScript?
To access prefixed attributes and events in JavaScript, use the camelCase equivalent of the CSS prefix. This is true for event listeners like foo.addEventListener('webkitAnimationIteration', bar ) as well (foo being a DOM object, like document.getElementsById('foo')).
foo.style.webkitAnimation = '<animation shorthand value>';
foo.style.mozAnimation = '<animation shorthand value>';
foo.style.oAnimation = '<animation shorthand value>';
Prefixing tools
Online prefixers can be helpful but are not always reliable. Always make sure to test your project on the devices you wish to support to make sure that each has the appropriate prefix included.
CSS Pre-processor functions:
SASS & SCSS properties prefixer
LESS properties prefixer
JavaScript prefixer functions:
-prefix-free for CSS properties and values
Event prefixer
See also: Why do browsers create vendor prefixes for CSS properties?
I'm having issues getting a stylesheet to display correctly in Firefox. It looks fine in Chrome and IE, however none of the styles seem to be applied in Firefox. Any suggestions?
Here's the link: http://www.bearfootmgmt.com
I checked style.css and there's a rather malformed rule here:
$toppart {
/* For WebKit (Safari, Google Chrome etc) */
/* For Mozilla/Gecko (Firefox etc) */
background: #fff) -moz-linear-gradient(top;
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#DAE4EE, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progidDXImageTransform.Microsoft.gradient(startColorstr#DAE4EE, endColorstr#FFFFFFFF)";
}
I ran your site through the CSS validator and it also found this misspelled selector:
#maincontent a:hovvr {
color:#ce0101;
text-decoration:underline;
}
We have the following themeable styles to have a gradient for the background of the webpart body:
.ms-wpContentDivSpace{
/* For Non-CSS3 Browsers */
background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent;
/* For Firefox 3.6+ */
background: -moz-linear-gradient(top,
/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB,
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
/* For WebKit (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom,
from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB),
to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
/* For Internet Explorer */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB,
endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9);
-ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=/*[ReplaceColor(themeColor:"Light2-Lightest")]*/ #FEFEFB,
endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9)';
}
All of it works fine except for the -ms-filter style for IE8. I've tried every combination of escaping the quotes and slashes and single vs double quotes, but the only way I can get it to work is to remove the ReplaceColor instructions:
.ms-wpContentDivSpace{
/* For Non-CSS3 Browsers */
background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent;
/* For Firefox 3.6+ */
background: -moz-linear-gradient(top,
/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB,
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
/* For WebKit (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom,
from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB),
to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
/* For Internet Explorer */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB,
endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=#FEFEFB,
endColorstr=#E9E9E9)";
}
Is it possible to have -ms-filter support themeable styles?
UPDATE:
It actually works as expected when a theme is applied. The problem is that when no theme is selected, the gradient is blue on top and dark blue on bottom. So it seems to be working up to the first comment slash because the rendered result is the same as if the style did not specify colors:
-ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0)';
You could get your theme to process the images for you - and that way you wouldn't need CSS for 3 different browsers. The themes in 2010 can recolour images (or areas in images)
e.g.
/* [RecolorImage(themeColor:"Dark2-Lighter",method:"Filling",includeRectangle:{x:0,y:467,width:1,height:11})] */ background:url("/_layouts/images/bgximg.png") repeat-x -0px -467px;
Which is pretty neat. When you apply your theme, the image (bgximg.png) will be processed and colours replaced and so on.
If you look through CoreV4.css there are examples. Or this is an okay description. Perhaps Tinting would be adequate?
Failing that, I'd try putting my Theme directives before where I use my colours, rather than in:
/* [ReplaceColor(themeColor:"Dark2",themeShade:"0.8")] */ background-color:#21374c;
Here is how we fixed it. We have two style sheets that were identical, but placed in different directories:
14\TEMPLATE\LAYOUTS\1033\STYLES\MyProject\MyStyles.css
14\TEMPLATE\LAYOUTS\1033\STYLES\Themable\MyProject\MyStyles.css
Our custom master page points to the first style sheet. That is the style sheet that is used when the Theme is Default (no theme). But when SharePoint goes to compile a selected theme, it uses the style sheet in the second directory.
We left the second style sheet alone because it was working when it is compiled into a theme. We then removed the theme directive comments from the filter styles in the first style sheet:
.ms-wpContentDivSpace{
/* For Non-CSS3 Browsers */
background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent;
/* For Firefox 3.6+ */
background: -moz-linear-gradient(top,
/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB,
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
/* For WebKit (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom,
from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB),
to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
/* For Internet Explorer */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=#FEFEFB,
endColorstr=#E9E9E9);
-ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=#FEFEFB,
endColorstr=#E9E9E9)';
}
We tested it out and the gradient is now working, with or without a Theme, in IE7 & 8, FF and Chrome.
Have you considered using CSS3Pie?
This is a hack for IE, which allows it to recognise certain CSS3 properties using the standard syntax. It includes gradient backgrounds.
Using CSS3Pie means you can forget about ever having to use those horrible filer and -ms-filter properties, at least for gradients.
It's also great for supporting border-radius, which is probably its most popular feature.
Hope that helps.
I am using this CSS for background opacity of a <div>:
background: rgba(255, 255, 255, 0.3);
It’s working fine in Firefox, but not in IE 8. How do I make it work?
To simulate RGBA and HSLA background in IE, you can use a gradient filter, with the same start and end color (alpha channel is the first pair in the value of HEX)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
Create a png which is larger than 1x1 pixel (thanks thirtydot), and which matches the transparency of your background.
EDIT : to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.
I believe this is the best because on this page has a tool to help you generate alpha-transparent background:
"Cross browser alpha transparent background CSS (rgba)" (*now linked to archive.org)
#div {
background:rgb(255,0,0);
background: transparent\9;
background:rgba(255,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
zoom: 1;
}
the transparent png image will not work in IE 6-, alternatives are:
with CSS:
.transparent {
/* works for IE 5+. */
filter:alpha(opacity=30);
/* works for IE 8. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/* works for old school versions of the Mozilla browsers like Netscape Navigator. */
-moz-opacity:0.3;
/* This is for old versions of Safari (1.x) with KHTML rendering engine */
-khtml-opacity: 0.3;
/* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */
opacity: 0.3;
}
or just do it with jQuery:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});
Though late, I had to use that today and found a very useful php script here that will allow you to dynamically create a png file, much like the way rgba works.
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);
The script can be downloaded here: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip
I know it may not be the perfect solution for everybody, but it's worth considering in some cases, since it saves a lot of time and works flawlessly. Hope that helps somebody!
There are mostly all browser support RGBa code in CSS but only IE8 and below level does not support RGBa css code. For This here is solution. For The solution you must follow this code and it’s better to go with it’s sequence otherwise you will not get perfect output as you wish. This code is used by me and it’s mostly perfect. make comment if it’s perfect.
.class
{
/* Web browsers that does not support RGBa */
background: rgb(0, 0, 0);
/* IE9/FF/chrome/safari supported */
background: rgba(0, 0, 0, 0.6);
/* IE 8 suppoerted */
/* Here some time problem for Hover than you can use background color/image */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
/* Below IE7 supported */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
}
You use css to change the opacity. To cope with IE you'd need something like:
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}
But the only problem with this is that it means anything inside the container will also be 0.3 opacity. Thus you'll have to change your HTML to have another container, not inside the transparent one, that holds your content.
Otherwise the png technique, would work. Except you'd need a fix for IE6, which in itself could cause problems.
I'm late to the party, but for anyone else who finds this - this article is very useful:
http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
It uses the gradient filter to display solid but transparent colour.
To use rgba background in IE there is a fallback.
We have to use filter property. that uses ARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;
this is fallback for rgba(255, 255, 255, 0.2)
Change #33ffffff according to yours.
How to calculate ARGB for RGBA
this worked for me to solve the problem in IE8:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
Cheers
This solution really works, try it. Tested in IE8
.dash-overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
}
It is very simply you have to give first you have to give backgound as rgb because Internet Explorer 8 will support rgb instead rgba and then u have to give opacity like filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);
This a transparency solution for most browsers including IE x
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
The best solution I found so far is the one proposed by David J Marland in his blog, to support opacity in old browsers (IE 6+):
.alpha30{
background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */
background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
zoom: 1; /* needed for IE 6-8 */
}
/*
* CSS3 selector (not supported by IE 6 to IE 8),
* to avoid IE more recent versions to apply opacity twice
* (once with rgba and once with filter)
*/
.alpha30:nth-child(n) {
filter: none;
}
After searching a lot, I found the following solution which is working in my cases:
.opacity_30{
background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */
background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
zoom: 1; /* Hack needed for IE 6-8 */
}
/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
filter: none;
}
*Important: To calculate ARGB(for IEs) from RGBA, we can use online tools:
https://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
I have an image that is 100x100 in pixels. I want to show it twice the size, so 200x200 and I want to do it by CSS and (explicitly) not by the server.
Since a few years, images get anti-aliased by all browsers instead of doing a by-pixel scale.
Mozilla allows to specify the algorithm: image-rendering: -moz-crisp-edges;
So does IE: -ms-interpolation-mode: nearest-neighbor;
Any known webkit alternative?
WebKit now supports the CSS directive:
image-rendering:-webkit-optimize-contrast;
You can see it working in action using Chrome and the last image on this page:
http://phrogz.net/tmp/canvas_image_zoom.html
The rules used on that page are:
.pixelated {
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Safari */
image-rendering:optimize-contrast; /* CSS3 Proposed */
image-rendering:crisp-edges; /* CSS4 Proposed */
image-rendering:pixelated; /* CSS4 Proposed */
-ms-interpolation-mode:nearest-neighbor; /* IE8+ */
}
Unfortunately, it looks like this feature is absent in WebKit. See this recent bug report:
https://bugs.webkit.org/show_bug.cgi?id=40881
In addition to #Phrogz very useful answer and after reading this: https://developer.mozilla.org/en-US/docs/CSS/image-rendering
It seems like the best CSS would be this:
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering:crisp-edges; /* CSS3 Proposed */
-ms-interpolation-mode:bicubic; /* IE8+ */