Cover image for CSS Mastery: Advanced Web Standards Solutions

CSS Mastery: Advanced Web Standards Solutions

Author Cameron Moll , Simon Collison , Andy Budd
Release Date: 2009/10/01
ISBN: 9781430223979
Topic:
0%
17
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

The Internet abounds with information on CSS based design. However it's spread across a large and disparate group of sites and can be very difficult to find. The purpose of this book is to pull all this information together in one place, thus creating a definitive guide to modern CSS based techniques. The book can be read cover to cover, with each chapter building on the previous one. However it can equally be used as a reference book, dipping into each chapter or technique to help solve specific problems.

This second edition contains:

  • New examples and updated browser support information

  • New case studies from Simon Collison and Cameron Moll

  • CSS3 examples, showing new CSS3 features, and CSS3 equivalents to tried and tested CSS2 techniques

What you'll learn

  • The best practice concepts in CSS design.

  • The most important (and tricky) parts of CSS

  • Identify and fix the most common CSS problems

  • How to deal with the most common bugs

  • Completely up to date browser support information

  • Covers CSS3 as well as CSS2 showing you the future of CSS

Who is this book for?

This book will be aimed towards intermediate web designers/developers although the examples should be simple enough for novice designers/developers with a basic understanding of CSS to follow along with. Readers will probably have read beginner/intermediate instructional books such as Web Standards Solutions and will be looking for more practical and in-depth information. This book is likely to have a broad appeal, attracting intermediate developers wanting to improve their skills as well as advanced developers wanting a useful reference.

The CSS 2/3 content of the book is delivered in a way that allows readers to learn CSS2 techniques that they can implement now in professional work, and then gem up on CSS3 techniques if desired, if they want to start looking towards the future.

Table of Contents

  1. Copyright
  2. Foreword
  3. About the Authors
  4. About the Technical Reviewers
  5. Acknowledgments
  6. Introduction
    1. Who is this book for?
    2. How is this book structured?
    3. Conventions used in this book
  7. 1. Setting the Foundations
    1. 1.1. Structuring your code
      1. 1.1.1. A brief history of markup
        1. 1.1.1.1. The power of meaning
        2. 1.1.1.2. IDs and class names
        3. 1.1.1.3. Naming your elements
        4. 1.1.1.4. IDs or Classes?
        5. 1.1.1.5. Divs and spans
        6. 1.1.1.6. Microformats
        7. 1.1.1.7. Different versions of HTML and CSS
      2. 1.1.2. Document types, DOCTYPE switching, and browser modes
      3. 1.1.3. Validation
        1. 1.1.3.1. Browser modes
        2. 1.1.3.2. DOCTYPE switching
    2. 1.2. Summary
  8. 2. Getting Your Styles to Hit the Target
    1. 2.1.
      1. 2.1.1. Common selectors
        1. 2.1.1.1. Pseudo-classes
      2. 2.1.2. The universal selector
      3. 2.1.3. Advanced selectors
        1. 2.1.3.1. Child and adjacent sibling selectors
        2. 2.1.3.2. Attribute selectors
      4. 2.1.4. The cascade and specificity
        1. 2.1.4.1. Specificity
        2. 2.1.4.2. Using specificity in your style sheets
        3. 2.1.4.3. Adding a class or an ID to the body tag
      5. 2.1.5. Inheritance
    2. 2.2. Planning, organizing, and maintaining your style sheets
      1. 2.2.1. Applying styles to your document
        1. 2.2.1.1. Structuring your code
        2. 2.2.1.2. Note to self
        3. 2.2.1.3. Removing comments and optimizing your style sheets
      2. 2.2.2. Style guides
    3. 2.3. Summary
  9. 3. Visual Formatting Model Overview
    1. 3.1. Box model recap
      1. 3.1.1. IE and the box model
      2. 3.1.2. Margin collapsing
    2. 3.2. Positioning recap
      1. 3.2.1. The visual formatting model
      2. 3.2.2. Relative positioning
      3. 3.2.3. Absolute positioning
        1. 3.2.3.1. Fixed positioning
      4. 3.2.4. Floating
        1. 3.2.4.1. Line boxes and clearing
    3. 3.3. Summary
  10. 4. Using Backgrounds for Effect
    1. 4.1. Background image basics
    2. 4.2. Rounded-corner boxes
      1. 4.2.1. Fixed-width rounded-corner boxes
        1. 4.2.1.1. Flexible rounded-corner box
      2. 4.2.2. Mountaintop corners
        1. 4.2.2.1. Multiple background images
        2. 4.2.2.2. border-radius
        3. 4.2.2.3. border-image
    3. 4.3. Drop shadows
      1. 4.3.1. Easy CSS drop shadows
      2. 4.3.2. Drop shadows à la Clagnut
        1. 4.3.2.1. Box-shadow
    4. 4.4. Opacity
      1. 4.4.1.
        1. 4.4.1.1. CSS opacity
        2. 4.4.1.2. RGBa
        3. 4.4.1.3. PNG transparency
        4. 4.4.1.4. CSS parallax effect
    5. 4.5. Image replacement
      1. 4.5.1. Fahrner Image Replacement (FIR)
      2. 4.5.2. Phark
      3. 4.5.3. Scalable Inman Flash Replacement (sIFR)
    6. 4.6. Summary
  11. 5. Styling Links
    1. 5.1. Simple link styling
    2. 5.2. Fun with underlines
      1. 5.2.1. Simple link embellishments
      2. 5.2.2. Fancy link underlines
    3. 5.3. Visited-link styles
    4. 5.4. Styling link targets
    5. 5.5. Highlighting different types of links
      1. 5.5.1. Highlighting downloadable documents and feeds
    6. 5.6. Creating links that look like buttons
      1. 5.6.1. Simple rollovers
      2. 5.6.2. Rollovers with images
      3. 5.6.3. Pixy-style rollovers
      4. 5.6.4. CSS sprites
      5. 5.6.5. Rollovers with CSS 3
    7. 5.7. Pure CSS tooltips
    8. 5.8. Summary
  12. 6. Styling Lists and Creating Nav Bars
    1. 6.1. Basic list styling
    2. 6.2. Creating a basic vertical nav bar
    3. 6.3. Highlighting the current page in a nav bar
    4. 6.4. Creating a simple horizontal nav bar
    5. 6.5. Creating a graphical nav bar
    6. 6.6. Simplified sliding door tabbed navigation
    7. 6.7. Suckerfish drop-downs
    8. 6.8. CSS image maps
      1. 6.8.1. Flickr-style image maps
    9. 6.9. Remote rollovers
    10. 6.10. A short note about definition lists
    11. 6.11. Summary
  13. 7. Styling Forms and Data Tables
    1. 7.1. Styling data tables
      1. 7.1.1. Table-specific elements
        1. 7.1.1.1. Summary and caption
        2. 7.1.1.2. thead, tbody, and tfoot
        3. 7.1.1.3. col and colgroups
      2. 7.1.2. Data table markup
      3. 7.1.3. Styling the table
      4. 7.1.4. Adding the visual style
    2. 7.2. Simple form layout
      1. 7.2.1. Useful form elements
        1. 7.2.1.1. Form labels
      2. 7.2.2. The basic layout
      3. 7.2.3. Other elements
      4. 7.2.4. Embellishments
        1. 7.2.4.1. Required fields
    3. 7.3. Complicated form layout
      1. 7.3.1. Accessible date input
      2. 7.3.2. Multicolumn check boxes
        1. 7.3.2.1. Submit buttons
      3. 7.3.3. Form feedback
    4. 7.4. Summary
  14. 8. Layout
    1. 8.1. Planning your layout
    2. 8.2. Setting the foundations
      1. 8.2.1. Centering a design using margins
    3. 8.3. Float-based layouts
      1. 8.3.1. Two-column floated layout
      2. 8.3.2. Three-column floated layout
    4. 8.4. Fixed-width, liquid, and elastic layout
    5. 8.5. Liquid layouts
    6. 8.6. Elastic layouts
    7. 8.7. Liquid and elastic images
    8. 8.8. Faux columns
    9. 8.9. Equal-height columns
    10. 8.10. CSS 3 columns
    11. 8.11. CSS Frameworks vs. CSS Systems
    12. 8.12. Summary
  15. 9. Bugs and Bug Fixing
    1. 9.1. Bug hunting
      1. 9.1.1. Common CSS problems
        1. 9.1.1.1. Problems with specificity and sort order
        2. 9.1.1.2. Problems with margin collapsing
    2. 9.2. Bug hunting basics
      1. 9.2.1. Try to avoid bugs in the first place
      2. 9.2.2. Isolate the problem
      3. 9.2.3. Creating minimal test cases
      4. 9.2.4. Fixing the problem, not the symptoms
      5. 9.2.5. Asking for help
    3. 9.3. Having layout
      1. 9.3.1. What is layout?
      2. 9.3.2. What effect does layout have?
    4. 9.4. Workarounds
      1. 9.4.1. Internet Explorer conditional comments
      2. 9.4.2. A warning about hacks and filters
      3. 9.4.3. Using hacks and filters sensibly
      4. 9.4.4. Applying the IE for Mac band pass filter
      5. 9.4.5. Applying the star HTML hack
      6. 9.4.6. Applying the child selector hack
    5. 9.5. Common bugs and their fixes
      1. 9.5.1. Double-margin float bug
      2. 9.5.2. Three-pixel text jog bug
      3. 9.5.3. IE 6 duplicate character bug
      4. 9.5.4. IE 6 peek-a-boo bug
      5. 9.5.5. Absolute positioning in a relative container
      6. 9.5.6. Stop picking on Internet Explorer
    6. 9.6. Graded browser support
    7. 9.7. Summary
  16. 10. Case Study: Roma Italia
    1. 10.1. About this case study
    2. 10.2. The foundation
      1. 10.2.1. An eye toward HTML 5
      2. 10.2.2. reset.css
    3. 10.3. The 1080 layout and grid
      1. 10.3.1. Using grids in web design
    4. 10.4. Advanced CSS 2 and CSS 3 features
      1. 10.4.1. Dowebsitesneedtolookexactlythesameineverybrowser.com?
      2. 10.4.2. Attribute selector
      3. 10.4.3. Box-shadow, RGBa, and text-overflow
    5. 10.5. Font linking and better web typography
      1. 10.5.1. Setting font-size like it's 1999
      2. 10.5.2. Hanging punctuation
      3. 10.5.3. Multicolumn text layout
      4. 10.5.4. @font-face
      5. 10.5.5. Cufón, an interim step toward @font-face
    6. 10.6. Adding interactivity with AJAX and jQuery
      1. 10.6.1. AJAX
      2. 10.6.2. jQuery
      3. 10.6.3. Using AJAX and jQuery for the search feature
    7. 10.7. Summary
  17. 11. Case Study: Climb the Mountains
    1. 11.1. About this case study
    2. 11.2. Style Sheet organization and conventions
      1. 11.2.1. The hard-working screen.css
        1. 11.2.1.1. Describing contents
      2. 11.2.2. Reset
      3. 11.2.3. IE style sheets using conditional comments
    3. 11.3. Grid flexibility
      1. 11.3.1. How does the CTM layout work?
    4. 11.4. Navigation control with body classes
      1. 11.4.1. Highlighting the current page
      2. 11.4.2. Layering the blockquote
    5. 11.5. Strategically targeting elements
      1. 11.5.1. Deep descendent selectors
      2. 11.5.2. The :first-child pseudo-class
      3. 11.5.3. Adjacent sibling selectors
    6. 11.6. Transparency, shadows, and rounded corners
      1. 11.6.1. Our aim
      2. 11.6.2. Caption image overlay and RGBa transparency
      3. 11.6.3. Combining classes
      4. 11.6.4. border-radius
      5. 11.6.5. box-shadow
    7. 11.7. Positioning lists and revealing content
      1. 11.7.1. Rounding the corners
      2. 11.7.2. The main elevation chart
    8. 11.8. Summary
18.118.119.229