You are previewing Pro CSS for High Traffic Websites.

Pro CSS for High Traffic Websites

Cover of Pro CSS for High Traffic Websites by Antony Kennedy... Published by Apress
  1. Copyright
  2. Foreword
  3. About the Authors
  4. About the Technical Reviewer
  5. Acknowledgments
  6. Preface
  7. Background Information
    1. Who Is This Book For?
    2. What Will I Learn?
    3. Why Is This Book Different From Others?
    4. Separation of Concerns
      1. Data
      2. Presentation
      3. Behavior
      4. Front-End Development Is Full of Exceptions
  8. 1. The Value of Process
    1. 1.1. The Team
    2. 1.2. Getting Too Big for Your Boots
    3. 1.3. High Staff Churn Rate
    4. 1.4. Consistency Is More Important than Quality
    5. 1.5. Tools
      1. 1.5.1. Wikis
      2. 1.5.2. Bug Reporting
      3. 1.5.3. Task Management
      4. 1.5.4. Bug Tracking and Task Management
      5. 1.5.5. Source Control
      6. 1.5.6. Diff Tools
      7. 1.5.7. Resolving Conflicts
    6. 1.6. Backup
      1. 1.6.1. Online Backup
      2. 1.6.2. Desktop Backup
    7. 1.7. Prototyping
    8. 1.8. Development Methodologies
      1. 1.8.1. Waterfall Development
      2. 1.8.2. Agile Development
    9. 1.9. Summary
  9. 2. CSS Style Guide
    1. 2.1. CSS Style Guides
    2. 2.2. CSS Formatting
      1. 2.2.1. Single- versus Multiline
      2. 2.2.2. Indenting
      3. 2.2.3. Tabs versus Spaces
      4. 2.2.4. Colons and Semicolons
    3. 2.3. Commenting and CSS Metadata
      1. 2.3.1. Existing Standards: CSSDOC
      2. 2.3.2. File Info
      3. 2.3.3. Table of Contents
      4. 2.3.4. Sectioning
      5. 2.3.5. Color Palettes
      6. 2.3.6. Folder Paths
      7. 2.3.7. Measurements
      8. 2.3.8. Document Hacks and Bug Fixes
      9. 2.3.9. Using a Template
    4. 2.4. Class and ID Naming
      1. 2.4.1. Semantics
      2. 2.4.2. Accepted Characters
      3. 2.4.3. Conventions
      4. 2.4.4. Case
    5. 2.5. Namespacing
      1. 2.5.1. Reusable Classes
      2. 2.5.2. CSS Namespaces Module
    6. 2.6. Summary
  10. 3. Fundamentals
    1. 3.1. The Cascade: Origin, Importance, and Inheritance
      1. 3.1.1. Origin and Importance
      2. 3.1.2. Inheritance
      3. 3.1.3. Inheritance and the Universal Selector
    2. 3.2. Specificity
      1. 3.2.1. Calculating Specificity
      2. 3.2.2. The !important Declaration
      3. 3.2.3. Namespacing and Specificity
      4. 3.2.4. Using Your Tools
    3. 3.3. Encoding
    4. 3.4. Localization
    5. 3.5. Browser-Specific CSS
      1. 3.5.1. Hacks and Filters
      2. 3.5.2. CSS Expressions
      3. 3.5.3. Vendor-Specific Extensions
      4. 3.5.4. Media Queries
      5. 3.5.5. Conditional Comments
    6. 3.6. When and How to Use Hacks
      1. 3.6.1. "Safe" Hacks
      2. 3.6.2. The Real World
    7. 3.7. Server-Side User Agent Detection
    8. 3.8. Some Examples of Browser Rendering Differences
      1. 3.8.1. Quirks Mode
      2. 3.8.2. The IE Box Model
      3. 3.8.3. hasLayout
      4. 3.8.4. Experimental CSS
    9. 3.9. Summary
  11. 4. Frameworks and Integration
    1. 4.1. Frameworks
      1. 4.1.1. Blueprint CSS
      2. 4.1.2. 960 Grid System
      3. 4.1.3. YUI 3 Grids
      4. 4.1.4. Alternative Uses
      5. 4.1.5. Reset Style Sheets
      6. 4.1.6. Why Create Your Own Framework?
    2. 4.2. Object Oriented CSS
      1. 4.2.1. Object Oriented Programming
      2. 4.2.2. OOCSS
    3. 4.3. Overriding CSS
    4. 4.4. Playing Nicely with Third-Party Code
    5. 4.5. Defensive CSS
    6. 4.6. Fragile CSS
    7. 4.7. Metadata in CSS
    8. 4.8. Summary
  12. 5. Brand Implementation
    1. 5.1. What Is a Brand?
    2. 5.2. Brand Style Guides
      1. 5.2.1. Guidelines Evolve
      2. 5.2.2. Design Libraries
    3. 5.3. Typography
      1. 5.3.1. Image Replacement versus Flexibility
      2. 5.3.2. Font-face
      3. 5.3.3. Fallback Fonts
      4. 5.3.4. Units
    4. 5.4. Color
      1. 5.4.1. Multiple Color Schemes
      2. 5.4.2. Color Reference
      3. 5.4.3. Dynamic Colors
      4. 5.4.4. Fallback Colors
    5. 5.5. Layout
      1. 5.5.1. Grids
      2. 5.5.2. Templates
    6. 5.6. Themes
    7. 5.7. Flexible CSS and Brand Evolution
    8. 5.8. Summary
  13. 6. CSS and Accessibility
    1. 6.1. Impairment Problems Overview
      1. 6.1.1. Partial Sightedness
      2. 6.1.2. Blindness
      3. 6.1.3. Colorblindness
      4. 6.1.4. Motor Impairment
      5. 6.1.5. Hearing Disabilities
      6. 6.1.6. Cognitive Impairment
      7. 6.1.7. Young Age
      8. 6.1.8. Old Age
      9. 6.1.9. Epilepsy
    2. 6.2. Accessibility Guidelines
      1. 6.2.1. What's the Law?
    3. 6.3. Assistive Technologies
      1. 6.3.1. Screen Readers
      2. 6.3.2. Hiding Content with CSS
      3. 6.3.3. Keyboard-Only Users
      4. 6.3.4. Other Assistive Devices
    4. 6.4. Design and Layout
      1. 6.4.1. Color
      2. 6.4.2. Fonts and Units
      3. 6.4.3. Web-fonts and Dyslexia
      4. 6.4.4. User Customization
      5. 6.4.5. Style Switchers
    5. 6.5. WAI-ARIA
    6. 6.6. Device and Environment Impairments
    7. 6.7. Progressive Enhancement or Graceful Degradation?
      1. 6.7.1. Can CSS3 Be Harmful?
    8. 6.8. Graded Browser Support (GBS)
    9. 6.9. Summary
  14. 7. Devices
    1. 7.1. Media Types
      1. 7.1.1. all
      2. 7.1.2. braille
      3. 7.1.3. embossed
      4. 7.1.4. handheld
      5. 7.1.5. print
      6. 7.1.6. oprojection
      7. 7.1.7. screen
      8. 7.1.8. speech
      9. 7.1.9. tty
      10. 7.1.10. tv
    2. 7.2. Media Queries
      1. 7.2.1. width
      2. 7.2.2. height
      3. 7.2.3. device-width
      4. 7.2.4. device-height
      5. 7.2.5. orientation
      6. 7.2.6. aspect-ratio
      7. 7.2.7. device-aspect-ratio
      8. 7.2.8. color
      9. 7.2.9. color-index
      10. 7.2.10. monochrome
      11. 7.2.11. resolution
      12. 7.2.12. scan
      13. 7.2.13. grid
      14. 7.2.14. transform-2d
      15. 7.2.15. transform-3d
      16. 7.2.16. transition
      17. 7.2.17. animation
    3. 7.3. Modernizr
    4. 7.4. Print Style Sheets
      1. 7.4.1. Controlling Page Breaks
    5. 7.5. Mobile Devices
      1. 7.5.1. Another Website
      2. 7.5.2. Use Media Queries to Target Mobile Devices
      3. 7.5.3. Build an App Instead
    6. 7.6. Other Devices
    7. 7.7. Search Engine Optimization (SEO)
    8. 7.8. Summary
  15. 8. Performance
    1. 8.1. The Payload—Worry About File Size
      1. 8.1.1. Naming Conventions
      2. 8.1.2. File Names
      3. 8.1.3. Folder Structure
      4. 8.1.4. Syntax
      5. 8.1.5. Minifying
      6. 8.1.6. Compression
      7. 8.1.7. Apache
      8. 8.1.8. Microsoft IIS (Internet Information Services)
      9. 8.1.9. Content Distribution Networks (CDNs) and Domains
      10. 8.1.10. Having Fewer Requests Is More Important than File Size
      11. 8.1.11. Domain Name Server (DNS) Lookup
      12. 8.1.12. Connecting
      13. 8.1.13. Sending
      14. 8.1.14. Waiting
      15. 8.1.15. Receiving
      16. 8.1.16. Concatenation
      17. 8.1.17. CSS Sprites
    2. 8.2. Data URIs (Uniform Resource Indicators)
    3. 8.3. Caching
    4. 8.4. What Should We Cache?
    5. 8.5. Versioning
    6. 8.6. What About Offline Storage?
    7. 8.7. Rendering and Parsing
    8. 8.8. Changing Properties via JavaScript
    9. 8.9. Animation
    10. 8.10. Hardware Acceleration
    11. 8.11. Summary
  16. 9. Dynamic CSS
    1. 9.1. CSS Extensions and Preprocessors
    2. 9.2. LESS
      1. 9.2.1. Variables
      2. 9.2.2. Mixins
      3. 9.2.3. Nested Rules
      4. 9.2.4. Operations
      5. 9.2.5. Color Functions
      6. 9.2.6. Namespaces
      7. 9.2.7. Commenting
      8. 9.2.8. Importing
      9. 9.2.9. Conclusion
    3. 9.3. Sass
      1. 9.2.10. Variables
      2. 9.2.11. Nested Selectors
      3. 9.2.12. Conditional Logic
      4. 9.2.13. Looping
      5. 9.2.14. Commenting
      6. 9.2.15. Accessors
      7. 9.2.16. Mixins
      8. 9.2.17. Colors
      9. 9.2.18. Importing
      10. 9.5.19. Conclusion
    4. 9.4. Evaluating Third-Party Technologies
    5. 9.5. Serving CSS with Server-Side Technologies
    6. 9.6. Continuous Integration (CI)
    7. 9.7. Clever Build Scripts
    8. 9.8. Caching Considerations
    9. 9.9. Summary
  17. 10. Testing and Debugging
    1. 10.1. Fast Development
      1. 10.1.1. Build Scripts that Concatenate CSS
      2. 10.1.2. Build Scripts that Compress CSS
      3. 10.1.3. Pages That Don't Like to be Refreshed or Time Out Frequently
      4. 10.1.4. Cached Files
      5. 10.1.5. Internet Explorer Bugs
    2. 10.2. Debugging
      1. 10.2.1. Firebug (Firefox)
      2. 10.2.2. Web Developer (Firefox or Chrome)
      3. 10.2.3. Developer Tools (Internet Explorer 8)
      4. 10.2.4. Web Inspector (Safari)
      5. 10.2.5. Developer Tools (Chrome)
      6. 10.2.6. Internet Explorer Developer Toolbar
      7. 10.2.7. Opera Dragonfly
    3. 10.3. Proxy Tools
      1. 10.3.1. Fiddler
      2. 10.3.2. Charles
    4. 10.4. Testing
      1. 10.4.1. Graded Browser Support
      2. 10.4.2. Running Multiple Versions of Internet Explorer
      3. 10.4.3. Emulating Other Devices
      4. 10.4.4. Automatically Generating Screenshots
    5. 10.5. Summary
  18. 11. Creating Your CSS
    1. 11.1. Igloo Refrigerator Parts Inc. Website
    2. 11.2. Analyzing the Design
      1. 11.2.1. The Grid
      2. 11.2.2. Reusable Components
      3. 11.2.3. The Color Palette
      4. 11.2.4. Accessibility Concerns
      5. 11.2.5. Communication Is Important
    3. 11.3. Creating the CSS
      1. 11.3.1. Commenting
      2. 11.3.2. Units
      3. 11.3.3. Baseline Styles
      4. 11.3.4. Structure
      5. 11.3.5. Typographic Defaults
      6. 11.3.6. Global Elements
      7. 11.3.7. Components and Reusable Classes
      8. 11.3.8. One-offs
      9. 11.3.9. Compromises
      10. 11.3.10. Cross-browser Consistency
      11. 11.3.11. Accessibility and Links
    4. 11.4. Documentation and Design Library
    5. 11.5. Summary
  19. 1. CSS Standards Guide
    1. 1.1. Igloo Refrigerator Parts Inc. CSS Standards Guide
      1. 1.1.1. Introduction and Conventions
      2. 1.1.2. Implementation
      3. 1.1.3. General Rules
      4. 1.1.4. Comments
      5. 1.1.5. Formatting
      6. 1.1.6. Naming
      7. 1.1.7. Typography
      8. 1.1.8. Color
    2. 1.2. CSS Coding Standards References
  20. 2. Accessibility Guidelines
    1. 2.1. Igloo Refrigerator Parts Inc. CSS Accessibility Guidelines
      1. 2.1.1. Introduction and Conventions
      2. 2.1.2. General Rules
      3. 2.1.3. Typography
      4. 2.1.4. Links
      5. 2.1.5. Color
  21. 3. Browser Support Guidelines
    1. 3.1. Igloo Refrigerator Parts Inc. Browser Support Guidelines
      1. 3.1.1. Introduction and Conventions
      2. 3.1.2. General Rules
      3. 3.1.3. Avoiding Common Bugs
      4. 3.1.4. Hacks and Filters
      5. 3.1.5. Devices
  22. 4. Development Process
    1. 4.1. Igloo Refrigerator Parts Inc. Development Process
      1. 4.1.1. The Team
      2. 4.1.2. Iterations
      3. 4.1.3. Stories
      4. 4.1.4. Structure and Version Control
      5. 4.1.5. Planning Meeting
      6. 4.1.6. Stand-up Meeting
      7. 4.1.7. Day-to-Day Development
      8. 4.1.8. Tidy-up Meeting
      9. 4.1.9. Retrospective
      10. 4.1.10. Scheduling
      11. 4.1.11. Warranty
O'Reilly logo

Chapter 7. Devices

With high-traffic websites, unusual devices make up a much higher number of visitors than they would otherwise. Depending upon the demographics that your site is targeting, and the results of your reporting tools, you may need to consider these devices seriously. When we discuss devices from a CSS perspective, really we are just talking about browsers with different capabilities. Whether our CSS is being served to a mobile phone, a laptop, or a search engine spider, in essence it's just another web browser, with a different resolution and different abilities to process our CSS.

With each of these devices come different considerations; when using a printer we need to care about page breaks and clarity in grayscale, as well as ...

The best content for your career. Discover unlimited learning on demand for around $1/day.