AdvancED CSS

AdvancED CSS

by Joseph R. Lewis, Meitar Moscovitz
Released July 2009
Publisher(s): Apress
ISBN: 9781430219323

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

So you think you know CSS? 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.

You'll learn how document flow and CSS positioning schemes will help you make your documents more accessible. You'll discover the great styling possibilities of CSS paired with semantic structures like Microformats and RDFa, while enriching the self-describing semantics of XHTML content. Learn how to group logically related declarations, minify style sheets, and prevent performance bottle necks such as reflows and repaints. With support for CSS enjoying unprecedented ubiquity, you can finally use such features as generated content, complex selector chains, and CSS3's visual properties, like box-shadow, in your projects.

Table of contents

  1. Cover Page
  2. Title Page
  3. Copyright
  4. Dedication
  5. CONTENTS AT A GLANCE
  6. CONTENTS
  7. ABOUT THE AUTHORS
  8. ABOUT THE TECHNICAL REVIEWER
  9. ABOUT THE COVER IMAGE DESIGNER
  10. Acknowledgments
  11. Layout Conventions
  12. Part 1: INTRODUCTION: DIGESTING THE WEB'S ALPHABET SOUP
    1. Chapter 1: MARKUP UNDERPINS CSS
      1. The linguistics of markup languages
      2. XML dialects: the many different flavors of content
        1. RSS and Atom: content syndication formats
        2. SVG: vector-based graphics in XML
      3. User agents: our eyes and ears in cyberspace
        1. Understanding users and their agents
        2. Why giving the user control is not giving up
      4. Abstracting content's presentation with CSS
        1. The nature of output: grouping output with CSS media types
        2. Considerations for targeting media types
        3. Targeting screens
          1. The screen media type
          2. The projection media type
          3. The handheld media type
        4. The print media type
        5. Aural media
        6. Feature detection via CSS media queries
        7. One document, multiple faces
      5. Complementing semantics with CSS
      6. Summary
    2. Chapter 2: CSS FUNDAMENTALS FOR ADVANCED USE
      1. Origins of a style sheet and the CSS cascade
        1. User agent style sheets (default browser styles)
        2. User style sheets
          1. User style sheet support in web browsers
      2. Attributes and characteristics of author style sheets
        1. External and embedded style sheets
          1. Naming and specifying media and character encoding details
        2. Inline styles
      3. Selectors: from simple to complex to surgical
        1. Simple selectors
          1. Type selectors
          2. Universal type selector
          3. Attribute selectors
          4. ID and class selectors
          5. Pseudo-classes
          6. Pseudo-elements
        2. Using combinators
          1. Descendant combinator
          2. Child combinator
          3. Adjacent sibling combinator
          4. General sibling combinator
      4. Property values and units
        1. Keywords and font names
        2. Numbers
          1. Lengths
          2. Percentages
          3. Time, frequencies, and angles
        3. Strings
        4. Functional notation
          1. URI references: the url() function
          2. Color functions: rgb(), rgba(), hsl(), and hsla()
          3. Generated content functions: attr() and counter()
          4. Basic math for computing lengths: the calc() function
      5. Visual rendering and formatting concepts
        1. CSS boxes and document flow
        2. CSS positioning schemes
          1. Static positioning
          2. Relative positioning
          3. Absolute positioning
          4. Fixed positioning
          5. Floated CSS boxes
        3. Stacking contexts
        4. CSS box models: content-box model vs. border-box model
      6. Summary
  13. Part 2: ADVANCED CSS IN PRACTICE
    1. Chapter 3: CSS-GENERATED CONTENT
      1. How generated content works
        1. Generating content :before or :after any element
        2. Exposing metadata through the CSS attr() function
        3. Replacing content with pseudo-content
      2. Limitations on styling CSS-generated content
      3. Understanding escape sequences in CSS strings
      4. Advanced list styling: marker boxes and numbering
        1. Using built-in marker box styles
        2. Replacing marker boxes with custom images
        3. Manipulating the marker box's position
          1. Positioning marker boxes outside or inside normal document flow
          2. Marker offsets and marker pseudo-elements
      5. Automatic numbering using CSS-generated counters
        1. Atypical numbering: counting backward, skipping numbers, counting with letters, and more
        2. Using multiple counters
          1. Numbering groups of elements and their siblings
          2. Displaying total counts
        3. Counter scope: exposing structure with nested counters
      6. Summary
    2. Chapter 4: OPTIMIZING FOR PRINT
      1. Targeting a print style sheet
        1. Linking to print styles in HTML
        2. Targeting print styles using @media
        3. Targeting print styles using @import
      2. Printer style considerations
        1. Printing in color
        2. The tragedy of font color
        3. Units
        4. Images
      3. Advanced page selectors
        1. Inserting and avoiding page breaks
        2. Orphans and widows
        3. Establishing a page size with @page
        4. Setting @page margins with :left, :right, and :first pseudo-classes
        5. Using margin at-rules
      4. Future of CSS print style sheets
      5. Example: styling a résumé
      6. Summary
    3. Chapter 5: DEVELOPING FOR SMALL SCREENS AND THE MOBILE WEB
      1. The arrival of the mobile Web
      2. The limitations and challenges of mobile web development
        1. Reduced and unpredictable screen sizes
        2. Varied interaction paradigms and usability implications
        3. Reduced technology options and limited technical capabilities
        4. Limited bandwidth and higher latency
        5. Competing, overlapping, and incompatible technologies
      3. A brief history of mobile web technology
      4. A brief overview of mobile browsers
        1. Opera Mobile and Opera Mini (Presto)
        2. Internet Explorer Mobile
        3. Blazer (NetFront)
        4. Openwave Mobile Browser
        5. Fennec (Gecko)
        6. Mobile Safari and Android (WebKit)11
        7. Comparing browsers and displays
      5. Delivering mobile style
        1. The handheld media type
          1. Formatting a page for handheld media
          2. Establishing color and typography
      6. Designing for Mobile WebKit
        1. Why optimize for WebKit?
        2. Previewing WebKit pages
        3. Basic layout properties
          1. Setting the viewport
          2. Using media queries
        4. Styling links to be touch-friendly
        5. Using CSS selectors in JavaScript
        6. WebKit CSS transforms and transitions
      7. Summary
    4. Chapter 6: MANAGING AND ORGANIZING STYLE SHEETS
      1. The need for organization
      2. What organization looks like
      3. Using CSS features as architecture
        1. Understanding specificity
        2. Applying multiple style sheets to a page
          1. The grand order of at-rules
        3. Classical inheritance schemes for style sheets
        4. Defining design relationships using selector groups
      4. Good coding principles
        1. Taking advantage of inheritance
        2. Organizing from broad to specific
        3. Avoid overusing arbitrary <div> elements, IDs, or classes
        4. Dividing style sheets into logical sections
        5. Dividing design principles into files
        6. Use the shortest URL that works
        7. Good code formatting conventions
        8. Alphabetize your declarations
        9. Consistency is your ally
      5. Techniques for intra-team communication
        1. CSS comments
          1. Comment headers
          2. Comment signposts
          3. CSSEdit
          4. TextMate
      6. Persistent, preferred, and alternate style sheets
      7. Styling for media
        1. CSS3 media queries
        2. Developing a mobile strategy
      8. Summary
  14. Part 3: CSS PATTERNS AND ADVANCED TECHNIQUES
    1. Chapter 7: SEMANTIC PATTERNS FOR STYLING COMMON DESIGN COMPONENTS
      1. Markup patterns and common authoring conventions
        1. The evolution of markup conventions
        2. Microformats: reusing markup patterns and adding semantics
        3. How microformats work
        4. RDFa: adding extensible vocabularies to semantic markup
        5. Opportunities and benefits of semantics for CSS developers
      2. Styling microformats with CSS
        1. Styling rel-tag links
        2. Styling an hCard
        3. Styling an hCalendar
      3. Styling RDFa with CSS
      4. Summary
    2. Chapter 8: USING A STYLE SHEET LIBRARY
      1. Leveling the playing field: “resetting CSS”
      2. Designing to the grid
        1. Tools for grid diagnostics
      3. CSS frameworks
        1. YUI CSS Foundation
        2. 960 Grid System
        3. Blueprint CSS
      4. Summary
    3. Chapter 9: STYLING XML WITH CSS
      1. Using XML for your markup
        1. Problems with POSH
        2. Freedom from HTML
        3. Oh yeah? Well, XML sucks!
        4. Double the style sheet fun
        5. CSS vs. XSL
      2. Styling a simple XML file
        1. Linking a style sheet
        2. Embedding a style sheet
      3. Putting the X back in eXtensible
        1. Extending XHTML through namespaces
        2. Styling namespaces
        3. Styling namespaces in Internet Explorer
      4. Painting SVGs
        1. SVG and CSS2
        2. SVG-specific style
        3. Browser support for SVG
      5. Making an Atom feed more presentable
      6. An integrated example
      7. Summary
    4. Chapter 10: OPTIMIZING CSS FOR PERFORMANCE
      1. Why optimize?
        1. Optimize to increase speed
        2. Optimize to lower bandwidth usage and costs
      2. Optimization vs. organization
      3. Optimization techniques
        1. Optimizing with CSS shorthand, selector groups, and inheritance
        2. Avoid universal selectors or lengthy descendant selectors
        3. Put CSS at the top
        4. Prefer <link> elements over @import rules
        5. Compressing, combining, and minifying style sheets
        6. Avoid CSS expressions and filters
        7. Reference external CSS instead of inline styles
        8. Use absolute or fixed positioning on animated elements
      4. Diagnostic tools for CSS performance
        1. The Firebug Net panel
        2. YSlow Firebug plug-in
        3. WebKit Web Inspector network timeline
        4. Reflow and repaint timers and visualizers
      5. Summary
  15. Part 4: THE FUTURE OF CSS
    1. Chapter 11: EXPLORING THE EMERGENCE OF CSS3
      1. When will it be done?
      2. Using CSS3 today
        1. Using vendor extensions and “beta” features
        2. Browser support
          1. Opera (Presto)
          2. Safari (WebKit)
          3. Firefox (Gecko)
          4. Internet Explorer (Trident)
      3. Using new CSS3 features
        1. CSS3 color units and opacity
        2. General sibling combinators
        3. CSS3 attribute matching selectors
        4. CSS3 pseudo-classes
          1. E:root
          2. E:nth-child(n)
          3. E:nth-of-type(n)
          4. E:nth-last-of-type(n)
          5. E:last-child
          6. E:first-of-type
          7. E:last-of-type
          8. E:only-child
          9. E:only-of-type
          10. E:empty
          11. E:target
          12. E:enabled, E:disabled, and E:checked
          13. E::selection
          14. E:not(s)
        5. Typographic effects and web fonts
          1. Word wrap
          2. Text shadow
          3. Web fonts
        6. Border and background effects
          1. Rounded corners
          2. Box shadow
          3. Multiple backgrounds
          4. Background image resizing
        7. Animations, transitions, and transforms
          1. Transitions
        8. Transforms
          1. Animation
      4. Summary
    2. Chapter 12: THE FUTURE OF CSS AND THE WEB
      1. The bright future of the Web
        1. Expanding CSS in print
        2. Audible CSS
        3. HTML5 and CSS
      2. Influences, tensions, and competitors to CSS
      3. Keeping up-to-date = getting involved
        1. Participating in the W3C
        2. The Web Standards Project
        3. Exchanging ideas
      4. Summary
  16. Index

Product information

  • Title: AdvancED CSS
  • Author(s): Joseph R. Lewis, Meitar Moscovitz
  • Release date: July 2009
  • Publisher(s): Apress
  • ISBN: 9781430219323