PART IV

Advanced CSS Techniques

From this point onward, we dive into more advanced subjects. Advanced doesn’t necessarily mean the techniques are difficult. In fact, many of them, such as newspaper-style multi-column layout in Chapter 18, are quite simple. But with each new chapter, we increasingly leave behind legacy browsers. With the exception of Chapters 14 and 16, nothing in Part IV works in IE 6 or IE 7. Also IE 8 is increasingly left behind. However, that doesn’t mean you can’t incorporate these techniques into your designs. Make sure that your content is accessible in all target browsers, and then use the new CSS3 features to enhance the experience for users of more modern browsers.

Chapter 13 completes your knowledge of CSS3 selectors. Most of them are pseudo-classes that let you target styles at elements more precisely without the need for extra HTML markup.

Chapter 14 shows how to make data tables attractive by controlling borders, backgrounds, and padding. You’ll also learn how to pimp up a table in modern browsers with border images.

Automatic content generation using the ::before and ::after pseudo-elements is the subject of Chapter 15. One of its most useful applications is displaying the URL of a link when the web page is printed. You can also automatically number sections of a page, or use generated content for more whimsical purposes, such as ribbon effects and speech bubbles.

Chapter 16 describes how to create a separate style sheet for printing web pages, something that many designers forget to do.

Media queries (see Chapter 17) lie behind one of the most important shifts in recent years—responsive web design, where page layout adapts to the size and resolution of the screen. Even though they’re not supported by IE 8 and earlier, you’ll learn how to deliver styles optimized even for legacy browsers.

Chapter 18 shows how to flow text from one column to the next like in a newspaper or magazine using CSS3 multi-column layout.

In Chapter 19, you’ll learn how to create gradients without images.

Chapters 20 and 21 explore simple animations using CSS3 transforms, transitions, and keyframes.

Finally, Chapter 22 takes an in-depth look at CSS3 flex layout, showing you how to create equal-height columns and display elements in a different order from the underlying HTML. The chapter also takes a brief look at other CSS3 features that should start arriving in browsers in the near future.