Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
Coverpage
Titlepage
Copyright
Dedication
Contents at a Glance
Contents
Forewords
About the Authors
About the Technical Reviewers
Acknowledgments
Introduction
Who is this book for?
How is this book structured?
Conventions used in this book
Chapter 1: HTML5: Now, Not 2022
Basic tenets
A web standards approach
The Dao of web design: embracing uncertainty
Accessibility
Crafting your markup
How was HTML5 created?
Beyond HTML 4…
XHTML 1.0
XHTML 2.0 and the backlash
HTML5 moving forward!
HTML5 design principles
Supporting existing content
Degrading gracefully
Don’t reinvent the wheel
Paving the cowpaths
Evolution, not revolution
A dozen myths about HTML5
1. Browsers don’t support HTML5
2. OK, most browsers support HTML5, but IE surely doesn’t
3. HTML5 won’t be finished until 2022
4. Now I have to relearn everything!
5. HTML5 uses presentational elements
6. HTML5 is a return to tag soup
7. HTML5 kills accessibility kittens
8. Flash is dead
9. HTML5 will break the Web!
10. HTML5’s development is controlled by browser vendors
11. HTML5 includes CSS3, Geolocation, SVG, and every other modern technology under the sun
12. So when can I start using HTML5?
Summary
Homework
Chapter 1 homework
Directed reading
Chapter 2: Your First Plunge into HTML5
Homework review
Our page
84.8% of your markup remains
It’s all in the head
A more perfect DOCTYPE
Declaring languages in HTML5
Character encoding
Mr. Memory
A “Hello World!” journey
“Hello World!” in XHTML1.0 style
“Hello World!” in HTML4 style
“Hello World!” in HTML5 “loose” style
“Hello World!” in HTML5 “strict” style
Supporting HTML5 cross-browser
How do browsers deal with unknown elements?
Meet the shiv
IE print protector
Declaring block-level elements
An HTML5 boilerplate page
No more type attribute
Polyfills and alternatives
Validation
HTML5 validator
HTML Lint
Revisiting Miss Baker
Summary
Homework
Chapter 3: New Structural Elements
Workflow practices, evolving?
A brave new semantic dawn
Structural building blocks: <div>, <section>, and <article>
The difference between <div>, <section>, and <article>
Which one to choose?
Basic structures using these elements
Headings: <header>, <hgroup>, and <h1>–<h6>, plus <footer>
An article with one heading
An article <header> with heading and metadata
An article with an <hgroup>-enclosed subheading
An article with heading, subheading, and metadata
Some examples of <hgroup> use
The HTML5 outlining algorithm
Outlining in action
Sectioning root elements
The scourge of the untitled section
HTML5-style heading element levels
Example of nesting heading element levels
Example of the new style for heading element levels
Even more structural elements: <nav>, <aside>, <figure> (and <figcaption>)
Putting it all together
New sectioning content elements in a nutshell
Converting a simple page to HTML5
Introducing “HTML4.5”: Adding HTML5’s semantics via <div class=””>
Adding semantics to “HTML4.5” and HTML5 via ARIA landmark roles
Reality rains on our accessible parade
Accessibility and HTML5
Accessibility techniques, evolving
Other HTML5 accessibility issues
HTML5 accessibility: A new hope
Summary
Homework
Further Reading
Chapter 4: A Richer Approach to Marking Up Content
Ex-presentational elements and friends
Giving the <i> and <b> elements new semantic meanings
The <small> element
The <hr> element
The <s> element, together with <del> and <ins>
The <u> element
Presentational elements: relics of a bygone era
Block-level links with the <a> element
Writing a Block Link
Browser caveats with Firefox <4
Other elements with minor changes from HTML 4
The <ol> element and related new (and old) attributes
The <dl> element
The <cite> element
New semantic elements
The <mark> element
Ruby annotations with <ruby>, <rt>, and <rp>
The <time> element
Extending HTML5
The <data> element
The custom data attribute (data-*)
Microformats
A lightning introduction to microformats
Microdata: HTML5’s semantic sprinkles
Microdata syntax
Microdata in action
Final thoughts on microdata
Summary
Further reading and related links
Chapter 5: Rich Media
The case for Flash
Proprietary formats vs. open standards
Enter HTML5 and friends
Does HTML5 signal the end of Flash?
Video the HTML5 way
Video formats
Browser support
Adding video source
The track element
Do more with video
Take out the heavy lifting
Audio
Audio codecs
Browser support
Adding audio source
Using jPlayer
Video and audio summary
Canvas
Pixel-based freedom
Adding/implementing canvas
The power and potential of canvas
Further canvas resources
SVG
Vector power
Vectors unleashed with SVG
SVG-related reading
Summary
Homework
Chapter 6: Paving the Way for Web Applications
HTML5 forms
A history of HTML5 forms
HTML5 forms attributes
New input types
Validation and how to provide fallbacks
Current browser support
Forms in action
HTML5 forms APIs
HTML5 forms summary
Web applications
Introduction to elements for web applications
Introduction to HTML5-related APIs
The glorious dawn of the age of the standards-based Web, accessible to all, in a world of compliant browsers, on a variety of devices
Homework: Mark up the “Join Gordo’s Space Cadets” form using the new markup covered
Chapter 7: CSS3, Here and Now
A Refresher on the importance of web standards
CSS 1, CSS 2.1, CSS3 ..
Is CSS3 ready?
Context
CSS3 modularity
Maturity levels
The benefits of CSS3
Streamlining design
Reduced workarounds and hacks
CSS basics refresher
Anatomy of a rule (or rule set)
A property
A value
A declaration
Declaration block
Keywords
CSS units
Functional notation
Selectors
Combinators
At-rules
Vendor-specific extensions
CSS shorthand
The cascade, specificity, and inheritance
CSS cascade
Calculating specificity
CSS inheritance
CSS organization and maintenance
CSS conventions
Commenting best practices
CSS resets and normalize.css
CSS frameworks and toolkits
Maintainable CSS
CSS validation
CSS lint
Browser support, vendor prefixes, polyfills, and progressive enhancement
Progressive enhancement
CSS3 browser support
Feature detection and polyfills
Polyfills
IE-specific polyfills
Summary
Homework
Appendix: CSS3 Module Status
Chapter 8: Keeping Your Markup Slim Using CSS Selectors
Selectors rundown
CSS3 selectors
Combinators
Attribute and substring selectors
UI element states pseudo-classes
Target pseudo-class
Structural pseudo-classes
Pseudo-elements
Negation pseudo-class
Browser support
Selectors of the future
Summary
Homework
Appendix
Chapter 9: A Layout for Every Occasion
The web of many devices
Evolution of monitor sizes
Separate sites optimized for each device? But that’s crazy talk!
The Visual Formatting Model of CSS—it’s boxes all the way down!
The Box Model: content, padding, border, margin
CSS3 layouts
CSS Positioned Layout Module Level 3
CSS Fragmentation Module Level 3
Multi-column Layout Module
CSS Regions Module Level 3
CSS Exclusions and Shapes Module Level 3
CSS Paged Media Module Level 3
CSS Generated Content for Paged Media Module
The Flexible Box Layout Module
The CSS Grid Layout Module
CSS3 layout modules in summary
Conclusion
Further reading
Specifications
Homework
Chapter 10: Improving Web Typography
Typeface and fonts
Anatomy of type
A brief history of web type
Text as image
Farhner Image Replacement (FIR)
Leahy/Langridge method
Phark method
Gilder/Levin method
JavaScript Image Replacement (JIR)
sIFR
Cufón
SVG fonts
@font-face
Web fonts
In the beginning
@font-face strikes back
Dissecting font face syntax: @font-face declaration
Bulletproof syntax for @font-face
Avoiding the flash of unstyled text (FOUT)
Things to keep in mind while using web fonts
Finding web fonts
Free web fonts
Commercial web fonts
Font as a service
Designing with web fonts
Using web fonts as icons
Web fonts in summary
Baselines
Setting font-family
Setting vertical spacing
Setting font sizes
Designing with a grid
With pixels
With ems
Setting the grid
Automating vertical rhythms
Baseline grid in summary
Fun with web type
Choose the weight of glyphs
Choosing the right font width
Control text overflow
Align text vertically from baseline
Control the white space between letters of a word
Adjust spacing between words
Break Long Words
Control white space and line breaks
Print hyphens
Control the quote glyphs
Hanging Punctuation
Control the rendering of non-latin web type
word-break
text-emphasis
Use ligatures and additional OpenType font features
Summary
Further Reading
Chapter 11: Putting CSS3 Properties to Work
Color and transparency
RGB
RGBa transparency
HSLa
Opacity
Backgrounds
background-clip
background-origin
background-size
Multiple backgrounds
Borders
border-radius
border-image
Drop shadows
box-shadow
text-shadow
Gradients
Gradients
Detecting support and helping other browsers
Using Modernizr
CSS3 Pie
Combining CSS3 effects
Hold the cheese
Summary
Homework
Chapter 12: Transforms, Transitions, and Animation
Translate, rotate, scale, skew, transform: 2D and 3D CSS transforms
Using transform and the transform functions
Putting 3D things into perspective with perspective and transform:perspective()
Changing the origin of perspective with the perspective-origin property
Changing transforms via transform-origin
3D or flat transforms with transform-style
Hiding and showing the back of a transformed element with backface-visibility
Browser support for CSS transforms
CSS transforms gotchas
CSS transforms in summary
CSS transitions and CSS animations: compare and contrast
CSS transitions: bling in 4D!
Setting what to transition with transition-property
Controlling the duration of a transition with transition-duration
transition-timing-function, cubic Bézier curves, and steps()
Delaying the start of a transition with transition-delay
Multiple transition values and the transition shorthand property
transition shorthand property order
Browser support for CSS transitions
CSS transitions gotchas
CSS transitions in summary
Keyframin’ with CSS animations
A simple animation example with animation-name and animation-duration
Controlling an animation using @keyframes
Timing functions with animation-timing-function
Changing how an animation starts using animation-delay
How many times? animation-iteration-count will tell you!
Mixing it up with animation-direction
Control how elements behave before and after an animation with animation-fill-mode
Pausing an animation using animation-play-state
The animation shorthand property and comma-separated animation-* values
Browser support for CSS animations
A little animation-related JavaScript detour
Animation gotchas
CSS animations in summary
Putting it all together
Further Reading
Chapter 13: The Future of CSS or, Awesome Stuff That’s Coming
Hardware acceleration and CSS performance
Internationalization
Define your own list counters with the CSS Counter Styles Module
The calc() and attr() functions
Variables, mixins, and nesting
Turning the “OMG!” up to 11 with CSS shaders
Go forth and make awesome
Appendix: essential links
Index
← Prev
Back
Next →
← Prev
Back
Next →