Foundation HTML5 with CSS3

(Steven Felgate) #1
Getting Started

It took some time for the major browsers to catch up and fully support the early versions of CSS as they
were intended, but today’s browsers (a few lingering bugs notwithstanding) support CSS levels 1 and 2
well enough that presentational markup should be a thing of the past. In the chapters to come you’ll learn
to write meaningful, structural markup to support your content according to its inherent meaning and
purpose. Along the way, you’ll see many examples of how you can visually style your content with CSS,
avoiding the trap of presentational markup.

The Next Level of CSS

Like HTML, CSS is an open standard developed and maintained by the W3C (w3.org/Style/CSS/). And
like HTML, CSS has changed and adapted over the years, adding new features at each step along the
way. CSS level 1 debuted in 1996, with CSS level 2 expanding on it in 1998. The browser uptake was slow
for these first iterations of the CSS spec. In fact, as of this writing, there still isn’t a browser in the land that
has fully implemented every last part of CSS 2.1. But that hasn’t slowed down development of CSS level


  1. No, what has slowed down CSS3 is the fact that CSS3 is vastly more complicated than CSS1 or CSS2.


The first two versions of CSS were focused on relatively basic aspects of presentation: font sizes, spacing,
drawing boxes, defining colors, positioning elements on the page, and so on. Once those fundamentals
were pretty well hammered out, the next generation of CSS was going to reach toward much broader
horizons. CSS3 promises multi-column layouts, color gradients, embedded typefaces, rounded corners,
border images, shadows, transitions, animations, and much more. It’s been a long process, and it’s still
ongoing.

Given the breadth and depth of CSS3, as well as the programmatic complexity of producing some of the
intended effects, the specification was split apart into a number of modules, each focusing on one
particular area. Modules like Fonts, Animations, Backgrounds and Borders, Color, Grid Layout, Speech—
over 40 modules in all—can each be drafted and rolled out independently. As such, there isn’t really single
specification called “CSS level 3,” and there may never be a time when the whole thing could be
considered “completed.” But its modular nature means a number of CSS3 features are already stable and
well supported in modern web browsers, and you’ll learn how to use some of them later in this book.

Progressive Enhancement

HTML5 and CSS3 are still taking shape as we’re writing this book and they’ll continue to evolve for the
foreseeable future. Although the W3C is nearing completion of the HTML5 specification, this iteration will
only be a snapshot of the ever-advancing, living HTML standard. The modular nature of CSS3 means
some parts of it are already complete, other parts still need more work, and some modules have barely
started. Furthermore, there’s already some very early planning for future iterations of these languages,
vaguely referred to as HTML6 and CSS4 for the time being.

You don’t have to wait for all of HTML5 and CSS3 to be “finished” before you can use them. When you can
use these emerging standards isn’t really a question of how complete the standards are; it’s more a
question of browser support for the newly introduced features. Web browsers are evolving rapidly
Free download pdf