In Chapter 1, Getting Started with HTML5, CSS3, and Responsive Web Design, we noted that the number of people viewing websites over mobile telecom networks is ever increasing. As current telecom network speeds vary enormously, we need to consider the bandwidth and therefore load time of the websites we build. Back in the day we had to consider how long our pages and the images and media they contained would take to load over a 56K modem. Now, we face similar loading time challenges. Just as the percentage rules of table-based layouts are re-emerging, so is the need to re-examine every piece of media and bandwidth sapping content we add to our pages. Although our devices are now mobile, the speeds they download content and the premium they face for doing so (speed and cost) is comparable to years gone by. Everything old is new again! Thankfully, CSS3 can heavily reduce our reliance on images for visual flair giving us the tools to create beautiful sites that also download in record time. There's lots of CSS3 for us to cover. Chapter 6, Stunning Aesthetics with CSS3, will deal with more specific CSS3 techniques including text shadows, box shadows, gradients, and backgrounds whilst Chapter 7, CSS3 Transitions, Transformations, and Animations, will look at CSS3 animations, transforms, and transitions.
In this chapter, we will learn the following CSS3 fundamental:
- What CSS3 offers the frontend developer
- Quick and handy CSS3 tricks (multiple columns and word wraps)
- The anatomy of a CSS rule
- What vendor-specific prefixes are and how to use them
- New CSS3 selectors and how they work
- Custom typography with
@font-face - How to use RGB and HSL color modes with Alpha tranparency
In the past, we either gambled that users would put up with long load times for the sake of a great design (they wouldn't, by the way!) or we ditched images, often compromising our design ideals, for the sake of usability. CSS3, in many ways negates the need for compromise. With just a few lines of code (and no images!) CSS3 can produce onscreen elements such as rounded corners, background gradients, text shadows, box shadows, custom typography, and multiple background images (alright, granted, that one does require images). If that wasn't enough, much of the basic interaction for which we have previously relied on JavaScript, such as hover state animations, can also be handled with pure CSS3. There are heaps of CSS3 goodies and economies that will elevate our responsive design from merely "a normal website made responsive" to a responsive website built for the future. By utilizing CSS3, we will enable our responsive design to load faster, require less resource and be far easier to maintain and amend in the future. Before we get into that, let's deal with the "Elephant in the room".
With a few exceptions (such as @font-face), few features of the new CSS3 modules are supported by Old IE (Internet Explorer versions 6, 7, and 8). Should you use CSS3 in your design? As ever in web development, the answer is "it depends".
Personally, at present, I principally use CSS3 to enhance a site, rather than provide essential functionality. I'm entirely comfortable with elements looking a little different in different browsers. I believe you and your clients should be too. You might find it helpful to refer back to the Educating our clients that websites shouldn't look the same in all browsers section in Chapter 1, Getting Started with HTML5, CSS3, and Responsive Web Design. Which parts of a design are critical to it "working" or "looking right" is subjective. But it's worth knowing that there are many polyfills available for adding CSS3 functionality to Old IE. Applying such polyfills, should you choose to follow that path, is discussed more in Chapter 9, Solving Cross-browser Responsive Challenges.
Note
For a full list of what CSS 2.1 and CSS3 features are supported in the differing versions of Internet Explorer, head over to the following URL:
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx
I can't speak for you but I find re-making images tiresome. You know the kind of comment I'm talking about, "Could we make those corners a little rounder?" or "Can the gradient be a little darker at the top?" Once we've dutifully made the amends, we often hear the inevitable, "Oh, no, it was better the way it was. Can you swap it back?" Now, of course, this to-and-fro process is necessary; after all, we often want to tweak a design just to see how it looks. However, CSS3 lets you do much of this in mere seconds, within the code, rather than minutes within the graphics editor.