The Modern Web

CSS3 and Beyond

As HTML5 is to HTML4.01, so CSS3 is to CSS2.1: an evolutionary iteration that standardizes some existing features that are implemented slightly differently across browsers, and introduces a whole new set of features to make CSS fit for purpose in a world where web browsers can be embedded anywhere.

The first CSS3 features to make it into browsers were largely presentational and based on hacks that developers had been using for years: using fonts from any source, rounded corners, and drop shadows on text and boxes. Next to land were a range of new selectors that made document traversal for styling much easier, and more dynamic effects such as two- and three-dimensional transitions and transitional animations (you can read more about these in The Book of CSS3, by this author, from this publisher).

But beyond the many glittery visual effects, the real revolution of CSS3 has come through media queries, a syntax that allows you to provide styles to browsers based on their dimensions and capabilities, the first step toward true multi-device styling. I cover media queries in Chapter 3, along with a range of other CSS properties that are useful for building responsive and adaptive websites.

The next big challenge for CSS to solve is the issue of layout—that is, to enable layouts that are truly sympathetic to the capabilities of the user agent viewing them. These include properties for dynamic user interfaces and CSS-controlled grid systems, which you’ll read more about in Chapter 4.

CSS3 is not a single spec as CSS2.1 was, where everything is described in the same document; it’s far too big and complex for that. Instead CSS3 is modular—a series of shorter, more specific specs that can be implemented by browsers in a modular way. As with HTML5, the idea of waiting until CSS3 is “ready” before using it is pretty foolish, as some modules will be ready and implemented long before others.

CSS modules are given level numbers to show how many iterations they’ve been through; some are already at level 4, and they could well be implemented before others that are at level 3. This doesn’t mean, however, that one day we’ll have a CSS4; there won’t be. CSS3 is a shorthand term for “everything more recent than CSS2.1,” and one day that distinction will be dropped and everything will be just CSS.

Vendor-Specific Prefixes

When browsers implement features in an experimental or prestandard way, they try to make them safe by using vendor-specific prefixes to avoid compatibility problems with standardized property names. Consider, for example, that a CSS Apes module proposes a new property called gorilla, and both Firefox and WebKit implement it experimentally but slightly differently. If both used the same property name, the effect would be different in each browser; instead, they avoid those potential conflicts by using a vendor prefix:

-moz-gorilla: foo;
-webkit-gorilla: foo;

In principle, the system is great, but in reality, things have gotten somewhat confused. Among other problems, some prefixed properties became so widely used by developers that other browser makers felt the need to implement their rivals’ vendor prefixes too, which is justifiable but kind of makes the whole thing nonsensical.

Browser makers are trying to bring this system under control, but on occasion using vendor-prefixed properties will be close to unavoidable. In most cases, I use only unprefixed properties in my code examples and make a note in Appendix M of where vendor prefixes need to be used.

CSS Frameworks and Preprocessors

Nowadays using a helping hand with CSS development is pretty de rigueur, especially when working on large development teams and/or on large projects. Usually these helpers come in the form of frameworks or preprocessors and quite often both.

A framework is a set of predefined CSS rules that you can use for rapid development; they usually cover typography, forms, and, quite often, layout patterns. Blueprint.css is one of the more venerable frameworks, used on many well-known websites, but the popular current framework is Bootstrap by Twitter, which offers many preformatted layout, typography, and form options, a range of reusable components, and even JavaScript extensibility.

Preprocessors are programs that work on the server-side, offering extensions and shorthand syntax in a CSS-like language that is transformed into correctly formatted stylesheets at build time. These extensions include time-saving features like variables and nested rules, and custom functions that provide incredible power to the user. The two key rivals in the preprocessor arena are LESS and Sass, with the latter being the most popular.

While both have their role in modern web development, I won’t discuss or use either in this book, as what I’m teaching is the more fundamental language that both depend on.

Table of Contents for The Modern Web

CSS3 and Beyond

Vendor-Specific Prefixes

CSS Frameworks and Preprocessors

Table of Contents for
The Modern Web