HTML 5 and CSS 3, Illustrated Complete Unit I: Applying Advanced CSS Styling Objectives Assess advanced CSS styles Implement pseudo-elements Add generated content Integrate opacity HTML 5 and CSS 3 – Illustrated Complete Objectives (continued) Create rounded corners Create text shadows Add box shadows Test browser capabilities with Modernizr HTML 5 and CSS 3 – Illustrated Complete Assessing Advanced CSS Styles CSS3 can style many aspects that in the past required integration of images  New features not supported by all browsers • Age of browser relative to time of feature development • Modifications to features not supported in older browsers  When developing a Web site, developers should try to make Web site usable across spectrum of capabilities HTML 5 and CSS 3 – Illustrated Complete Assessing Advanced CSS Styles (continued) Progressive enhancement: additional features are used as enhancements only for browsers that can render them  Main content and capabilities available for least-featured browser  Advanced features not crucial to the layout of the Web site HTML 5 and CSS 3 – Illustrated Complete Assessing Advanced CSS Styles (continued) Graceful degradation: ensuring that when site is viewed in browsers that don’t support advanced features, Web page elements should still be displayed in a usable way  Appearance and usability of Web site don’t depend on advanced features  Example: specifying alternative text for an image, in case the image cannot be displayed HTML 5 and CSS 3 – Illustrated Complete Assessing Advanced CSS Styles (continued) Shims or patches: scripts written specifically to bridge the gap between browsers with reduced feature sets and more fully featured browsers  Available for use by anyone free of charge  Some address a single issue  Some tools package shims in a library of scripts • Examples: Modernizr, PIE HTML 5 and CSS 3 – Illustrated Complete Implementing Pseudo- Elements Pseudo-element: selectors that enable you to isolate a portion of a larger element for styling  Preceded by colon (:) in older browsers or by double colon (::) in newer ones • Double colon distinguishes pseudo-element from pseudo-class  Drop cap: First letter is enlarged and drops below the first line of text • Can be created using :first-letter • Must format surrounding text to flow around HTML 5 and CSS 3 – Illustrated Complete Implementing Pseudo- elements (continued) :first-line pseudo-element applied to paragraph HTML 5 and CSS 3 – Illustrated Complete Implementing Pseudo- elements (continued) :first-letter pseudo-element applied to paragraph HTML 5 and CSS 3 – Illustrated Complete