HTML and CSS Reference
In-Depth Information
5
Chapter
CSS3 for Mobile
One of the most exciting aspects of developing for mobile is the support for
CSS3 through browsers on the latest smartphones. Prior to CSS3, we relied
upon using JavaScript to provide eye-popping animations and transitions,
simply applying styles to DOM elements such as the last element within a parent
element or alternating table rows.
In this chapter, you will learn some of the new CSS3 features, such as
animations and transitions. You will learn how CSS3 can provide similar features
to the most basic of animation concepts, called keyframing.
You will learn how to import new font faces within your mobile web application,
which will provide a much broader set of typefaces for your audience. You will
also take a look at some of the key CSS3 features, such as text shadows,
selectors, gradients, and new border properties. In addition, you will briefly
touch upon CSS media queries that will help you apply styles based on screen
resolution and pixel density.
Finally, you will see the power of CSS precompilers in the form of Syntactically
Awesome Stylesheets (SASS), with which you will learn how to streamline your
CSS workflow and reduce time coding.
Vendor-Specific Properties
At the time of this writing, many CSS3 properties, such as
border-radius
and
opacity
, have been standardized. However, browser manufacturers can develop
their own implementations of new CSS properties. To avoid conflicts caused by
differences in syntax, new CSS properties that have not been standardized will
usually be preceded by a vendor prefix. For instance, prior to the
