HTML and CSS Reference
In-Depth Information
Finally, keep in mind that the W3C's spec will more than likely be much more limited than what the browser
actually supports. Apple, Mozilla, Google, and other vendors support a variety of features that may not make it into
the W3C's decision, but they're still fun to play with, especially in creating 3D and interesting parallax effects.
However, I remind you to understand your user base—whom are you developing for and deploying toward with your
campaigns? This ought to dictate what feature set you should and shouldn't use for your next campaign.
Vendor Prefixes
As was discussed in Chapter 3, in order to use the latest and greatest CSS3 features of the browser, vendor prefixes
are your passport. Animation prefixes are no different: there still need to be clear ways to call a browser's rendering
engine. Think of them as their own API to instruct the browser to animate—because that's what they are. Predictably,
developers and designers have a love-hate connection with vendor prefixes. On the one hand, they allow use of
up-to-date and emerging technologies; on the other hand, they come with the expense of long statements that will
ultimately break if browser manufacturers drop their own prefixes for the final CSS specification. The Web could
get really ugly if that happens! It can be challenging to understand if a vendor-prefixed property is part of the CSS
specification or will eventually become part of it, since some vendors don't even submit all their (browser-specific)
properties for W3C standardization. In some cases you'll find that sites use the
-webkit
prefixes alone, especially in
mobile, even though Opera, IE, and Firefox have mobile builds of their browser. With all that said, let's review some of
the vendor prefixes in Listing 5-3 and take a look at the prefixes for a radial gradient class in CSS.
Listing 5-3.
CSS3 Vendor-Prefix Example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#square {
width:500px;
height:500px;
}
.radial-gradient {
background: -webkit-radial-gradient(10% 10%, yellow, black);
background: -moz-radial-gradient(10% 10%, yellow, black);
background: -o-radial-gradient(10% 10%, yellow, black);
background: -ms-radial-gradient(10% 10%, yellow, black);
background: radial-gradient(10% 10%, yellow, black);
}
</style>
</head>
<body>
<div id='square' class='radial-gradient'></div>
</body>
</html>
Holy repetition! If you're a developer or programmer, having to do anything over and over again is a clear sign
that you can do it better. This example gives an idea of the operational load that designers and developers face
when creating cross-browser experiences using emerging features—and in this case emerging is a requirement for
penetration on devices like the iPhone and iPad. I usually laugh whenever I hear “operational scale” and “emerging”
used in the same sentence. Now you can too!
