HTML & CSS: The Good Parts

HTML & CSS: The Good Parts Ren Henick O'REILLY® Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo Table of Contents Preface 1. H...
Author: Miranda Francis
12 downloads 1 Views 419KB Size
HTML & CSS: The Good Parts

Ren Henick

O'REILLY® Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo

Table of Contents

Preface 1. Hypertext at the Core The Web Without Links URIs Managing Links Improving the User Experience with Linking Hypertext Implementation Challenges

xvii 1 1 2 3 3 4

2. Working with HTML Markup HTML Syntax Tags, Elements, and Attributes Page Structure Rendering Modes, Flavors of HTML, and Document Type Declarations HTML or XHTML? Strict, Transitional, or Frameset? A Tale of Two Box Models Choosing the Right Document Type for Your Project Beautiful Parts: Universal Attributes Providing Stylesheet Hooks with dass and id Describing Content with title and lang The contenteditable Attribute in HTML5 Separating Content, Structure, Presentation, and Behavior Making Your Sites "Safe As Houses" Separation in Practice Working with Document Trees Browsers, Parsing, and Rendering Dynamic HTML, Ajax, and Rendering

7 7 8 10 10 11 12 12 13 14 14 15 17 18 18 18 19 20 21

3. CSS Overview Connecting Stylesheets to HTML Documents

23 23

vii

Referencing a Stylesheet with link Targeting Internet Explorer Versions with Conditional Comments Replacing link with style Using @import Beware of style Attributes! Targeting Rules to Specific Media Choosing the Elements You Want to Style: Writing Selectors Parents, Children, and Siblings: Element/Node Relationships Simple Selectors Multiple and Descendant Selectors Selecting Direct Child Elements Rule Conflicts, Priority, and Precedence Selector Priority Avoiding Rule Conflicts Value Inheritance CSS Property and Value Survey CSS Units Cross-Media Length and Size Units Pitch and the Value of a Pixel Print-Friendly Length Units font-size Keywords Color Units Key CSS Layout Properties

23 24 25 25 25 26 27 28 29 29 30 31 31 32 33 33 33 34 34 36 36 37 37

4. Developing a Healthy Relationship with Standards The Broad Landscape of Web-Related Standards Why Web Standards? Interoperability Market Forces Forward Compatibility Accessibility Vendor Priorities Legacy Asset Inertia Best Practices (and Lack Thereof) Strict Constructionism Taking the Middle Road: Standards-Friendliness Benefits of Standards-Friendliness Rules of Standards-Friendly Development

41 41 42 42 43 43 43 44 44 44 45 45 46 46

5. Effective Style and Structure The Four Habits of Effective Stylists Habit #1: Keeping lt Simple Habit #2: Keeping lt Flexible

49 49 50 52

viii I Table of Contents

Habit #3: Keeping to Consistency Habit #4: Keeping Your Bearings CSS Zen and the Stylist's Experience The Functional Principles of CSS Zen Information Architecture and Web Usability Multidimensionality Navigation: Orientation and Wayfinding Visit Strategies Guideposts for Creating Usable Interfaces Predicting Visitor Behavior with Scenarios and User Testing Taxonomy and Nomenclature Applying Taxonomy Through the Cascade New Structural Elements (HTML5)

55 57 59 60 61 62 63 64 66 67 68 70 72

6. Solving the Puzzle of CSS Layout The CSS Box Model and Element Size Control Quirks Mode and Strict Mode auto Values The overflow Property Limiting But Not Fixing Element Dimensions Handling the Unpredictable Margins, Borders, and Padding Negative Margins Collapsed Margins Borders Padding The Box Behavior of the Document Root Elements Box Property Dimensions and the % Value Element Flow Inline Elements Block Elements Inline-Block Elements Using the display Property to Change an Element's Flow The display Property The float and clear Properties The Rules of the float Property Canceling float Values with Corresponding clear Values float Context Implementing Multicolumn Layouts Converting the Two-Column Layout from Markup Tables to CSS How the Two-Column Styles Work Benefits of Confining Layout Specifications to Stylesheets Moving from Two Columns to Three

73 73 73 74 75 77 77 78 79 80 81 82 82 82 83 83 83 84 84 85 86 86 87 88 88 89 90 92 93

Table of Contents I ix

Dealing with More Than Three Columns Semantically Empty Containers for Multicolumn Layouts Advanced Layout in CSS3 CSS Positioning Properties How Positioning Works Bounding Positioned Elements The visibility and z-index Properties Altering Visibility Without Affecting Document Flow Stacking Obtaining Precise Navigation Source Order and Layout Orienting the List Forcing the Navigation List into the Desired Coordinates Layout Types and Canvas Grids Fixed, Proportional, and Flexible Layouts Defining Grids The Rule of Thirds, the Golden Ratio, and the Fibonacci Sequence Implementing a Flexible Page Grid 7. Working with Lists Ordered and Unordered Lists User Agent Default Styles for Ordered and Unordered Lists Creating Valid Ordered and Unordered Lists The list-style-type Property and the type Attribute The nav Element (HTML5) Changing the Range of an Ordered List Other Uses for Lists Outlines Inline Serial Lists Altering the Layout of Footer Links Bullets in Backgrounds? Styling Navigation Elements Placing the Primary Site Navigation Within the Source Order The Primary Navigation Layout Recipe The Footer Navigation Recipe Definition Lists Styling Definition Lists Dictionary Example Dialogue Example 8. Headings, Hyperlinks, lnline Elements, and Quotations Headings and Good Writing Headings in Print Optimal Heading Insertion

xI

Table of Contents

95 95 96 96 96 99 99 100 101 102 102 104 106 106 108 110 111 115 115 115 116 116 117 119 120 120 120 121 121 121 122 122 123 124 124 125 127 129 129 129 131

Styling Heading Elements Heading Sizes and Type Treatments Normalizing Heading Dimensions Heading Accents Link Markup Link Attributes Virtuous Use of the href Attribute Linking to Specific Passages Within Documents Creating Effective Link Content and title Values Styling Links Link Pseudoclasses Using display: block to Increase the Footprint of a Link The text-decoration Property The cursor Property Adding Semantic Value with Inline Elements Quotations 9. Colors and Backgrounds Color Theory and Web Color Practice Usability, Accessibility, and Color The Additive Color Model The HSB Color Model The Subtractive Color Model Design, Contrast, and Complements Identifying Colors, in Brief Display Environments and the Web-Safe Palette Creating Your Own Palettes CSS Backgrounds Setting background-position Values The CSS background Shorthand Property Composing Background Images "Faux Columns" Tiled Background Textures and Patterns Large Background Textures and Nonrepeating Devices Drop Shadows, Gel Effects, and Rounded Corners Bitmapped Copy and Fahrner Image Replacement The FIR Stylesheet Rules Drawbacks of FIR Reducing Server Load with Sprites 10. (Data) Tables The Disadvantages of Layout Tables Source Order: Square Peg, Round Hole

131 132 132 133 133 134 134 135 136 137 137 138 139 140 140 142 143 143 144 144 145 145 146 147 148 149 150 151 152 152 154 155 156 157 157 159 159 160 163 163 163 Table of Contents 1 xi

CSS Zen Becomes a Myth Template Slavery 1s Unavoidable Positioning Is Rendered Useless The Parts of a Data Table Example: The Full Smash of Table Markup Composing Cells Table and Data Composition Table Headers, Footers, and Heading Cells Attribute and Child Selectors Reducing Header and Footer Contrast Adding Rollover Accents to a Table 11. Images and Multimedia Replaced Elements Preparing Images for Production The alt Attribute Explained Image Dimensions and Borders Image Production Cropping Matting: Creating a Virtual "Frame" Resampling: Altering the Absolute Size of an Image Level Changes: Optimizing the Contrast of Photographs Applying Multiple Adjustments Working with Color Profiles Image Optimization Choosing the Right Image Format Finding the Happy Medium Between Size and Quality Publishing Images Keeping Images Organized Image Publishing and Management in a CMS Image Publication Etiquette Styling Images and Plug-in Content Composing Image Layout Within a Column Captioning Images Working with Previews (Thumbnail Images) in a Gallery or Slideshow Setting Lightbox: Previews, Galleries, and Slideshows SlideShowPro Adding Motion and Sound: Using SWFObject to Insert Flash Videos and Presentations Inserting Unwrapped Multimedia A Tale of Three Companies Enter Flash xii I Table of Contents

164 164 164 165 166 168 170 172 173 173 175 177 177 178 179 179 180 180 181 182 183 185 185 186 186 187 188 188 189 190 190 190 191

192 194 194 195 196 197 197

Using Bare Markup to Publish Multimedia Content A Caveat of Plug-in Content Styling Sidestepping Plug-ins with the HTTP Content-Disposition Header Field Keeping an Open Mind The video and audio Elements (HTML5) The canvas Element (HTML5) 12. Web Typography A Brief History of Letterforms Origins of Modern Western Letterforms Gutenberg's Press and the Art of Typography The Emergence of Digital Typesetting Different Limitations Without Changed Expectations A Visual Glossary of Typography Aliasing and Anti-Aliasing Type Styles, Readability, and Legibility Styling for Readability Styling for Legibility "The Fold" and Tiny Type Sizing Type Choosing the Right Units for Sizing Type Em/Percentage Size Telescoping Size Keywords Working with Typefaces and Fonts The Challenge of Limited Choices Applying Type Choices: the font-family Property Finding Canonical Typeface Names Accessing System Default Type with the font Property Character Encoding in Brief What Is Character Encoding? ASCII, ISO 8859-1, Unicode, and UTF-8 Choosing an Encoding Scheme Inserting Entities to Provide Non-ASCII Characters Creating Balanced Type Treatments Predictability, Preference, and Panic Assessing Content Scope Distinguishing Type: Face, Size, Weight, Style, Color Setting Type Around Blowouts Styling Passages of Similar Priority Enter Type Treatments Typographical Miscellany in CSS The line-height Property

198 198 199 199 199 201 203 203 204 204 205 205 206 210 212 212 213 213 215 216 216 217 217 217 220 222 222 224 224 225 225 226 228 228 229 230 232 232 233 234 234 Table of Contents I xiii

The font-variant and text-transform Properties The letter-spacing and word-spacing Properties The white-space Property The Practice of Good Web Typography

235 236 236 236

13. Clean and Accessible Forms Building Effective Forms Web Applications, User Perspective, and Design Choices Organizing User Interfaces by Function Ten Rules for Effective Web Forms and Applications Assessment and Structure Establishing Requirements Markup and Structure Basic Form Structure, Presentation, and Behavior Form-Originated get Requests The post Method and File Uploads Manipulating the Size and Appearance of Individual Controls Prototyping and Layout Prototyping 101 Design Patterns, Style Resets, and Form Layout Grouping Controls by Appearance Required Fields and Other Submission Constraints Identifying Required Fields Discovering and Identifying User Input Errors The disabled and readonly Attributes Creating Accessible Forms Implementing Forms for Accessibility Supporting Keyboard Navigation of Forms Form Features in HTML5 New, Input Types The required Attribute

237 237 237 238 239 241 241 243 246 247 249 249 251 251 252 254 255 255 256 257 258 259 260 261 262 262

14. The Bad Parts The Numbing Nature of Internet Explorer (Especially IE 6) Browser Wars 2.0 Absent or Poor Selector Support hasLayout Margin Doubling expression() Values ActiveX Filters and Transitions PNG Support (or Lack Thereof) Poor Property Support Issues with XHTML and XML

265 265 266 267 268 268 269 269 270 270 271

xiv I Table of Contents

271 Systemic Ugliness 272 Template Fragility and Third-Party Content Markup Validation As a Prerequisite to Proper Style Implementation 272 272 "Best Viewed with" 273 Graded Support 274 embed Versus object 275 Form Controls, Plug-in Instances, and Element Stacking 276 Invalid Markup for Stupid Reasons 276 HTML's Bad Neighborhoods and Cul-de-Sacs 277 Frames 278 The strike Element 279 The name Attribute 279 The noscript and noframes Elements 280 Semantic Contortions and the Limited Vocabulary of HTML 280 Inline Presentation Elements 281 Manipulating Vertical Space: hr and br 281 The pre Element Versus the white-space Property 282 CSS Travesties 282 @-Rules 282 Computed Values and Rounding Differences 283 Vendor-Specific -moz and -webkit Property Prefixes 283 The inherit Value 284 Hiding Stuff: z-index and clip 284 Counters 285 Element Flow Rules 285 Unicode Code Position Values and the content Property 286 The Awful Parts 286 The marquee and blink Elements 287 MSIE User Interface Properties 287 The align Attribute 287 The style Attribute 288 div-itis 288 Event Handler Attributes 289 Gratuitous Underlining 289 The http-equiv Attribute 290 Picking Up the Pieces Appendix: URIs, Client-Server Architecture, and HTTP

291

Glossary

297

Index

303

Table of Contents I xv