Transcription
Beginning HTML5andCSS3Richard Clark, OliStudholme,Christopher Murphy and Divya Manian
ContentsContents ataGlanceivForewordsxvAbout the AuthorsxviAbout the Technical o is this book for?xixHow is this book structured?xixConventions used in this bookxixChapter1: HTML5:Now, Not 20221Basic tenets1A web standardsThe Dao of web2approach4design: embracing uncertaintyAccessibilityCrafting your markupHow was67HTML5 created?Beyond8HTML 48XHTML 1.08XHTML 2.0 and thebacklash9HTML5 moving forward!HTML5 design principlesSupporting existing1011content12Degrading gracefully12Don't reinvent the wheel13Pavingthe13cowpathsEvolution, not revolutionA dozenmyths13about HTML51. Browsers don't14support HTML52. OK, most browserssupportHTML5, but IE14surelydoesn't143. HTML5 won't be finished until 2022144. Now I have to relearn155. HTML5uses6. HTML5 iseverything!presentational elementsreturn totag soup7. HTML5 kills accessibility kittensa151515
8. Flash is dead159. HTML5 will break the Web!10. HTML5'sdevelopment15is controlledbybrowser vendors1511. HTML5 includes CSS3, Geolocation, SVG, and every other moderntechnology under the12. So whencan16sunI startusing 7reading17Chapter 2: Your First Plunge into HTML5Homework review2084.8% of yourmarkupremainsIt's all in the headmoreperfect2122DOCTYPEDeclaring languages23in HTML523Character encoding25Mr.25MemoryA "Hello World!" journey26"Hello World!" in XHTML1.0"Hello World!" in HTML4stylestyle2627"Hello World!" in HTML5 "loose" style27"Hello World!" in HTML5 "strict" style28HTML5 cross-browserSupporting29How do browsers deal with unknown elements?29Meet the shiv31IE32print protectorDeclaringAn HTML5No moreblock-level elementsboilerplate pagetype attributePolyfills andalternativesValidation3233333435HTML5 validator35HTML Lint37Revisiting Miss Baker38Summary40Homework41Chapter 3: New Structural Elementsvi1919Our pageA1643Workflow practices, evolving?44A brave45newsemantic dawn
Structural building blocks: div , section , and article 49The difference between div , section , and article 49Which50to choose?oneBasic structuresthese elementsusing51Headings: header , hgroup , and h1 - h6 , plus footer An article with one54headingAn article header withAn article with53headingand metadata55 hgroup -enclosed subheadingAn article with heading, subheading, and metadata55Some56anexamples of hgroup The HTML555use57outlining algorithmin actionOutliningSectioning58root elements60The scourge of the untitled sectionHTML5-style heading60element levels62Example of nesting heading element levelsExampleof theEvenNewstyleforheading63element levelsstructural elements: nav , aside ,morePuttingnewit all figure (and figcaption )68content elements in a nutshellsimple page to HTML5Introducing "HTML4.5": Adding HTML5's semanticsConverting69avia div class "" semantics to "HTML4.5" and HTML5 via ARIA landmark rolesReality rainson aradeAccessibility and HTML581Accessibility techniques, evolving82Other HTML586HTML5accessibility urther88ReadingChapter 4: A Richer Approach to Marking Up Content8990Ex-presentational elements and friendsGiving the i and b elementsnewsemantic91meanings95The small element95The hr elementThe s element, togetherwith del and ins 9799The u elementPresentational elements: relics ofBlock-level links with theWriting a aelementa Block LinkBrowser caveats with Firefox 4bygoneera 100100101102vii
Other elements with minorchanges from HTML 4The ol element and relatednew(and old) attributes103103The dl element105The cite element107New semantic elements109The mark element109Ruby annotations with ruby , rt , and rp 110The time element116Extending HTML5118The data element119The custom data attribute (data-*)120Microformats121Alightning introductionto microformatsMicrodata: HTML5's semanticMicrodatasprinkles125126syntaxMicrodata in ChapterThe139readingand related links5: Rich Mediacase139141for Flash141Proprietary formatsvs.open standards142Enter HTML5 and friends143Does HTML5143signal the end of Flash?Video the HTML5 way144Video formats147Browser148Addingsupportvideo source150The track element153Do157morewith videoTake out theheavy liftingAudio158162Audio codecs162BrowsersupportAdding audio source163Using jPlayer164Video and audio summary164163Canvas164Pixel-based freedomAdding/implementingviii121165canvas165The power andpotential of canvas174Further canvasresources182
SVG182Vector power182Vectors unleashed with apter 6: Paving the Way for Web Applications189HTML5 formsAhistory189of HTML5 forms190HTML5 forms attributes190New197input typesValidation and how toCurrent browserprovide fallbacks211213supportForms in action215HTML5 forms APIs219HTML5 forms summaryWeb applications219220Introduction to elements for webapplications220Introduction to HTML5-related APIs224Theglorious dawn of the age of the standards-based Web, accessible to all, inbrowsers, on a variety of devicesHomework: Mark up the "Join Gordo'sSpace Cadets" form using theChapter 7: CSS3, Here and NowA Refresherontheimportance of web standards228markup covered229232232:ready?ContextCSS3world of compliant231CSS1,CSS2.1,CSS3Is CSS3newa233233modularity234levels235MaturityThe benefits of CSS3235Streamlining design236Reduced workarounds and hacks236CSS basics 37A value237A declaration238Declaration block238Keywords238CSS units239Functional notation239ix
Selectors241Combinators At-rules241241Vendor-specific extensions241CSS shorthand241The cascade,243specificity, and inheritanceCSS cascade243Calculating specificity243CSS inheritance245CSSorganization and maintenance245CSS conventions246Commenting best practices249CSS resets and normalize.css251CSS frameworks and toolkits254Maintainable CSS254CSS validation259CSS lintBrowser260support,Progressivevendorprefixes, polyfills,andprogressiveenhancementenhancementCSS3 browsersupportFeature detection and polyfills261262268Polyfills269IE-specific polyfills270Summary271HomeworkAppendix:272CSS3 Module StatusChapter 8: Keeping Your Markup Slim Using CSS Selectors273275Selectors rundown276CSS3 selectors277CombinatorsAttribute and278substringUl element statesselectorspseudo-classes279284Target lements301Negation pseudo-class303Browserx261support304Selectors of the future305Summary306Homework307Appendix308
Chapter 9: A Layout for Every OccasionThe web of many devices287287Evolution of monitor sizes289Separate sites optimized for each device? But that's crazy talk!Formatting Model of CSS—it's boxes all the way down!289The Box Model: content,291The VisualCSS3padding, border, margin341layoutsCSS PositionedCSSLayout ModuleLevel 3Fragmentation Module LevelMulti-columnCSSLayout3423342Module343Regions Module Level 3CSS Exclusions andCSS291349Module Level 3ShapesPaged Media Module Level 3351353CSS Generated Content for Paged Media ModuleThe Flexible Box Layout Module355The CSS Grid364CSS3layoutLayoutModulemodules in ificationsHomework371Chapter 10: Improving Web TypographyTypefaceand fonts397Anatomy of typeA briefText as398of webhistory397399type400imageImage Replacement (FIR)Leahy/Langridge method400Phark method401Gilder/Levin method401JavaScript Image Replacement (JIR)401Farhner400sIFR402Cufon403SVG fonts403 font-face404Web fonts404In the404beginning@font-face strikes backfont face syntax:404 font-faceDissectingBulletproof syntax for @font-faceAvoidingThingsthe flash oftokeepunstyledin mind whiletextdeclaration405406(FOUT)usingweb fonts406409xi
Finding web fonts410Free web fonts410Commercial web fonts410Font as411servicea412with web fontsDesigningUsing web fontsasicons412412Web fonts in summary413BaselinesSetting font-family413Setting vertical spacing413414Setting font sizesDesigning with a grid414Withpixels415Withems417418Setting the gridAutomatingBaseline grid invertical419rhythms419summaryFun with web type419Choose the weight of glyphsChoosingthe419421right font width421Control text overflowtextAlignverticallyfrom baseline422Control the white space between letters of a word423Adjust spacing between words424Break425LongWordsControl white space and line breaks425Print hyphens426Control theHangingquote glyphs429Punctuation430Control therendering of non-latin web typeword-break431text-emphasisUseligaturesand additional431OpenType font featuresReadingChapter 11: Putting CSS3 PropertiesColor andtransparencyRGBRGBa433to roundsxii432433SummaryFurther431442
ize448Multiple ients478478GradientsDetectingsupport andhelpingother browsers490Using Modernizr491CSS3 Pie491Combining CSS3 effects492Hold the cheese495Summary497Homework498Chapter 12: Transforms, Transitions, and Animation499Translate, rotate, scale, skew, transform: 2D and 3D CSS transformsUsingtransform and the transform functionsPutting3D things intoChangingChangingtheorigintransforms viaperspective-origin propertyatransformed element withbackface-visibilitysupport for CSS transformsCSS transformsgotchasin 4D!blingSetting what to transition with transition-propertyControlling524528CSS transitions and CSS animations: compare and contrastthe duration of522527CSS transforms in summaryCSS transitions:517521transform-styleHiding and showing the back of515518transform-origin3D or flat transforms withBrowser505perspective with perspective and transform: perspective()of perspective with the500atransition with unction, cubic Bezier curves, and steps()Delaying the start of a transition with transition-delay540Multiple transition values and the transition shorthand property547transition shorthand547Browserpropertyordersupport for CSS transitionsgotchas546547CSS transitions549CSS transitions in summary551Keyframin'with CSS animations552
Asimple animation example with animation-name and animation-duration556 keyframesTiming functions with animation-timing-function558Changing how562Controllingananimation usingananimation starts559using animation-delay563How many times? animation-iteration-count will tell you!Mixing564it up with animation-directionControl how elements behave before and after an animation with animation-fill-mode .564Pausingananimation567using animation-play-stateThe animation shorthandpropertyandcomma-separatedanimation-* values568Browser support for CSS animationsJavaScript detour570Animationgotchas573CSS animations in summary574A little animation-related572Putting it all together575Further577ReadingChapter 13: TheFuture of CSS or, Awesome Stuff That'sHardware acceleration and ne your own list counters with the CSS Countercalc()attr() functionsVariables, mixins, and nestingTheTurningandthe "OMG!" up to 11 with CSS shadersGo forth and makeAppendix:Indexxiv581awesomeessential linksStyles Module582584586586587588591
Beginning HTML5 and CSS3 : [the web evolved ; next generation web standards] Subject: New York, NY, Apress, 2012 Keywords: Signatur des Originals (Print): T 13 B 501. Digitalisiert von der TIB, Hannover, 2013. Created Date: 3/8/2013 1:34:04 PM .
