Mobile HTML5

Chapter 8. Expanding Options with CSS3 Values

As we develop mobile applications on our modern browser on smartphones, we don’t have to worry about older browsers’ lack of support for CSS3 selectors, properties, and values. The iPhone, iPod, iPad, modern Android phones, Galaxy tablet, Microsoft Surface, and all other WebKit, Firefox, Opera, and Windows 8 devices have one of the most modern, standards compliant browsers. With smartphone browsers (excluding some older Windows 7 phones, but that is changing rapidly), we can now move forward and code with the most cutting-edge CSS3 and HTML5. There’s no longer a reason to hold back.

In this chapter, we start on our journey to becoming cutting-edge CSS3 developers. In the last chapter, we learned about CSS3 selectors: cutting-edge ways of targeting elements with CSS. In this chapter, we start with cutting-edge CSS3 values. In Chapter 9, we will learn how to use some cutting-edge CSS3 properties.

There are new values, including new value types, in the CSS3 specifications. In this chapter, we will cover both the old and new values of colors, lengths, and angles. We’ll learn what values are useable in all browsers, what values are new in CSS3 but already supported in most browsers, and some keyword values that are unique to specific browsers.

CSS Color Values

Prior to CSS3, we had three types of color formats: there was the hexadecimal format (and the shorthand hex format), rgb() format, and named colors. CSS3 adds support for HSL, HSLA, RGBA, ...