HTML5 & CSS3 for the Real World

394 Pages·2016·6.82 MB·English

by  Alexis Goldstein

Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
1. Introducing HTML5 and CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2. Markup, HTML5 Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3. More HTML5 Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
4. HTML5 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
5. HTML5 Video and Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
6. Introducing CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
7. CSS3 Gradients and Multiple Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . 157
8. CSS3 Transforms and Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
9. Embedded Fonts and Multicolumn Layouts . . . . . . . . . . . . . . . . . . . . . . . . . 213
10. Flexbox and Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
11. Geolocation, Offline Web Apps, and Web Storage . . . . . . . . . . . . . . . . . . 265
12. Canvas, SVG, and Drag and Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
A. Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
B. WAI-ARIA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
C. Microdata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

HTML5 &
CSS3 FOR
THE REAL
WORLD
BY ALEXIS GOLDSTEIN
LOUIS LAZARIS
ESTELLE WEYL
iv
HTML5 & CSS3 for the Real World
byAlexisGoldstein,LouisLazaris,andEstelleWeyl
Copyright©2015SitePointPty.Ltd.
Product Manager:SimonMackie English Editor:KellySteele
Technical Editor:AurelioDeRosa Cover Designer:AlexWalker
Printing History:
FirstEdition:May2011
SecondEdition:March2015
Notice of Rights
Allrightsreserved.Nopartofthisbookmaybereproduced,storedinaretrievalsystemortransmitted
inanyformorbyanymeans,withoutthepriorwrittenpermissionofthepublisher,exceptinthecase
ofbriefquotationsembodiedincriticalarticlesorreviews.
Notice of Liability
Theauthorandpublisherhavemadeeveryefforttoensuretheaccuracyoftheinformationherein.
However,theinformationcontainedinthisbookissoldwithoutwarranty,eitherexpressorimplied.
NeithertheauthorsandSitePointPty.Ltd.,noritsdealersordistributorswillbeheldliableforany
damagestobecausedeitherdirectlyorindirectlybytheinstructionscontainedinthisbook,orbythe
softwareorhardwareproductsdescribedherein.
Trademark Notice
Ratherthanindicatingeveryoccurrenceofatrademarkednameassuch,thisbookusesthenamesonly
inaneditorialfashionandtothebenefitofthetrademarkownerwithnointentionofinfringementof
thetrademark.
PublishedbySitePointPty.Ltd.
48CambridgeStreetCollingwood
VICAustralia3066
Web:www.sitepoint.com
Email:[email protected]
ISBN978-0-9874674-8-5(print)
ISBN978-0-9874674-9-2(ebook)
PrintedandboundintheUnitedStatesofAmerica
v
About Alexis Goldstein
AlexisGoldsteinfirsttaughtherselfHTMLwhileahighschoolstudentinthemid-1990s,
andwentontogetherdegreeinComputerSciencefromColumbiaUniversity.Sherunsher
ownsoftwaredevelopmentandtrainingcompany,autfaciamLLC.Beforestrikingouton
herown,AlexisspentsevenyearsintechnologyonWallStreet,wheresheworkedinboth
thecashequityandequityderivativespacesatthreemajorfirms,andlearnedtolovedaily
codereviews.Shetaughtdozensofclassestohundredsofstudentsasateacherandco-organ-
izerofGirlDevelopIt,agroupthatconductslow-costprogrammingclassesforwomen.You
canfindAlexisatherwebsite,http://alexisgo.com/.
About Louis Lazaris
LouisLazarisisafreelancewebdesignerandfront-enddeveloperbasedinToronto,Canada
whohasbeeninvolvedinthewebdesignindustrysince2000,whentablelayoutsandone-
pixelGIFsdominatedtheindustry.Inrecentyearshehastransitionedtoembraceweb
standardswhileendeavoringtopromotebestpracticesthathelpbothdevelopersandtheir
clientsreachpracticalgoalsfortheirprojects.LouisisManagingEditorforSitePoint's
HTML/CSScontent,blogsaboutfront-endcodeonhiswebsiteImpressiveWebs
(http://www.impressivewebs.com/),andcuratesWebToolsWeekly
(http://webtoolsweekly.com/),aweeklynewsletterfocusedontoolsforfront-enddevelopers.
About Estelle Weyl
EstelleWeylisafront-endengineerfromSanFranciscowhohasbeendevelopingstandards-
basedaccessiblewebsitessince1999.EstellebeganplayingwithCSS3whentheiPhonewas
releasedin2007,andaftereightyearsofwebapplicationdevelopmentwithCSS3sheknows
(almost)everyCSS3quirk,andhasvastexperienceimplementingcomponentsofHTML5.
ShewritestutorialsanddetailedgridsofCSS3andHTML5browsersupportat
(http://www.standardista.com/).Estelle’spassionisteachingwebdevelopment,whereyou’ll
findherspeakingonCSS3,HTML5,JavaScript,andmobilewebdevelopmentatconferences
aroundtheUSAandtheworld.Youcanfindallherpresentationsathttp://estelle.github.io,
andfindherspeakingengagementsathttp://lanyrd.com/estellevw.
About the Technical Editor
AurelioDeRosaisa(full-stack)webandappdeveloperwithmorethan5years'experience
programmingforthewebusingHTML,CSS,Sass,JavaScript,andPHP.He'sanexperton
JavaScriptandHTML5APIs,buthisinterestsincludewebsecurity,accessibility,performance,
vi
andSEO.He'salsoaregularwriterforseveralnetworks,speaker,andauthorofthebooks
jQueryinAction,thirdeditionandInstantjQuerySelectors.
About SitePoint
SitePointspecializesinpublishingfun,practical,andeasy-to-understandcontentforweb
professionals.Visithttp://www.sitepoint.com/toaccessourblogs,books,newsletters,articles,
andcommunityforums.You’llfindastackofinformationonJavaScript,PHP,Ruby,mobile
development,design,andmore.
Tomymother,whoalways
encouragesandbelievesinme.
Andtomyfather,whotaughtme
somuchaboutlivinguptomyfull
potential.Imissyoueveryday.
ToCakes,themostbrilliant
personIknow.Thankyoufor
everythingyoudoforme.I'mso
gratefulforeachandeveryday
withyou.
—Alexis
ToMelanie,thebestcookinthe
world.
Andtomyparents,forfunding
theoriginalcoursethatgotme
intothisuniqueindustry.
—Louis
ToAmie,forputtingupwithme,
andtoSpazzoandPuppers,for
snugglingwithmeasIworked
away.
—Estelle

Table of Contents
Preface
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv
Alexis Goldstein . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv
Louis Lazaris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv
Estelle Weyl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv
Want to Take Your Learning Further? . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv
Chapter 1 Introducing HTML5 and CSS3 . . . . . . . 1
What is HTML5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
How did we get here? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Would the real HTML5 please stand up? . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Why should I care about HTML5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
What is CSS3? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Why should I care about CSS3? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
What do we mean by “the Real World”? . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
The Current Browser Market . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
The Growing Mobile Market . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
On to the Real Stuff . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Chapter 2 Markup, HTML5 Style . . . . . . . . . . . . . . . . . 13
Introducing The HTML5 Herald . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
x
A Basic HTML5 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
The Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
The html Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
The head Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Leveling the Playing Field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
The Rest Is History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
HTML5 FAQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Why do these changes still work in older browsers? . . . . . . . . . . . . 21
Shouldn’t all tags be closed? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
What about other XHTML-based syntax customs? . . . . . . . . . . . . . . 24
Defining the Page’s Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
The header Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
The section Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
The article Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
The nav Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
The aside Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
The footer Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Structuring The HTML5 Herald . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
The New main Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Continuing to Structure The Herald . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Wrapping Things Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Chapter 3 More HTML5 Semantics . . . . . . . . . . . . . . . 39
A New Perspective on Content Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
The Document Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
No More hgroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
More New Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
The figure and figcaption Elements . . . . . . . . . . . . . . . . . . . . . 43
The mark Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
The progress and meter Elements . . . . . . . . . . . . . . . . . . . . . . . . 45