Is there a way to make cross-browser CSS3 code DRY?
There are many tools for this:
- http://lesscss.org/
- http://leafo.net/lessphp/
- http://sass-lang.com/
- http://compass-style.org/
These are generally referred to as CSS Preprocessors.
You would end up writing something like this once, like a function definition (usually called a "mixin"):
.linear-gradient(@start, @end) {
background-color: @end;
background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, @start, @end); /* Safari 5.1+, Chrome 10+ */
background-image: -moz-linear-gradient(top, @start, @end); /* FF3.6 */
background-image: -o-linear-gradient(top, @start, @end); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@start', endColorstr='@end'); /* IE */
}
Then to apply:
.my-class {
.linear-gradient(#54a0ce, #3584ba);
}
.my-other-class {
.linear-gradient(#ccc, #aaa);
}
Highly recommend.
CSS3 cross browser linear gradient
background-image: -ms-linear-gradient(right, #0c93C0, #FFF);
background-image: -o-linear-gradient(right, #0c93C0, #FFF);
All experimental CSS properties are getting a prefix:
-webkit-
for Webkit browsers (chrome, Safari)-moz-
for FireFox-o-
for Opera-ms-
for Internet Explorer- no prefix for an implementation which is in full accordance with the specification.
Use top right
instead of right
, if you want a different angle. Use left
or right
if you want a horizontal gradient.
See also:
- MDN:
linear-gradient
Internet Explorer
For <IE10, you will have to use:
/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";
filter
works for IE6, IE7 (and IE8), while IE8 recommends the -ms-filter
(the value has to be quoted) instead of filter
.
A more detailled documentation for Microsoft.Gradient
can be found at: http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx
-ms-filter
syntax
Since you're a fan of IE, I will explain the -ms-filter
syntax:
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
startColorStr='#0c93c0', /*Start color*/
endColorStr='#FFFFFF', /*End color*/
GradientType=0 /*0=Vertical, 1=Horizontal gradient*/
);
Instead of using a RGB HEX color, you can also use a ARGB color format. A means alpha, FF means opaque, while 00
means transparent. The GradientType
part is optional, the whole expression is case-insensitive.
SVG CSS Transform animation, cross-browser issues
thanks for your question.
This is a really interesting issue with Firefox.
I tested both cases and indeed webkit has no issues with your code, while firefox is misplacing the elements.
I think this might be due to transform-origin differences across browsers.
Either way I was able to help your hamburger become a cross in firefox, by addind a -moz-transition property with a little different values for the transform.
Try updating your code to this, and tell me if it solves your issue :)
#hamburger.active {
#top {
transform: translateY(7px) rotate(45deg);
-moz-transform: translate(-5px,3px) rotate(45deg);
}
#middle {
transform: rotate(135deg);
}
#bottom {
transform: translateY(-7px) rotate(45deg);
-moz-transform: translate(5px,-7px) rotate(45deg);
}
}
Also remember to write negative values without a space. So like this "-7px" and not like this "- 7px"
webkit- animation browser compatibility
transition: opacity 0.5s linear; /* vendorless fallback */
-o-transition: opacity 0.5s linear; /* opera */
-ms-transition: opacity 0.5s linear; /* IE 10 */
-moz-transition: opacity 0.5s linear; /* Firefox */
-webkit-transition: opacity 0.5s linear; /*safari and chrome */
You want to have a read up on vendor prefixes. Here's an example for a simple opacity transition with comments.
Have a look here for up to date browser support - http://caniuse.com/
Related Topics
JavaScript How to Check User Agent for Mobile/Tablet
Add Custom Buttons on Slick Carousel
Build JavaScript Object to Use with Jquery .Css() (What About Duplicate Keys)
How to Add a CSS Class to a Raphael Object
How to Remove an Existing Class Name and Add a New One with Jquery and Cookies
Internet Explorer Adds Height- and Width-Attributes to a Newly Appended Image Automatically
Attempt to Add a Rule to a CSS Stylesheet Gives "The Operation Is Insecure" in Firefox
Is There Js Plugin Convert the Matrix Parameter to CSS3 Transform Property
Image Crossfade with JavaScript and CSS3 Transitions
Align Select-Options Text to Right
CSS in My JavaScript Widget Colliding with Target Page CSS
Overflow:Auto Not Working in Touch Devices(Ios)
Single Navigation Bar Across Website
Find Unused CSS Rule and Js Script in a Web Project
Jquery Scroll Show Hidden Content
How to Add an Icon to the Options in React-Select