Chapter 5. CSS3 with Compass
This chapter covers
- Creating cross-browser CSS3 stylesheets with the Compass CSS3 module
- Supporting some CSS3 features in older versions of Internet Explorer
- Advanced CSS3 techniques with Compass
In the last three chapters, you saw how Compass makes creating stylesheets faster by removing much of the repetition, tedium, and even math from the process. Up until this point, we’ve focused on CSS techniques that use selectors and properties that have been available for over a decade. In this chapter, we’ll look at more advanced approaches on the cutting edge of web design known collectively as CSS3.
CSS3, or Cascading Stylesheets level 3, builds upon the previous CSS2 spec. The first draft of what we now refer to as CSS3 first appeared in 1999 and contained more than two dozen modules, or groups of features, in varying states of completion. It’s only been in the last couple of years that relatively recent browser support has enabled stylesheet authors to benefit from CSS3. So what does CSS3 give you? Nesting, variables, mixins? Sadly no, you’ll need to use Sass for that. CSS3’s innovations can be grouped into two main buckets—more powerful selectors for targeting markup elements and extensive new properties to change how those elements look. We’ll take a brief look at the new selectors in CSS3 before we spend the rest of the chapter covering many of the new CSS3 properties.