O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Handcrafted CSS: More Bulletproof Web Design

Handcrafted CSS: More Bulletproof Web Design

by Ethan Marcotte, Dan Cederholm
Publisher: New Riders
Release Date: August 2009
ISBN: 9780321638281
View table of contents
Start reading

Book Description

There’s a real connection between craftsmanship and Web design. That’s the theme running through Handcrafted CSS: More Bulletproof Web Design, by bestselling author Dan Cederholm, with a chapter contributed by renowned Web designer and developer Ethan Marcotte. This book explores CSS3 that works in today’s browsers, and you’ll be convinced that now’s the time to start experimenting with it.

Whether you’re a Web designer, project manager, or a graphic designer wanting to learn more about the fluidity that’s required when designing for the Web, you’ll discover the tools to create the most flexible, reliable, and bulletproof Web designs. And you’ll finally be able to persuade your clients to adopt innovative and effective techniques that make everyone’s life easier while improving the end user’s experience. This book’s seven chapters deconstruct various aspects of a case-study Web site for the Tugboat Coffee Company, focusing on aspects that make it bulletproof and demonstrate progressive enrichment techniques over more traditional labor-intensive methods.

Subjects covered in this book include:

  • building for unanticipated future use

  • progressively enriching designs using CSS3 properties

  • using RGBA color for transparency with an alpha channel

  • modular float management

  • crafting flexible frameworks

  • fluid layouts using grid-based design principles

  • craftsmanship details on typography, jQuery, and shifting backgrounds

    •

    Table of Contents

    1. Copyright
      1. Dedication
    2. Acknowledgements
    3. Introduction
      1. What This Book Is About
        1. Bulletproof Design
        2. Progressive Enrichment
        3. Reevaluation of Past Methods and Best Practices
      2. Who Is This Book For?
        1. Some Assumptions
        2. Handcrafted HTML?
        3. Resetting Styles
      3. Our Case Study
    4. 1. Always Ask, “What Happens If...?”
      1. A Simple List of Links
      2. Block-Level Links
        1. The Markup
        2. Setting the Link Style
        3. Styling the Price
        4. Positioning the Price
      3. Unintentional Overlap
      4. What Happens if Text Size Is Adjusted?
      5. Guessing at Content Length
        1. A Situation Where Absolute Positioning Makes Good Sense
      6. Improving Flexibility with Float
        1. A New Markup Order
        2. Floating the Price
        3. Passing the Text Size Test
      7. A More Optimal Markup Order
        1. Specifying a Width for Floated Elements
      8. How About a Table?
        1. Links Around Block-Level Elements
      9. Adding Data Visualization
        1. Adding Data to the Markup
        2. Applying Base Styles
        3. Hiding the Percentage Text and Creating the Bar
          1. Stacking order problem
          2. Adding a hover treatment
        4. Fixing Things in Internet Explorer 6
      10. Choosing the Right Solution
    5. 2. Rounded Corners with border-radius
      1. Past and Present Rounding
        1. Slicing Up a Fixed-Width Rounded Box
        2. Slicing Up a Fluid-Width Rounded Box
        3. Tied to a Palette and a Radius
      2. The border-radius Property
      3. Vendor-Specific Extensions
      4. Progressive Enrichment with -webkit-border-radius and -moz-border-radius
        1. Future-Proofing
        2. Rounding Specific Corners
      5. A Little Choppy in Firefox 2
        1. Perfectly Fine If Contrast is Low
      6. Background Clipping
        1. A Simple Hyperlink
        2. Creating the PNG background Image
        3. Applying the Styles That Create the Button
        4. Easy Hover States
        5. Adding a border Detail
        6. No Background Clipping in Firefox 2
      7. Rounding Form Elements
        1. Simple Form Markup
        2. Applying Basic Styles
        3. Adding Backgrounds and Removing Borders
        4. Creating Depth
        5. Adding Further Detail With borders and Border-Radius
        6. Declaring a :focus Style
      8. What About Other Browsers?
        1. This is Okay
        2. Square Button
        3. Square Form Elements
        4. Progressive Enrichment
      9. Wonderful for Prototyping
    6. 3. Flexible Color with RGBA
      1. What Is RGBA?
      2. The opacity Property vs. RGBA
        1. Where opacity Goes Wrong
          1. Using the opacity property
          2. Using the RGBA color model
      3. Compatibility
      4. What About Other Browsers?
        1. Providing a Backup for Challenged Browsers
        2. Using Tiled PNGs
          1. Tied to a color palette and level of opacity
      5. An Excellent Tool for Prototyping
      6. Not Just for Backgrounds
        1. Blending Text with RGBA
        2. Wilsonminer.com
        3. Easy Hover Selection
        4. Painting by Numbers
      7. Constructing “This Week’s Specials”
        1. Crafting the Markup
        2. Making the List Horizontal
        3. Adding the Rounded Border
        4. Positioning the Overlay
        5. Styling the Title and Price
        6. Adding RGBA to the Overlay
          1. Quick, easy alterations
      8. Wrapping Up
    7. 4. Do Websites Need to Look Exactly the Same in Every Browser?
      1. The Answer I’m Sticking to
      2. Rewarding vs. “This Is Broken”
      3. Decision Makers Who Get It
        1. Easier When you are the Decision Maker
          1. Golf clap for Internet Explorer 8
          2. Not only accepting, but embracing browser deficiencies
      4. It All Comes Down to Stats
      5. More Advanced CSS That Works Today
        1. Text-Shadow
          1. Using RGBA in combination with text-shadow
          2. Bevel effects with text-shadow and RGBA
        2. Box-Shadow
          1. Applying box-shadow to Tugboat
          2. Using RGBA in combination with box-shadow
        3. -Webkit-Transition
          1. Adding hover fades to Tugboat
          2. Applying transitions to hyperlink text color
      6. Wrapping Up
    8. 5. Modular Float Management
      1. Float Refresher
        1. Easy Clearing
      2. Applying .clearfix
        1. Additional Rules for IE6 and 7
        2. Adding .Clearfix to the Markup
      3. A Semantic Dilemma
        1. One Alternative: a Big Long List
          1. A potential maintenance headache
        2. Choosing a Better Class Name
      4. Setting Up .group in Your Style Sheets
        1. Set It and Forget It
      5. Frameworks for Handcrafters
        1. Rolling Your Own
        2. index.html
          1. Choose a doctype, but don’t sweat it
          2. Hiding all styles from IE6
          3. The odd ASCII comment at the bottom
        3. screen.css
        4. reset.css
        5. master.css
        6. ie.css
        7. Your Mileage May Vary
      6. Applying .group to Tugboat
        1. Modular Moves
      7. Wrapping Up
    9. 6. The Fluid Grid
      1. The Assignment
        1. The Problem with Fixed Width
        2. Less Soapbox, More Solutions!
      2. Flexibility Through...Font Sizing?
        1. A Matter of Context
        2. Changing Our Context
        3. Wax on, Wax off
      3. Mo’ Fluid, Mo’ Grids, Mo’ Betta
        1. From Mockup to Markup
        2. Division Sign Déjà vu
          1. Rethinking the wrap
          2. From the outside, in
        3. Columns, Context, and Changes—Oh My!
      4. Fluid Media
        1. This Ain’t Your Mama’s Img Tag
        2. IE and Its Decidedly Imperfect CSS Implementation, Sitting in a Tree...
        3. A Problem of Platforms (Well, One Platform)
          1. Firefox 2 on Windows, we hardly knew ye
          2. IE’s proprietary CSS filters to the rescue! (Wait, did I just type that?)
      5. Wrapping Up
    10. 7. Craftsmanship Details
      1. Use the Best Possible Ampersand
        1. Channeling Our Inner Bringhurst
        2. Guideline 5.1.3
        3. We’ve Been Progressively Enriching Since the Very Beginning
        4. I Thought This was About Ampersands?
      2. Font Embedding with CSS
        1. Adding @font-face to Tugboat
        2. Support for @font-face
        3. The Legal Stuff
        4. Using free fonts, for now
        5. Typekit
      3. jQuery
        1. How I use jQuery in Tugboat
          1. Slide out “Advanced Options”
          2. Linking the jQuery source
          3. Marking up the map
          4. Identifying the pieces
          5. Creating the jQuery function
          6. Making things more interesting with slideToggle();
        2. Using jQuery to add a .last class
          1. Adding a .last to the Press list on Tugboat
          2. Presentation or behavior?
          3. What about :last-child?
        3. Scratching the Surface
      4. Shifting Backgrounds (Parallax Scrolling for the Lazy)
        1. Guerrilla (or gorilla?) Tactics
          1. Seemingly invisible details
          2. How it’s done
          3. Experimenting with negative percentages
        2. Parallax Effect for the Lazy
          1. How it’s done on Tugboat
          2. Tugboat’s header markup
          3. Adding the background images
          4. Negative percentages for horizontally tiling images
          5. A characteristic of craftsmanship
      5. Conclusion