HTML and CSS Reference
In-Depth Information
background-image: -webkit-linear-gradient(top, #fff, #fcc);
background-image: -o-linear-gradient(top, #fff, #fcc);
background-image: -ms-linear-gradient(top, #fff, #fcc);
background-image: linear-gradient(top, #fff, #fcc);
/* now a shadow */
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}
</style>
A fallback solid color is provided for user agents that don't yet support the
linear-gradient
property.
Speaking of which:
▪ Safari 5 does not support the new linear-gradient syntax, but Webkit Nightly does. Both
support the
border-radius
and
box-shadow
properties if using the vendor-specific -
webkit-box-shadow.
▪ Chrome 12 and up supports all of the properties.
▪ Firefox 5 and up also supports all of the properties.
▪ IE9 doesn't support the
linear-gradient
property, but does support the
border-radius
and
box-shadow
properties.
▪ IE10 supports all of the properties.
▪ Opera 11 and up supports all of the properties.
There isn't anything unique about the
video
element that requires any special CSS handling.
The only reason the CSS style setting is so long is because of the necessity of providing the
vendor-specific settings for the linear gradient, since this CSS style property hasn't been form-
alized in the W3C yet.
NOTE
The vendor-specific prefixes are -moz- for Mozilla/Firefox; -o- for Opera; -ms- for Microsoft/Internet
Explorer; and -webkit- for Chrome and Safari. More on the gradients at
http://dev.w3.org/csswg/
css3-images
/
.
The non-vendor-specific setting given in the last line matches that of the current specification,
and is added for future proofing of the stylesheet.
