You are previewing AdvancED CSS.
O'Reilly logo
AdvancED CSS

Book Description

Take your CSS skills to the next level and learn to write organized and optimized CSS that will improve the maintainability, performance, and appearance of your work.

Table of Contents

  1. Copyright
  2. ABOUT THE AUTHORS
  3. ABOUT THE TECHNICAL REVIEWER
  4. ABOUT THE COVER IMAGE DESIGNER
  5. ACKNOWLEDGMENTS
  6. LAYOUT CONVENTIONS
  7. 1. INTRODUCTION: DIGESTING THE WEB'S ALPHABET SOUP
    1. 1. MARKUP UNDERPINS CSS
      1. 1.1. The linguistics of markup languages
      2. 1.2. XML dialects: the many different flavors of content
        1. 1.2.1. RSS and Atom: content syndication formats
        2. 1.2.2. SVG: vector-based graphics in XML
      3. 1.3. User agents: our eyes and ears in cyberspace
        1. 1.3.1. Understanding users and their agents
        2. 1.3.2. Why giving the user control is not giving up
      4. 1.4. Abstracting content's presentation with CSS
        1. 1.4.1. The nature of output: grouping output with CSS media types
        2. 1.4.2. Considerations for targeting media types
        3. 1.4.3. Targeting screens
          1. 1.4.3.1. The screen media type
          2. 1.4.3.2. The projection media type
          3. 1.4.3.3. The handheld media type
        4. 1.4.4. The print media type
        5. 1.4.5. Aural media
        6. 1.4.6. Feature detection via CSS media queries
        7. 1.4.7. One document, multiple faces
      5. 1.5. Complementing semantics with CSS
      6. 1.6. Summary
    2. 2. CSS FUNDAMENTALS FOR ADVANCED USE
      1. 2.1. Origins of a style sheet and the CSS cascade
        1. 2.1.1. User agent style sheets (default browser styles)
        2. 2.1.2. User style sheets
          1. 2.1.2.1. User style sheet support in web browsers
      2. 2.2. Attributes and characteristics of author style sheets
        1. 2.2.1. External and embedded style sheets
          1. 2.2.1.1. Naming and specifying media and character encoding details
        2. 2.2.2. Inline styles
      3. 2.3. Selectors: from simple to complex to surgical
        1. 2.3.1. Simple selectors
          1. 2.3.1.1. Type selectors
          2. 2.3.1.2. Universal type selector
          3. 2.3.1.3. Attribute selectors
          4. 2.3.1.4. ID and class selectors
          5. 2.3.1.5. Pseudo-classes
            1. 2.3.1.5.1. Hyperlinks: the :link and :visited pseudo-classes
            2. 2.3.1.5.2. User interaction: the :hover, :active, and :focus dynamic pseudo-classes
            3. 2.3.1.5.3. Selecting elements containing text in a particular language: the :lang() pseudo-class
            4. 2.3.1.5.4. Selecting target elements via document fragment URIs: the :target pseudo-class
            5. 2.3.1.5.5. Selecting the first or last element in a series using the :first-child or :last-child pseudo-classes
            6. 2.3.1.5.6. More pseudo-classes
          6. 2.3.1.6. Pseudo-elements
            1. 2.3.1.6.1. Selecting the first character in an inline box using the :first-letter pseudo-element
            2. 2.3.1.6.2. Matching the first inline box inside a block box using the :first-line pseudo-element
            3. 2.3.1.6.3. More pseudo-elements
        2. 2.3.2. Using combinators
          1. 2.3.2.1. Descendant combinator
          2. 2.3.2.2. Child combinator
          3. 2.3.2.3. Adjacent sibling combinator
          4. 2.3.2.4. General sibling combinator
      4. 2.4. Property values and units
        1. 2.4.1. Keywords and font names
        2. 2.4.2. Numbers
          1. 2.4.2.1. Lengths
            1. 2.4.2.1.1. Relative length units
            2. 2.4.2.1.2. Absolute length units
          2. 2.4.2.2. Percentages
          3. 2.4.2.3. Time, frequencies, and angles
        3. 2.4.3. Strings
        4. 2.4.4. Functional notation
          1. 2.4.4.1. URI references: the url() function
          2. 2.4.4.2. Color functions: rgb(), rgba(), hsl(), and hsla()
          3. 2.4.4.3. Generated content functions: attr() and counter()
          4. 2.4.4.4. Basic math for computing lengths: the calc() function
      5. 2.5. Visual rendering and formatting concepts
        1. 2.5.1. CSS boxes and document flow
        2. 2.5.2. CSS positioning schemes
          1. 2.5.2.1. Static positioning
          2. 2.5.2.2. Relative positioning
          3. 2.5.2.3. Absolute positioning
          4. 2.5.2.4. Fixed positioning
          5. 2.5.2.5. Floated CSS boxes
        3. 2.5.3. Stacking contexts
        4. 2.5.4. CSS box models: content-box model vs. border-box model
      6. 2.6. Summary
  8. 2. ADVANCED CSS IN PRACTICE
    1. 3. CSS-GENERATED CONTENT
      1. 3.1. How generated content works
        1. 3.1.1. Generating content :before or :after any element
        2. 3.1.2. Exposing metadata through the CSS attr() function
        3. 3.1.3. Replacing content with pseudo-content
      2. 3.2. Limitations on styling CSS-generated content
      3. 3.3. Understanding escape sequences in CSS strings
      4. 3.4. Advanced list styling: marker boxes and numbering
        1. 3.4.1. Using built-in marker box styles
        2. 3.4.2. Replacing marker boxes with custom images
        3. 3.4.3. Manipulating the marker box's position
          1. 3.4.3.1. Positioning marker boxes outside or inside normal document flow
          2. 3.4.3.2. Marker offsets and marker pseudo-elements
      5. 3.5. Automatic numbering using CSS-generated counters
        1. 3.5.1. Atypical numbering: counting backward, skipping numbers, counting with letters, and more
        2. 3.5.2. Using multiple counters
          1. 3.5.2.1. Numbering groups of elements and their siblings
          2. 3.5.2.2. Displaying total counts
        3. 3.5.3. Counter scope: exposing structure with nested counters
      6. 3.6. Summary
    2. 4. OPTIMIZING FOR PRINT
      1. 4.1. Targeting a print style sheet
        1. 4.1.1. Linking to print styles in HTML
        2. 4.1.2. Targeting print styles using @media
        3. 4.1.3. Targeting print styles using @import
      2. 4.2. Printer style considerations
        1. 4.2.1. Printing in color
        2. 4.2.2. The tragedy of font color
        3. 4.2.3. Units
        4. 4.2.4. Images
      3. 4.3. Advanced page selectors
        1. 4.3.1. Inserting and avoiding page breaks
        2. 4.3.2. Orphans and widows
        3. 4.3.3. Establishing a page size with @page
        4. 4.3.4. Setting @page margins with :left, :right, and :first pseudo-classes
        5. 4.3.5. Using margin at-rules
      4. 4.4. Future of CSS print style sheets
      5. 4.5. Example: styling a résumé
      6. 4.6. Summary
    3. 5. DEVELOPING FOR SMALL SCREENS AND THE MOBILE WEB
      1. 5.1. The arrival of the mobile Web
      2. 5.2. The limitations and challenges of mobile web development
        1. 5.2.1. Reduced and unpredictable screen sizes
        2. 5.2.2. Varied interaction paradigms and usability implications
        3. 5.2.3. Reduced technology options and limited technical capabilities
        4. 5.2.4. Limited bandwidth and higher latency
        5. 5.2.5. Competing, overlapping, and incompatible technologies
      3. 5.3. A brief history of mobile web technology
      4. 5.4. A brief overview of mobile browsers
        1. 5.4.1. Opera Mobile and Opera Mini (Presto)
        2. 5.4.2. Internet Explorer Mobile
        3. 5.4.3. Blazer (NetFront)
        4. 5.4.4. Openwave Mobile Browser
        5. 5.4.5. Fennec (Gecko)
        6. 5.4.6. Mobile Safari and Android (WebKit)
        7. 5.4.7. Comparing browsers and displays
      5. 5.5. Delivering mobile style
        1. 5.5.1. The handheld media type
          1. 5.5.1.1. Formatting a page for handheld media
          2. 5.5.1.2. Establishing color and typography
      6. 5.6. Designing for Mobile WebKit
        1. 5.6.1. Why optimize for WebKit?
        2. 5.6.2. Previewing WebKit pages
        3. 5.6.3. Basic layout properties
          1. 5.6.3.1. Setting the viewport
          2. 5.6.3.2. Using media queries
        4. 5.6.4. Styling links to be touch-friendly
        5. 5.6.5. Using CSS selectors in JavaScript
        6. 5.6.6. WebKit CSS transforms and transitions
      7. 5.7. Summary
    4. 6. MANAGING AND ORGANIZING STYLE SHEETS
      1. 6.1. The need for organization
      2. 6.2. What organization looks like
      3. 6.3. Using CSS features as architecture
        1. 6.3.1. Understanding specificity
        2. 6.3.2. Applying multiple style sheets to a page
          1. 6.3.2.1. The grand order of at-rules
        3. 6.3.3. Classical inheritance schemes for style sheets
        4. 6.3.4. Defining design relationships using selector groups
      4. 6.4. Good coding principles
        1. 6.4.1. Taking advantage of inheritance
        2. 6.4.2. Organizing from broad to specific
        3. 6.4.3. Avoid overusing arbitrary <div> elements, IDs, or classes
        4. 6.4.4. Dividing style sheets into logical sections
        5. 6.4.5. Dividing design principles into files
        6. 6.4.6. Use the shortest URL that works
        7. 6.4.7. Good code formatting conventions
        8. 6.4.8. Alphabetize your declarations
        9. 6.4.9. Consistency is your ally
      5. 6.5. Techniques for intra-team communication
        1. 6.5.1. CSS comments
          1. 6.5.1.1. Comment headers
          2. 6.5.1.2. Comment signposts
          3. 6.5.1.3. CSSEdit
          4. 6.5.1.4. TextMate
      6. 6.6. Persistent, preferred, and alternate style sheets
      7. 6.7. Styling for media
        1. 6.7.1. CSS3 media queries
        2. 6.7.2. Developing a mobile strategy
      8. 6.8. Summary
  9. 3. CSS PATTERNS AND ADVANCED TECHNIQUES
    1. 7. SEMANTIC PATTERNS FOR STYLING COMMON DESIGN COMPONENTS
      1. 7.1. Markup patterns and common authoring conventions
        1. 7.1.1. The evolution of markup conventions
        2. 7.1.2. Microformats: reusing markup patterns and adding semantics
        3. 7.1.3. How microformats work
        4. 7.1.4. RDFa: adding extensible vocabularies to semantic markup
        5. 7.1.5. Opportunities and benefits of semantics for CSS developers
      2. 7.2. Styling microformats with CSS
        1. 7.2.1. Styling rel-tag links
        2. 7.2.2. Styling an hCard
        3. 7.2.3. Styling an hCalendar
      3. 7.3. Styling RDFa with CSS
      4. 7.4. Summary
    2. 8. USING A STYLE SHEET LIBRARY
      1. 8.1. Leveling the playing field: "resetting CSS"
      2. 8.2. Designing to the grid
        1. 8.2.1. Tools for grid diagnostics
      3. 8.3. CSS frameworks
        1. 8.3.1. YUI CSS Foundation
        2. 8.3.2. 960 Grid System
        3. 8.3.3. Blueprint CSS
      4. 8.4. Summary
    3. 9. STYLING XML WITH CSS
      1. 9.1. Using XML for your markup
        1. 9.1.1. Problems with POSH
        2. 9.1.2. Freedom from HTML
        3. 9.1.3. Oh yeah? Well, XML sucks!
        4. 9.1.4. Double the style sheet fun
        5. 9.1.5. CSS vs. XSL
      2. 9.2. Styling a simple XML file
        1. 9.2.1. Linking a style sheet
        2. 9.2.2. Embedding a style sheet
      3. 9.3. Putting the X back in eXtensible
        1. 9.3.1. Extending XHTML through namespaces
        2. 9.3.2. Styling namespaces
        3. 9.3.3. Styling namespaces in Internet Explorer
      4. 9.4. Painting SVGs
        1. 9.4.1. SVG and CSS2
        2. 9.4.2. SVG-specific style
        3. 9.4.3. Browser support for SVG
      5. 9.5. Making an Atom feed more presentable
      6. 9.6. An integrated example
      7. 9.7. Summary
    4. 10. OPTIMIZING CSS FOR PERFORMANCE
      1. 10.1. Why optimize?
        1. 10.1.1. Optimize to increase speed
        2. 10.1.2. Optimize to lower bandwidth usage and costs
      2. 10.2. Optimization vs. organization
      3. 10.3. Optimization techniques
        1. 10.3.1. Optimizing with CSS shorthand, selector groups, and inheritance
        2. 10.3.2. Avoid universal selectors or lengthy descendant selectors
        3. 10.3.3. Put CSS at the top
        4. 10.3.4. Prefer <link> elements over @import rules
        5. 10.3.5. Compressing, combining, and minifying style sheets
        6. 10.3.6. Avoid CSS expressions and filters
        7. 10.3.7. Reference external CSS instead of inline styles
        8. 10.3.8. Use absolute or fixed positioning on animated elements
      4. 10.4. Diagnostic tools for CSS performance
        1. 10.4.1. The Firebug Net panel
        2. 10.4.2. YSlow Firebug plug-in
        3. 10.4.3. WebKit Web Inspector network timeline
        4. 10.4.4. Reflow and repaint timers and visualizers
      5. 10.5. Summary
  10. 4. THE FUTURE OF CSS
    1. 11. EXPLORING THE EMERGENCE OF CSS3
      1. 11.1. When will it be done?
      2. 11.2. Using CSS3 today
        1. 11.2.1. Using vendor extensions and "beta" features
        2. 11.2.2. Browser support
          1. 11.2.2.1. Opera (Presto)
          2. 11.2.2.2. Safari (WebKit)
          3. 11.2.2.3. Firefox (Gecko)
          4. 11.2.2.4. Internet Explorer (Trident)
      3. 11.3. Using new CSS3 features
        1. 11.3.1. CSS3 color units and opacity
        2. 11.3.2. General sibling combinators
        3. 11.3.3. CSS3 attribute matching selectors
        4. 11.3.4. CSS3 pseudo-classes
          1. 11.3.4.1. E:root
          2. 11.3.4.2. E:nth-child(n)
          3. 11.3.4.3. E:nth-of-type(n)
          4. 11.3.4.4. E:nth-last-of-type(n)
          5. 11.3.4.5. E:last-child
          6. 11.3.4.6. E:first-of-type
          7. 11.3.4.7. E:last-of-type
          8. 11.3.4.8. E:only-child
          9. 11.3.4.9. E:only-of-type
          10. 11.3.4.10. E:empty
          11. 11.3.4.11. E:target
          12. 11.3.4.12. E:enabled, E:disabled, and E:checked
          13. 11.3.4.13. E::selection
          14. 11.3.4.14. E:not(s)
        5. 11.3.5. Typographic effects and web fonts
          1. 11.3.5.1. Word wrap
          2. 11.3.5.2. Text shadow
          3. 11.3.5.3. Web fonts
        6. 11.3.6. Border and background effects
          1. 11.3.6.1. Rounded corners
          2. 11.3.6.2. Box shadow
          3. 11.3.6.3. Multiple backgrounds
          4. 11.3.6.4. Background image resizing
        7. 11.3.7. Animations, transitions, and transforms
          1. 11.3.7.1. Transitions
        8. 11.3.8. Transforms
          1. 11.3.8.1. Animation
      4. 11.4. Summary
    2. 12. THE FUTURE OF CSS AND THE WEB
      1. 12.1. The bright future of the Web
        1. 12.1.1. Expanding CSS in print
        2. 12.1.2. Audible CSS
        3. 12.1.3. HTML5 and CSS
      2. 12.2. Influences, tensions, and competitors to CSS
      3. 12.3. Keeping up-to-date = getting involved
        1. 12.3.1. Participating in the W3C
        2. 12.3.2. The Web Standards Project
        3. 12.3.3. Exchanging ideas
      4. 12.4. Summary