Thông tin tài liệu
For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.
www.it-ebooks.info
Beginning HTML5 and
CSS3
Richard Clark, Oli Studholme,
Christopher Murphy and Divya Manian
www.it-ebooks.info
Beginning HTML5 and CSS 3
Copyright © 2012 by Richard Clark, Oli Studholme, Christopher Murphy and Divya Manian
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is
concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction
on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic
adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted
from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied
specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser
of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law
of the Publisher's location, in its current version, and permission for use must always be obtained from Springer.
Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to
prosecution under the respective Copyright Law.
ISBN-13 (pbk): 978-1-4302-2874-5
ISBN-13 (electronic): 978-1-4302-2875-2
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every
occurrence of a trademarked name, logos, or image we use the names, logos, or images only in an editorial fashion
and to the benefit of the trademark owner, with no intention of infringement of the trademark.
The use in this publication of trade names, service marks, and similar terms, even if they are not identified as such, is
not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication, neither
the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may
be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.com, or visit
www.springeronline.com.
For information on translations, please e-mail rights@apress.com or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook
versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–
eBook Licensing web page at www.apress.com/bulk-sales.
Any source code or other supplementary materials referenced by the author in this text is available to readers at
www.apress.com. For detailed information about how to locate your book’s source code, go to
www.apress.com/source-code/.
Credits
President and Publisher:
Paul Manning
Lead Editor:
Ben Renow-Clarke
Technical Reviewers:
Andrew Zack and Chris Mills
Editorial Board:
Steve Anglin, Mark Beckner, Ewan Buckingham, Gary
Cornell, Morgan Ertel, Jonathan Gennick, Jonathan
Hassell, Robert Hutchinson, Michelle Lowman, James
Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper,
Douglas Pundick, Ben Renow-Clarke, Dominic
Shakeshaft, Gwenan Spearing, Matt Wade, Tom Welsh
Copy Editor:
Mary Behr
Compositor:
Bytheway Publishing Services
Indexer:
SPi Global
Artist:
SPi Global
Cover Designer:
Anna Ishchenko
Coordinating Editor:
Christine Ricketts and Jennifer Blackwell
www.it-ebooks.info
For K & J.
—Richard
For C, R & C
—C
www.it-ebooks.info
iv
Contents at a Glance
Contents v
Forewords xv
About the Authors xvi
About the Technical Reviewers xvii
Acknowledgments xviii
Introduction xix
Chapter 1: HTML5: Now, Not 2022 1
Chapter 2: Your First Plunge into HTML5 19
Chapter 3: New Structural Elements 43
Chapter 4: A Richer Approach to Marking Up Content 89
Chapter 5: Rich Media 141
Chapter 6: Paving the Way for Web Applications 189
Chapter 7: CSS3, Here and Now 231
Chapter 8: Keeping Your Markup Slim Using CSS Selectors 275
Chapter 9: A Layout for Every Occasion 311
Chapter 10: Improving Web Typography 397
Chapter 11: Putting CSS3 Properties to Work 435
Chapter 12: Transforms, Transitions, and Animation 499
Chapter 13: The Future of CSS or, Awesome Stuff That’s Coming 581
Index 591
www.it-ebooks.info
v
Contents
Contents at a Glance iv
Forewords xv
About the Authors xvi
About the Technical Reviewers xvii
Acknowledgments xviii
Introduction xix
Who is this book for? xix
How is this book structured? xix
Conventions used in this book xix
Chapter 1: HTML5: Now, Not 2022 1
Basic tenets 1
A web standards approach 2
The Dao of web design: embracing uncertainty 4
Accessibility 6
Crafting your markup 7
How was HTML5 created? 8
Beyond HTML 4… 8
XHTML 1.0 8
XHTML 2.0 and the backlash 9
HTML5 moving forward! 10
HTML5 design principles 11
Supporting existing content 12
Degrading gracefully 12
Don’t reinvent the wheel 13
Paving the cowpaths 13
Evolution, not revolution 13
A dozen myths about HTML5 14
1. Browsers don’t support HTML5. 14
2. OK, most browsers support HTML5, but IE surely doesn’t. 14
3. HTML5 won’t be finished until 2022. 14
4. Now I have to relearn everything! 15
5. HTML5 uses presentational elements. 15
6. HTML5 is a return to tag soup. 15
7. HTML5 kills accessibility kittens. 15
www.it-ebooks.info
vi
8. Flash is dead. 15
9. HTML5 will break the Web! 15
10. HTML5’s development is controlled by browser vendors. 15
11. HTML5 includes CSS3, Geolocation, SVG, and every other modern technology under the sun.
16
12. So when can I start using HTML5? 16
Summary 16
Homework 17
Chapter 1 homework 17
Directed reading 17
Chapter 2: Your First Plunge into HTML5 19
Homework review 19
Our page 20
84.8% of your markup remains 21
It’s all in the head 22
A more perfect DOCTYPE 23
Declaring languages in HTML5 23
Character encoding 25
Mr. Memory 25
A “Hello World!” journey 26
“Hello World!” in XHTML1.0 style 26
“Hello World!” in HTML4 style 27
“Hello World!” in HTML5 “loose” style 27
“Hello World!” in HTML5 “strict” style 28
Supporting HTML5 cross-browser 29
How do browsers deal with unknown elements? 29
Meet the shiv 31
IE print protector 32
Declaring block-level elements 32
An HTML5 boilerplate page 33
No more type attribute 33
Polyfills and alternatives 34
Validation 35
HTML5 validator 35
HTML Lint 37
Revisiting Miss Baker 38
Summary 40
Homework 41
Chapter 3: New Structural Elements 43
Workflow practices, evolving? 44
A brave new semantic dawn 45
www.it-ebooks.info
vii
Structural building blocks: <div>, <section>, and <article> 49
The difference between <div>, <section>, and <article> 49
Which one to choose? 50
Basic structures using these elements 51
Headings: <header>, <hgroup>, and <h1>–<h6>, plus <footer> 53
An article with one heading 54
An article <header> with heading and metadata 55
An article with an <hgroup>-enclosed subheading 55
An article with heading, subheading, and metadata 55
Some examples of <hgroup> use 56
The HTML5 outlining algorithm 57
Outlining in action 58
Sectioning root elements 60
The scourge of the untitled section 60
HTML5-style heading element levels 62
Example of nesting heading element levels 63
Example of the new style for heading element levels 63
Even more structural elements: <nav>, <aside>, <figure> (and <figcaption>) 64
Putting it all together 67
New sectioning content elements in a nutshell 68
Converting a simple page to HTML5 69
Introducing “HTML4.5”: Adding HTML5’s semantics via <div class=””> 74
Adding semantics to “HTML4.5” and HTML5 via ARIA landmark roles 79
Reality rains on our accessible parade 80
Accessibility and HTML5 81
Accessibility techniques, evolving 82
Other HTML5 accessibility issues 86
HTML5 accessibility: A new hope 87
Summary 87
Homework 88
Further Reading 88
Chapter 4: A Richer Approach to Marking Up Content 89
Ex-presentational elements and friends 90
Giving the <i> and <b> elements new semantic meanings 91
The <small> element 95
The <hr> element 95
The <s> element, together with <del> and <ins> 97
The <u> element 99
Presentational elements: relics of a bygone era 100
Block-level links with the <a> element 100
Writing a Block Link 101
Browser caveats with Firefox <4 (for posterity) 102
www.it-ebooks.info
viii
Other elements with minor changes from HTML 4 103
The <ol> element and related new (and old) attributes 103
The <dl> element 105
The <cite> element 107
New semantic elements 109
The <mark> element 109
Ruby annotations with <ruby>, <rt>, and <rp> 110
The <time> element 116
Extending HTML5 118
The <data> element 119
The custom data attribute (data-*) 119
Microformats 120
A lightning introduction to microformats 121
Microdata: HTML5’s semantic sprinkles 125
Microdata syntax 126
Microdata in action 131
Final thoughts on microdata 138
Summary 139
Further reading and related links 139
Chapter 5: Rich Media 141
The case for Flash 141
Proprietary formats vs. open standards 142
Enter HTML5 and friends 143
Does HTML5 signal the end of Flash? 143
Video the HTML5 way 144
Video formats 147
Browser support 148
Adding video source 150
The track element 153
Do more with video 157
Take out the heavy lifting 158
Audio 162
Audio codecs 162
Browser support 163
Adding audio source 163
Using jPlayer 164
Video and audio summary 164
Canvas 164
Pixel-based freedom 165
Adding/implementing canvas 165
The power and potential of canvas 174
Further canvas resources 182
www.it-ebooks.info
ix
SVG 182
Vector power 182
Vectors unleashed with SVG 183
SVG-related reading 186
Summary 186
Homework 188
Chapter 6: Paving the Way for Web Applications 189
HTML5 forms 189
A history of HTML5 forms 190
HTML5 forms attributes 190
New input types 197
Validation and how to provide fallbacks 211
Current browser support 213
Forms in action 215
HTML5 forms APIs 219
HTML5 forms summary 219
Web applications 220
Introduction to elements for web applications 220
Introduction to HTML5-related APIs 224
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 228
Homework: Mark up the “Join Gordo’s Space Cadets” form using the new markup covered229
Chapter 7: CSS3, Here and Now 231
A Refresher on the importance of web standards 232
CSS 1, CSS 2.1, CSS3 232
Is CSS3 ready? 233
Context 233
CSS3 modularity 234
Maturity levels 235
The benefits of CSS3 235
Streamlining design 236
Reduced workarounds and hacks 236
CSS basics refresher 237
Anatomy of a rule (or rule set) 237
A property 237
A value 237
A declaration 238
Declaration block 238
Keywords 238
CSS units 239
Functional notation 239
www.it-ebooks.info
[...]... such as HTML5 Please and HTML5 Boilerplate xvi www.it-ebooks.info About the Technical Reviewers Chris Mills is a web technologist, open standards evangelist, and education agitator working at Opera Software He writes about open standards for dev.opera.com, net magazine, A List Apart, and more, and speaks at universities and industry conferences worldwide Chris is the creator of the Opera Web Standards... Safari, Opera, Chrome and, of course, our old friend IE are all—admittedly at different rates—moving forward towards supporting all the 2 3 www.stuffandnonsense.co.uk/blog www.stuffandnonsense.co.uk/archives/web_standards_trifle.html 4 www.it-ebooks.info HTML5: Now, Not 2022 new standard features inside HTML5, CSS3, etc Many web developers are also moving towards web standards and their associated best... practical, real-world advice and examples to help you master modern web standards How is this book structured? This book is split into two major sections The first six chapters cover HTML5 and the second seven chapters cover CSS3 complemented by a look to what is coming in the future of Web Standards In the first part we will look at where HTML5 came from and how to transition to HTML5 from HTML4 We’ll then... developers, and it hurt the users Founded in 1998, WaSP campaigned for standard implementations across the different browsers and a standards-based approach to web design The aims were to reduce the cost and complexity of web development and to increase the accessibility of web pages by making web content more consistent and more compatible across devices and assistive technologies They lobbied browser and. .. book for? Beginning HTML5 and CSS3: The Web Evolved is aimed at anybody with a basic knowledge of HTML and CSS If you have just recently dipped your toes into the world of HTML or CSS, or if you’ve been developing sites for years, there will be something in this book for you However, you will get the most out of this book if you’ve had a play with HTML5 and CSS3 but don’t yet fully understand all it... the base language and scripting APIs defined inside HTML5 and elsewhere) provides the scripting/behavior layer, which adds usability enhancements and richer functionality to our sites The Dao of web design: embracing uncertainty The browser landscape is rapidly evolving However, unlike the Wild West days of the browser wars, today’s landscape is evolving and converging towards standards Firefox, Safari,... Manchester, UK With over 10 years industry experience he oversees the user experience, design and front-end work at KMP and is a regular contributor to industry leading publication, net magazine He’s the founder and curator of HTML5 Gallery (www.html5gallery.com), cofounder, editor and author for HTML5 Doctor (www.html5doctor.com) You’ll also occasionally find him organising Speak the Web a series of gig... contexts, due to open standards now providing a lot of the same functionality, and that a lot of Flash developers are moving over to open standards, but it will still have its uses for a few years to come 9 HTML5 will break the Web! Absolutely not As discussed already, HTML5 is backwards compatible, and we’re already seeing wellknown commercial sites being kitted out with HTML5 features 10 HTML5 s development... received on my work To Chris Mills and Matthew Moodie who provided constructive feedback during the writing process, that improved chapters no end and ensured that we weren’t making things up as we went along Thank you to my fellow HTML5 Doctors and HTML5 Gallery curators for sharing your feedback, knowledge, insight and experience Also for your help, encouragement advice and most importantly humour To... Ways, and net magazine As an internationally respected speaker he is invited to speak regularly on web standards and the importance of improving design education, and has spoken at conferences worldwide, including: Build, New Adventures and The Future of Web Design Oli Studholme is a New Zealander living in the bright lights of Tokyo, Japan His love of the web began in with his first website in 1995, and .
Chapter 7: CSS3, Here and Now 231
A Refresher on the importance of web standards 232
CSS 1, CSS 2.1, CSS3 232
Is CSS3 ready? 233
Context 233
CSS3 modularity. Murphy and Divya Manian
www.it-ebooks.info
Beginning HTML5 and CSS 3
Copyright © 2012 by Richard Clark, Oli Studholme, Christopher Murphy and Divya
Ngày đăng: 21/02/2014, 22:20
Xem thêm: Tài liệu Beginning HTML5 and CSS3 pdf, Tài liệu Beginning HTML5 and CSS3 pdf, HTML5 includes CSS3, Geolocation, SVG, and every other modern technology under the sun., 8% of your markup remains, “Hello World!” in XHTML1.0 style, Introducing “HTML4.5”: Adding HTML5’s semantics via <div class=””>, Adding semantics to “HTML4.5” and HTML5 via ARIA landmark roles, CSS 1, CSS 2.1, CSS3 ...