HTML and CSS Reference
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;
A fallback solid color is provided for user agents that don't yet support the linear-gradient
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 -
▪ 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.
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/
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.