OptimWise - Web Design & Development Simpsonville/Greenville SC

Stunning CSS3: A Project-Based Guide to the Latest in CSS by Zoe Mickley Gillenwater

My rating: 2 of 5 stars

An informative but uninspiring guide to CSS3. It shows how to progressively enhance using several CSS3 techniques, but the examples are uncompelling. Also, I found the writing dry; I've been spoiled by the character and humor present in some other web design books like Introducing HTML5 and Designing with Web Standards. As a technical book, it's a decent guide, with many references to further reading. It contains workarounds for non-supporting browsers, especially IE8 and older. I liked chapter 4 on attribute selectors and chapter 6 on responsive layouts with media queries.

Web fonts

• The book's website has lists of where to find fonts that allow @font-face embedding and font-embedding services.
• Browsers don't download font files unless they're called for in CSS (except for IE8 and older).

Pseudo-classes and pseudo-elements

• Pseudo-classes select HTML elements that could have classes added to them; pseudo-elements select things that aren't HTML elements.
• Pseudo-elements: ::first-line, ::first-letter, ::before, ::after.
• Pseudo-classes start with one colon; pseudo-elements start with two.
• You can have only one pseudo-element per selector, and it must come at the end; pseudo-classes don't have these restrictions.
• The :not pseudo-class targets elements that don't match criteria.
• Use attribute selectors, pseudo-classes, and pseudo-elements instead of ids and classes to keep HTML cleaner.
• Use the target: pseudo-class to select an element that's the target of a referring URL containing a fragment identifier.

 Responsive design

• To use different size background images at different screen sizes, specify different background-images media queries, or use background-size to resize images.
• Use <meta name="viewport" content="width=device-width"> to tell mobile browsers to make the viewport size equal the device width (or screen size).

Miscellaneous

• HSL and HSLA are more intuitive than RGB and RGBA.
• To generate automatic numbering in CSS, use counter-reset, counter-increments, and content: counter(counter_name).