cross browsers css for curve,shadow,gradient
is such css library that i can use rather than have to manually use special tag for each browsers like below ?
-moz-linear-gradient
-webkit-gradient
-ms-filter: "progid:DXImageTransform.Micro开发者_C百科soft.gradient
I personally don't know of any, but you could set up your CSS files to be parsed with PHP, and then write a function that outputs everything you need. Example:
<?php
function makeBorderRadius($radius) {
echo "-moz-border-radius: " . $radius . "\n";
echo "-webkit-border-radius: " . $radius . "\n";
echo "border-radius: " . $radius . "\n";
}
?>
#mydiv {
width: 50%;
background: #000;
<?php makeBorderRadius(5); ?>
}
Rediscovering my other answer three years later, I can definitively say there is a much better solution. While the days of prefixed border-radius
styles are essentially over, we can promote good code reuse for similar situations.
SASS is an extended CSS syntax that adds a huge number of convenient features, including variables, functions, and mixins. It does require a separate compilation step to generate CSS, but the advantages of having a more powerful development language let you have much more maintainable code. Using a mixin, the border-radius example from before looks like this:
@mixin border-radius($width) {
-moz-border-radius: $width;
-webkit-border-radius: $width;
border-radius: $width;
}
.mydiv {
@include border-radius(5px);
}
In reality, you shouldn't have to maintain your own CSS-compatibility mixins. That's why we have other frameworks like Compass - the framework developers keep track of what browsers use prefixes and managing compatibility, while you can focus on getting your website done. They even have solid linear gradient support, so you could write:
.mydiv {
@include background-image(linear-gradient(left top, white, #ddd));
background-image: linear-gradient(to bottom right, white, #ddd);
}
The best part of this solution is that you don't need to mess with PHP or Apache configuration - just run a few simple commands or use a tool to compile the CSS, then include them like any other stylesheet.
精彩评论