Pro CSS3 Animation

(Tuis.) #1

chapter 1


CSS3 Fundamentals


For nearly two decades the Cascading Style Sheets (CSS) standard has been used to control the presentation of
web pages. HTML defines what something is: a heading, a paragraph, an address, an image, etc. CSS describes
how that element is presented to the user, including such qualities as its color, border, and dimensions. CSS
includes presentational controls that few web designers even consider, such as the way text-to-speech services
pronounce web page content.
All of the original presentational rules of CSS were designed for static content; that is, HTML elements that
did not change over time. Until recently, if you wanted an image to fade in on a web page, there were only a few
web technologies that you could use, the most popular of which were JavaScript and Flash. These technologies
are not complete solutions, however; they have several serious disadvantages, as I’ll discuss at the end of the
chapter.
Now, we have the CSS3 Transforms, Transitions, and Animation Modules. These are extensions of CSS
syntax that are supported in all modern browsers, overlapping, and in some cases, replacing the traditional roles
of JavaScript and Flash. While CSS3 is not without its limitations, the technology is the way forward for a lot of
dynamic web content.
To understand how we got here, you need to know where we’ve been. This introductory chapter will provide
an overview of the CSS development process and where web development stands now, looking into the future.


Development of CSS


The independent evolution of web technologies has had something of a spotty history: browser vendors have
sometimes propelled technology forward, while other technological implementations have complicated web
development by adopting incompatible approaches.
The World Wide Web Consortium (W3C) was formed in an effort to try to synthesize and standardize web
technologies into a series of specifications that were broadly supported by the web development industry. The
W3C might be called the United Nations of web development: as an independent standards body, it can evaluate
different proposals; create forums for discussions between industry, academia, developers, and other interests;
negotiate and settle disagreements; and hammer out final specifications that everyone can agree to follow.
The CSS standard was developed by the CSS Working Group (CSSWG), a subgroup within the W3C. Over
time, the CSSWG extended CSS to provide greater control over more aspects of web page content. As CSS 2.
approached its final, finished status, further development of the specification was broken into multiple modules.
Many of these modules started as “Level-3” proposals, leading developers to use the catch-all term CSS3 for
anything that followed CSS2.1. Technically, the web technologies that I focus on in this book—Animations,
Transforms, and Transitions—are completely new Level-1 specifications, as they have no precedent in CSS1 or
CSS2. Outside of very formal discussions, the web development industry refers to them collectively as CSS3, and I
will continue to do so in this book.
At the same time, browser developers continued to innovate. Many of the CSS properties I’ll discuss in this
book were first proposed by Apple, Google, and Mozilla, not the W3C or the CSS Working Group. This led to a

Free download pdf