P E T E R G A S S T O N

M U L T I - D E V I C E W E B D E V E L O P M E N T W I T H H T M L 5 , C S S 3 , A N D J A V A S C R I P T

T H E M O D E R N W E BT H E M O D E R N W E B

$34.95 ($36.95 CDN)

www.nostarch.com

TH E F I N EST I N G E E K E NTE RTA I N M E NT™

“ I L I E F LAT .”

Th is book uses RepKover — a durab le b ind ing that won’t snap shut. SHELVE IN:COM

PUTERS/WEB PROGRAM

MING

Today’s web technologies are evolving at near–light speed,bringing the promise of a seamless Internet ever closer toreality. When users can browse the Web on a three-inch

His plain-English explanations and practical examples development, including HTML5, CSS3, and JavaScript.

emphasize the techniques, principles, and practices that

A G U I D E T OA G U I D E T OM O D E R N W E BM O D E R N W E B

D E V E L O P M E N TD E V E L O P M E N T

Peter Gasston’s The Modern Web will guide you throughthe latest and most important tools of device-agnostic web

phone screen as easily as on a fifty-inch HDTV, what’s adeveloper to do?

and stay relevant as these technologies are updated.you’ll need to easily transcend individual browser quirks

Learn how to:

multiple devices Plan your content so that it displays fluidly across

Design websites to interact with devices using the mostup-to-date APIs, including Geolocation, Orientation, and Web Storage

Incorporate cross-platform audio and video without using troublesome plug-ins

Make images and graphics scalable on high-resolution devices with SVG

Use powerful HTML5 elements to design better forms

Turn outdated websites into flexible, user-friendly onesthat take full advantage of the unique capabilities of anydevice or browser. With the help of The Modern Web,you’ll be ready to navigate the front lines of device-independent development.

of The Book of CSS3, Gasston has also been published

A B O U T T H E A U T H O R

Peter Gasston has been a web developer for more than12 years in both agency and corporate settings. The author

in Smashing Magazine, A List Apart, and .net magazine. He runs the web development blog Broken Links (http://broken-links.com/ ) and lives in London, England.

THE

MO

DE

RN

WE

BTH

E M

OD

ER

N W

EB

Symbols and Numerals@import at-rule, 40@supports at-rule, 102, 207@viewport at-rule, for setting viewport

parameter, 49–50. (dot) notation, for storing items, 117[] (square bracket) notation, for

storing items, 1173-D axes, 1103-D context

detecting device position in, 110WebGL for, 138

3-D orientation, information sources, 124, 222

Aa element, dragging, 119aboutness, 28activeElement() attribute, 131Adaptive Images tool, 63, 64, 221adaptive websites, 39

vs. responsive, 53–56add() method, 97addEventListener method, 91–94Adobe, 1, 182, 210, 226

Edge Inspect, 19open standards, 200

agents, detecting dimension, 41align-content property, 77align-items property, 74alignment

in Flexbox, 73in grid layout, 83–84

align-self property, 75all media type, for media queries, 44all value, for column-span property, 68almost standards mode, 15alpha property, for orientation, 111alt attribute, for picture element, 62Amazon Kindle, 6Ambient Findability (Morville), 38, 219

and operatorfor feature queries, 207for media queries, 44

Android, 19browsers, 212

anonymous functionsvs. named functions, 92removing from event handlers, 94

Apache Cordova, 182APIs. See device APIs; specific APIsapp object, in manifest file, 180AppCache (Application Cache), 178,

185–188caching sequence, 186–187documentation, 189, 225

.appcache file, 185, 186Appcelerator Titanium, 184appendChild() method, 193Apple, and MP4 format, 166Application Cache. See AppCache

(Application Cache)application role, 27applications. See TV apps; web appsarc() method, 136Archibald, Jake, 185areas in grid, 78, 79aria-haspopup attribute, 26article element, 22–24

width of, 59aside element, 22aspect ratio

of device or viewport, 43maintaining, 60

assistive technologyautomatic focus and, 144browser awareness of interactive

content, 26asynchronous execution of scripts,

90–91Atkins, Tab, 85audio element, 116, 162–163

multiple source files for, 164

INDEX

228 Index

audio format, variation in browser support, 166

audio() method, 173AudioContext() method, 174auto value

for column-fill property, 67for height property, 60for preload attribute, 163

autocomplete attribute for form, 145autofocus attribute for form, 144autoplay attribute, for media

elements, 163avoid-column value, for break-before

property, 69axes

in Flexbox, 73in Orientation API, 110

BB2B (business-to-business) sites, 2balance value, for column-fill property, 67bandwidth attribute, of connection

object, 115banner role, 27baseline value, for align-items

property, 74Battery Status API, 114–115

information sources, 124, 222battery, vibrating impact on, 113beta property, for orientation, 111Beverloo, Peter, 106, 221Bidelman, Eric, 209, 225bitmap images, 46

vs. vector graphics, 126Blackberry, 19blockquote element, 24Blooman, Patrick, 20, 219Blueprint.css file, 18Boolean attributes, 16Bootstrap framework, 18border-box value, for box-sizing

property, 54both keyword, for wrap-flow property, 203bottom value, for object-position

property, 61Boulton, Mark, 85, 87, 221Box Alignment module, information

sources, 210, 226box-sizing property, 54–55, 207break-after property, 68–69break-before property, 68–69

break-inside property, 68–69breakpoints, 53

content, 57–59, 64, 220breaks for columns, 68–70broadband connections, 8Brown, Brennen, 10, 218browsers, 12

alert on size, 52default behavior, 90desktop, 3developer tools in, 12experimental features, enabling,

212–213implementation of client-side

validation, 154rendering modes, 14–15support, 18–19, 211–216

“business card” syntax, 29business-to-business (B2B) sites, 2

Ccaching sequence, 186–187calc() function, 55–56Camen, Kroc, 167, 175, 224camera, 116–117

accessing data stream from, 175canvas

information sources, 140, 223vs. SVG files, 138–139

canvas element, 125, 135–138captions, for media files, 167–168cascading variables, 200, 208–209,

210, 226CDATA section in SVG file, 129center value

for align-items property, 74for grid alignment properties, 83for justify-content property, 73for object-position property, 61

chaining methods in jQuery, 99change event handler, in Network

Information API, 116charging attribute, of navigator.battery

object, 114chargingchange event, in Battery Status

API, 115chargingTime attribute, of navigator.battery

object, 114chargingtimechange event, in Battery

Status API, 115charset attribute, for meta tag, 15checkValidity() method, 156

Index 229

child elements, in grid, 78Christian, Mark, 189, 225Chrome (browser), 3

enabling experimental features in, 213

Chrome for Android, Geolocation opt-in prompt, 108

Chrome Web Store, 178documentation from, 188, 225manifest file for, 179–180

Chromium, 212circle element in SVG, 127–128, 131circles, arc() method for, 136Cisco, 10, 217classes in JavaScript, interaction with,

97–98classList object, 97clear keyword, for wrap-flow property,

203–204clear() method, 118clearWatch() method, 109click event, information in

object from, 93client-side validation

disabling, 155of HTML form data, 154–156

cloneNode() method, 193closing empty elements, 16Coenraets, Christopher, 106, 222color input, 150–151color picker, 150–151color query, for ebook reader, 51column value

for break-before property, 69for flex-direction property, 71

column-count property, 66–67, 207column-fill property, 67column-gap property, 67–68column-reverse value, for flex-direction

property, 71–72column-rule property, 68column-span property, 68columns property, 67column-width property, 66–67combining media queries, 44–45comma separator, in media queries, 44comments, in .appcache file, 186complementary role, 27condition, YepNope to test, 100conditional elements, for HTML5

in IE, 25config.xml manifest file, 181

connection object, attributes, 115Constraint Validation API, 156–158

information sources, 160, 224Contacts API, 123contacts object, 183contain keyword

for object fit, 60–61for object-position property, 61

contains() method, 97, 120–121content attribute, 49content breakpoints, 57–59, 64, 220content element, 199content object, to access web

template, 193contentinfo role, 27context

for canvas element, 135for content, 28for device use, 7–9

controls attribute, for media elements, 162

cookies, 117coords child object, 108cover keyword, for object fit, 60–61create() function, for contacts object, 183createObjectURL() method, 117createShadowRoot() method, 198CreativeJS, 176, 224cross axis, in Flexbox, 73CSS

future of, 200–209Box Alignment module, 206cascading variables, 208–209Exclusions, 202–205, 210, 226feature queries, 207–208Line Grid module, 206Paged Media module, 206Pagination Templates, 206Regions, 200–202

and HTML forms, 159inheritance in, 195–196preprocessors, 208web component conflicts, 192

CSS box model, 54CSS Exclusions, 202–205CSS layouts, 65–87

browser support, 214convergence with SVG, 134–135Flexbox module, 70–78

adding flexibility, 75–76alignment inside container,

73–75

230 Index

CSS layouts, Flexbox (continued)changing content order, 71–72checking browser for

properties, 101declaring model, 70–71information sources, 87, 221wrap and flow, 76–78

Grid Layout module, 18, 78–86alignment and stacking, 83–84Exclusions and, 204–205grid declaration and definition,

79–80grid template, 85–86information sources, 87, 221key terms, 78, 79placing items on grid, 81–83repeating grid lines, 81September 2012 syntax update,

84–85terminology, 78, 85

Multi-column Layout module, 66–70

gaps and rules, 67–68information sources, 87, 221items spanning multiple rows or

columns, 82spans and breaks, 68–70

for styling SVG file, 131CSS pixel, 45CSS selectors, 96–97CSS3, 16–18

@viewport at-rule for setting viewport parameter, 49–50

frameworks and preprocessors, 18vendor-specific prefixes, 17

CSS.supports() method, 207CU-RTC-Web specification, 175currentSrc property, for media file, 170currentTarget property, of event object,

92, 96currentTime property, for media file, 170custom elements, 197–198, 210, 226

DDahlström, Erik, 139, 223data attributes, 35–37

information sources, 38, 220jQuery and, 36–37

Data Attributes API, 35–36data() method, 36

data property, for image manipulation, 137

data storage, user agents for, 117datalists, for form input suggestions,

146–147dataset property, 35datatransfer object, 120, 121datatypes, specifying for element, 120date-picker widget, 149dates, input types in forms, 148–150datetime attribute, 31datetime input, 149datetime-local input, 149Debenham, Anna, 10, 20, 218, 219debugging

in JavaScript, 105tools for, 106, 222

decorators, 194–196vs. custom elements, 197

defaultValue property, for output element, 154

defer attribute, 90–91for script element, 90–91

defs element, 132deleting item from storage, 118density-independent pixel (DIP), 45desktop browser, 3developer certificate, and PhoneGap

setup, 182developer tools in browser, 12Deveria, Alexis, 20, 218device adaptation, 48–50device APIs, 107–124

Battery Status API, 114–115browser support, 215camera and microphone, 116–117Contacts API, 123Device Storage API, 123Drag and Drop API, 119–121Firefox OS and WebAPIs, 123Fullscreen API, 111–113Geolocation API, 108–109information sources, 124, 222interacting with files, 121–123Network Information API, 115–116Orientation API, 110–111PhoneGap. See PhoneGapVibration API, 113–114Web Storage API, 117–119WebSMS API, 123WebTelephony API, 123

Index 231

device emulators, 19device libraries, 212device pixel ratio (DPR), 46, 48

media feature to target, 47Device Storage API, 123device-aspect-ratio feature, 43device-height media feature, 43deviceorientation event, on window object,

110–111devicePixelRatio DOM property, for

window object, 46deviceready event, in PhoneGap

project, 183devices, 2–7

boundaries between, 58desktop/laptop, 2–3in-betweeners, 6–7mobile, 3–4tablets, 5

device-width media feature, 43Dev.Opera, 176, 189, 224, 225DIP (density-independent pixel), 45:disabled pseudo-class, 159dischargingTime attribute, of navigator

.battery object, 114dischargingtimechange event, in Battery

Status API, 115display property, for grid element, 79div elements, 26

vs. semantic markup, 28Dive Into HTML5, 124, 222Doctype declaration, 14–15Document Object Model (DOM),

selecting elements from, 96DOMContentLoaded event, 94domready event, 94dot notation (.), for storing items, 117DPPX (dots per pixel), 46dppx unit, 47DPR (device pixel ratio), 46, 48

media feature to target, 47Drag and Drop API, 119–121

information sources, 124, 222draggable attribute, 120dragover event, 119dragstart event, 120drawImage() method, 137drop event, 119drop shadow properties, 136drop zone, 119

list of files dropped in, 121

Dublin Core, 30metadata terms, 127

duration property, for media elements, 171

Dutton, Sam, 176, 224dynamic calculations, on length values,

55–56

Eebook readers, 6, 51ECMAScript, testing for support, 51Edge Inspect (Adobe), 19element element, 197elements

closing empty, 16custom, 197–198, 210, 226draggable attribute, 120flow of content around, 202flowchart, 38, 219getting classlist of, 97

ellipse element in SVG, 127em unit, 55–56email input type, for forms, 142–143embed element, 130embedded SVG files, 130–132empty elements, closing, 16:enabled pseudo-class, 159encapsulation, 192, 196encoding video format, 168end keyword, for wrap-flow property,

203–204end value, for grid alignment

properties, 83error-checking for form input, client-

side, 154–156Essential Considerations for Crafting

Quality Media Queries (Gillenwater), 45

event handlers, adding to elements, 91event listeners, removing, 93–94event object, 92–93events, for touch-enabled input, 94–96Exact Attribute Value Selector, 27Exclusions (CSS), 202–205exitFullScreen() method, 112experimental features

browser support for, 101–102W3C standardization process

and, 66explicit entries, 186

232 Index

explicit sectioning, 23extends attribute, of element

element, 197external stylesheets, use based on

media, 40

Ffallback files, 186fallbacks, for media elements, 165–167feature phones, 3feature queries, 207–208

information sources, 210, 226feGaussianBlur element, 132feMorphology filter, 133FFmpeg, 168

information sources, 176, 224figure element, 24File API, 121–123

information sources, 124, 222file size, of images, 62File System API, 123File Writer API, 123FileReader interface, 122files, interacting with, 121–123files child object, 121fill attribute, 131fill keyword, for object fit, 60–61fillRect() method, 136filter attribute, 132Filter Effects, SVG and CSS

convergence, 134filter element, 132find() method, 97

for contacts object, 183findAll() method, 97finger-based touch screens, 50Firebug, 12

message logged in console, 12–13Firefox (browser), 3, 4

audio or video format for, 166enabling experimental

features in, 212experimental implementation of

JavaScript, 16Firefox Marketplace, 188, 225

manifest file for, 180–181Firefox OS, 4, 123

information sources, 124, 222and WebAPIs, 123

Flashas fallback, 166and iOS, 161

flex container, 70flex property, 75flex-basis property, 75Flexbox module, 70–78

adding flexibility, 75–76alignment inside container, 73–75changing content order, 71–72checking browser for properties, 101declaring model, 70–71information sources, 87, 221wrap and flow, 76–78

flex-direction property, 71combining flex-wrap with, 77

flex-end valuefor align-items property, 74for justify-content property, 73

flex-grow property, 75flex-order property, 72flex-shrink property, 75flex-start value

for align-items property, 74for justify-content property, 73

flex-wrap property, 76–77flow keyword, for wrap-through

property, 204flow of content around element, 202flow-from property, for region chain, 201flow-into property, in CSS Regions, 201fluid design, 53fn (full name), in hCard pattern, 30footer element, 22footer for section, 24foreignObject element, 133form attribute for form, 146form role, 27formnovalidate attribute, for input

element, 156forms. See HTML formsfound time, 8fraction unit (fr), for grid definition,

79–80Fragment Identifiers, SVG sprites

with, 130frameworks, in CSS3, 18full name (fn), in hCard pattern, 30Fullscreen API, 111–113

information sources, 124, 222:full-screen CSS pseudo-class, 113fullscreenchange event, 112fullScreenElement attribute, 112fullScreenEnabled attribute, 111function keywords, 134functions, anonymous vs. named, 92

Index 233

Ggame console browsers, 6

information sources, 10, 218gamma property, for orientation, 111gaps between columns, 67–68Gaussian Blur effect, for SVG

graphic, 132Geolocation API, 108–109

information sources, 124, 222geolocation object, 108getContext() method, 135getCurrentPosition() method, 108getData() method, 120getElementByClassName() method, 97getElementById() method, 96getElementByTagName() method, 96getElementsByClassName() method, 97getImageData() method, 137getItems() method, 32getSVGDocument() method, 131getUserMedia() method, 116, 138

information sources, 124, 222GIF file format, 125Gillenwater, Zoe Mickley, 45, 63, 220global scope, 208Google, 1

audio or video format for, 166Nexus, 6Webmaster pages, 34

graphics. See imagesgrayscale devices, browsers on, 51Grid Layout module, 18, 78–86

alignment and stacking, 83–84Exclusions and, 204–205grid declaration and definition,

79–80grid template, 85–86information sources, 87, 221key terms, 78, 79placing items on grid, 81–83repeating grid lines, 81September 2012 syntax update,

84–85terminology, 78, 85

grid value, for display property, 79grid-area property, 85, 86grid-column property, 85

for grid cell reference, 81–82grid-column-align property, 83grid-column-position property, 84, 85grid-columns property, 79grid-column-span property, 82, 85

grid-definition-columns property, 84grid-definition-rows property, 84grid-position property, 85grid-row property, 85

for grid cell reference, 81–82grid-row-align property, 83grid-row-position property, 84, 85grid-rows property, 79grid-row-span property, 82, 85grid-span property, 85grid-template property, 85Grigsby, Jason, 10, 218gutter, in grid, 81

HHandBrake, 168handheld devices, orientation, 44Harmony, 191Hay, Stephen, 87, 221hCard microformat, 29

mark up, 33header element, 22, 27header elements (h1 to h6), 23header for section, 24height attribute

of video element, 163–164of viewport, 41

Heilmann, Christian, 106, 221hgroup element, 22, 24Hickson, Ian, 14, 213horizontal layout, in flex container, 71hosted web apps, vs. packaged, 178–179hover state, for mouse input, 50–51html element, manifest attribute of, 185HTML forms, 141–160

browser support, 215–216client-side validation, 154–156Constraint Validation API, 156–158and CSS, 159datalists, 146–147information display for user,

151–154meter element, 152–153output element, 153–154progress bars, 151–152

information sources, 160, 223input types, 142–144new attributes, 144–146

autocomplete, 145autofocus, 144form, 146multiple, 145

234 Index

HTML forms, new attributes (continued)

placeholder, 144–145spellcheck, 145

on-screen controls and widgets, 147–150

color, 150dates, 148–150numbers, 147–148

HTML parsing, JavaScript blocking of, 90

HTML5, 13best practices, 15–16embedding SVG in, 130–132new elements, 22–26

purpose, 23–24responsive images solution, 62–63schedule for Recommendation

status, 14sectioning elements, downside of,

24–26syntax for, 16template, 14–15

HTML5 Boilerplate, 15, 20, 218HTML5 Doctor, 38, 124, 219, 222HTML5 Please, 18, 20HTML5 Rocks, 124, 210, 222, 226

on Constraint Validation API, 160, 224

on image manipulation, 140, 223HTML5 Test, 19, 20, 218HTML5Shiv, 25HTMLAudioElement interface, 169, 173HTMLMediaElement interface, 169HTMLVideoElement interface, 169HTMLVideoFormat interface, 173hybrid apps, 123, 177, 181–184

Iicons object, in manifest file, 180–181id attribute

of filter element, 132of form, 147

IE Testdrive, 139, 223iframe elements, widths of media

feature, 42images. See also SVG files

browser support, 215manipulation, 137–138problem from file size, 62

img element, 62, 128dragging, 119

implicit sectioning, 23@import at-rule, 40Indexed Database (IndexedDB)

API, 119information display for user, 151–154

meter element, 152–153output element, 153–154progress bars, 151–152

information sourceson CSS layout, 87, 221on device APIs, 124, 222on device-responsive CSS,

63–64, 220on JavaScript, 106, 221–222on HTML forms, 160, 223on HTML5, 38, 219on web platform, 20, 218

inheritance, in CSS, 195–196inherited properties, in schema, 34input elements in forms, 142–144input events

in forms, listener for, 156in JavaScript, 94–96

input mechanism media features, 50–51

input-types.html file, 143:in-range pseudo-class, 159interaction

with classes, 97–98with files, 121–123

interactive content, browser assistive technology awareness of, 26

Internet connectionimage size and, 47knowing strength of, 115–116

Internet Explorer (browser), 1, 3, 25CSS Regions in, 210, 226repetitions in grid, 81

Internet of Things (IoT), 2Internet-enabled devices,

convergence, 58invalid event, 157:invalid pseudo-class, 159iOS, and Flash, 161IoT (Internet of Things), 2iPad, 5iPhone 3GS, physical pixel count, 45, 49iPhone 4, 6iPhone 5, 46Irish, Paul, 64, 220is attribute, of element element, 197itemscope attribute, 31itemtype attribute, 32, 33–34

Index 235

JJavaScript, 89–106

browser support, 214for canvas element, 135Firefox’s experimental

implementations of, 16Firefox OS and, 123for HTML5 and IE, 25information sources, 106, 221–222libraries, 89, 98–104, 200

jQuery, 98–100Modernizr, 101–102Mustache, 102–104YepNope, 100–101

new features, 90–98addEventListener method, 91–94async and defer attributes, 90–91CSS selectors, 96–97DOMContentLoaded event, 94getElementsByClassName()

method, 97input events, 94–96interaction with classes, 97–98

polyfills and shims, 104–105revision, 191testing and debugging, 51, 105web component conflicts, 192

Jobs, Steve, 161, 175, 224Jordesign, 64, 220JPG file format, 125jQTouch, 100

information sources, 106, 221jQuery, 98–100, 200

data attributes and, 36–37information sources, 106, 221

jQuery Mobile, 100, 106, 221JS Bin, 105JS Fiddle, 105JSON text file, as manifest file, 179justify-content property, 73–74

Kkey, in Mustache, 102keyboard, on-screen, for form input, 143kind attribute, of track element, 167Kindle, 6Koblentz, Thierry, 58, 64, 220Kobo, 6Koch, Peter-Paul, 188, 225

Llabel element, 144LabUp!, 20, 219landmark roles, 26–27landscape mode, of viewport, 44lang attribute, 145latitude property, of coords object, 108Lauke, Patrick, 64, 220launch_path field, in Firefox Marketplace

manifest, 181Lawson, Bruce, 20, 144, 160, 218, 224

New Exciting Web Technologies (NEWT), 13

layout viewport, 48layouts. See CSS layoutsLearning WebGL, 140, 223length values

dynamic calculations on, 55–56relative to viewport, 56–59

level attribute, of navigator.battery object, 114

levelchange event, in Battery Status API, 115

LG Optimus Vu, 6libraries in JavaScript, 89, 98–104

jQuery, 98–100Modernizr, 101–102Mustache, 102–104YepNope, 100–101

Lie, Håkon Wium, 210, 226line element in SVG, 127lines. See also rules (lines)

in grid, 78–79link tag, declaring type for, 15–16linked SVG files, 128–130links, to script files, 90list attribute for form, 147listener

for addEventListener method, 91for state changes, 52

load event, 94load() method, for media elements, 170loading times of web pages, JavaScript

libraries and, 98localStorage object, 117location-based services, 108–109logic-less syntax, 102longitude property, of coords object, 108loop attribute, for media elements, 163Lubbers, Peter, 189, 225

236 Index

Mmain axis, in Flexbox, 73main role, 27Manian, Divya, 28, 38, 219manifest attribute, of html element, 185manifest files

information sources, 188, 225for web apps, 179–181

manifest.webapp file, 180master entries, 186matchMedia() method, 52max attribute

for date or time, 149for meter element, 152for number input type, 148

max- prefix, for media features, 42–43maximum keyword, for wrap-flow

property, 203max-width property, 60MDN (Mozilla Developer Network)

on feature queries, 210on forms, 160on Full Screen API, 215on Media API and Events, 176on media formats, 175

measurement unitfraction unit (fr), 79–80for viewport dimensions, 41

media. See multimediaMedia API, 169–173media attribute, of source element,

63, 165media elements, fallbacks, 165–167media events, 173–174media features, 40

device adaptation, 48–50dimensions as basis, 41–44input mechanism, 50–51max- and min- prefixes for, 42–43-webkit-device-pixel-ratio, 47

Media Fragments URI, 168–169media queries, 17, 40–51

browser support, 213combining and negating, 44–45comma-separated list of, 48information sources, 63, 220in JavaScript, 51–53in mobile-first methodology, 58resolution query, 47for screen resolution, 46–48

Media Queries Level 4 spec, script feature, 51

media stream, element for display, 116MediaQueryList object, 52MediaStream API, 175Meenan, Patrick, 20, 219meta tag, 15metadata, in Dublin Core, 127metadata value, for preload attribute, 163meter element, 114, 152–153metered attribute, of connection

object, 115microdata, 31–34

information sources, 38, 220rich snippets, 34Schema.org, 33–34

Microdata API, 32microformats, 29–30

information sources, 38, 219microphone, 116–117

access to data stream from, 175Microsoft, 1

and MP4 format, 166Surface, 6

milestones, in JS Bin, 105Mills, Chris, 210, 226MIME type, 165min attribute

for date or time, 149for meter element, 152for number input type, 148

min- prefix, for media features, 42–43minimum keyword, for wrap-flow

property, 203Miro Video Converter, 168mixins, 209mobile devices, 3–4

information sources, 63–64, 220media playback on, 163

mobile first methodology, 57–59Mobile First (Wroblewski), 58, 64, 220mobile libraries, information sources,

106, 221Modernizr, 101–102, 200

information sources, 106, 222Modernizr.load() method, 101modules, in CSS, 17monochrome query, for ebook reader, 51month, for date input, 149Morville, Peter, Ambient Findability,

38, 219MouseEvent interface, 96MozDev, 124, 222

on columns, 87, 221Mozilla Developer Center, 189, 225

Index 237

Mozilla Developer Network. See MDN (Mozilla Developer Network)

Mozilla, Firefox OS and WebAPIs, 123MP4 format, 166Multi-column Layout module, 66–70

gaps and rules, 67–68information sources, 87, 221items spanning multiple rows or

columns, 82spans and breaks, 68–70

multimedia, 161–176advanced interaction, 174–175browser support, 216media elements, 162–168subtitles and captions, 167–168

multiple attribute for form, 145multi-screen use, 7Mustache, 102–104

information sources, 106, 222

Nname attribute, of element element, 197name field, in Firefox Marketplace

manifest, 181named flow, in CSS Regions, 201named functions, vs. anonymous

functions, 92name-value pair, 31naming conflicts, 192native apps, 177native wrappers, 123nav element, 22navigation devices, awareness of page

structure, 26navigation role, 27navigator object, 116

vibrate() method on, 113navigator.battery object, 114negating, media queries, 44–45nesting elements, percentage

widths and, 54NetFront, on PlayStation 3, 6network entries, 186Network Information API, 115–116networkState property, 172Nintendo, 1Nintendo Wii, 6none keyword

for preload attribute, 163for wrap-through property, 204

Nook, 6

not operatorin feature queries, 207in media queries, 44

novalidate attribute, of form element, 155

nowrap value, for flex-wrap property, 76number input, 147–148Nyman, Robert, 124, 180, 188, 222, 225

Oobject element, for embedded

SVG file, 131object-fit property, 60object-position property, 60, 61–62objects

created by click event, information contained in, 93

replaced, and responsive websites, 58–63

resizing, 60sizing within container, 60

O’Callahan, Robert, 139, 223offline availability, 185.oga file extension, for audio files, 164Ogg format, 164, 166.ogv file extension, for video files, 164on() method, 99on-screen keyboard, for form input, 143on-screen prompt

to access camera or microphone, 116

for permission to enter fullscreen mode, 111–112

open device labs, 19Open Web App Manifest, 180Opera (browser), 3, 4

audio or video format for, 166Mobile Emulator, 19Presto rendering engine, 212on remote debugging, 20, 219

Opera Mini, 4Opera TV Store, 189, 225optimum attribute, for meter element, 153option child element, 146:optional pseudo-class, 159Opus format, 166or operator

comma separator in media queries as, 44

for feature queries, 207ordinal group, creating, 72

238 Index

organization, in hCard pattern, 30orientation

three-dimensional, information sources, 124, 222

of viewport, 44Orientation API, 110–111:out-of-range pseudo-class, 159output element, 153–154overflow-style property, 206

PPaciello Group Blog, 38, 219packaged web apps, vs. hosted, 178–179PadFone (Asus), 7page elements, percentages for, 53–54page structure. See also grid layout

modelsnavigation device awareness of, 26

Pagination Templates, information sources, 210, 226

parent element, and column flow, 67pattern attribute, of input type, 155pause event, in PhoneGap project, 184pause() method, for media element, 169percentages, for page elements, 53performance, 8–9

@import at-rule and, 40permanence of data storage, 117permission to enter fullscreen mode,

prompt for, 111–112PhoneGap, 123, 181, 182–184

API, 182events for, 183–184information sources, 188, 225permissions, 182

phones, 3–4physical pixel count, 45pixels, 45–46pixels per centimeter (PPC), 45pixels per inch (PPI), 45placeholder attribute for form, 144–145play event, 174play() method, for media element, 169PlayStation 3, NetFront, 6plug-ins, disadvantages, 161PNG file format, 125Pointer Events, 94, 95–96pointer feature, 50pointerup event, 95polyfills, in JavaScript, 104–105polygon element in SVG, 127portable devices, battery status, 114–115

portrait mode, of viewport, 44poster property, 173PPC (pixels per centimeter), 45PPI (pixels per inch), 45PPK, 63–64, 160, 220, 223prefixes, vendor-specific, 17preload attribute, for media

elements, 163preprocessors, 18, 208Presto rendering engine (Opera), 212preventDefault() method, 93, 119, 120progress bars, 151–152progress element, 151–152, 171prompt

to access camera or microphone, 116

for permission to enter fullscreen mode, 111–112

properties, 31inherited, in schema, 34

property-value pairs, in feature queries, 207

pseudo-classes for HTML5 forms, 159information sources, 160, 224

QquerySelector() method, 96, 137querySelectorAll() method, 96quirks mode, 14–15

Rrange element, 171range input, 147raster graphics, 46RDFa (Resource Description Format in

Attributes), 30–31, 38, 220RDFa Core, 30readability, characters in text

line and, 58readAsArrayBuffer() method, 122readAsDataURL() method, 122readAsText() method, 122:read-only pseudo-class, 159:read-write pseudo-class, 159readyState property, 173rect element in SVG, 127–128

style for, 131region chain, 201Regions (CSS), 200–202regular expressions, 155

information sources, 160, 224

Index 239

Rel-Tag microformat, 29rem (root em), 56–57remoteItem() method, 118remove() method, 97removeEventListener() method, 93–94repeat() function, 81replaced objects, and responsive

websites, 58–63requestFullScreen() method, 111–112required attribute, of input type, 154:required pseudo-class, 159Resig, John, 38, 220resizing objects, 60resolution media query, 47resolution of screen, 45Resource Description Format in

Attributes (RDFa), 30–31, 38, 220

Responsive Images Community Group, 64, 221

responsive websites, 39vs. adaptive, 53–56browser support, 213and replaced objects, 58–63

resume event, in PhoneGap project, 184RGBA color model, 137rich snippets, 34

information sources, 38, 220right value, for object-position

property, 61Robinson, Mike, 38, 219role attribute, 27root em (rem), 56–57:root selector, 208root-relative units, 56–57row value, for flex-direction property, 71row-reverse value, for flex-direction

property, 71–72rows in graph, fraction unit for, 80rows in grid, items spanning

multiple, 82Rubular, 160, 224rules (lines)

between columns, 67–68in grid, repeating, 81

SSafari (browser), 3Safari mobile, 212Samsung, 1, 189, 225Samsung Galaxy Note II, 6Samsung Galaxy S III, 6, 46

scalability, SVG and, 139Scalable Vector Graphics.

See SVG (Scalable Vector Graphics)

schema, 30Schema.org, 33–34

information sources, 38, 220Schulze, Dirk, 139, 223scoped styles, 195–196screen resolution, 45

for desktops, 3media queries for, 46–48

screen sizes, 6script element

defer attribute for, 90–91in Media Queries Level 4 spec, 51

script tag, declaring type for, 15–16scripts, initiating, 94scrolling, 206SDKs (software development kits), 19search input type, for forms, 142search role, 27section elements, 22–24sectioning, 22

downside of, 24–26implicit or explicit, 23

sectioning roots, 24sections, from Mustache, 103Seddon, Ryan, 160, 223seeking property, for media

elements, 171Seidelin, Jacob, 140, 223selector, in jQuery, 99semantic markup

browser support, 213importance of, 28–29information sources, 38, 219

semantic richness, 21session storage, 117sessionStorage object, 117setCustomValidity() method, 158setData() method, 120setItem() method, for storing item, 117Shadow DOM, 198–199

information sources, 210, 226shadow root, 198shape elements in SVG, 127shaped exclusions, 205shape-inside property, 205shape-outside property, 205shims, in JavaScript, 104–105simultaneous screening, 7

240 Index

Sitepoint, 210, 226sites. See websitessmart TVs

information sources, 189, 225Internet-connected, 184

smartphones, 3–4PPI count, 45use stereotypes, 8

snapshots, in JS Bin, 105soft keyboard, for form input, 143software development kits (SDK), 19Souder, Steve, 40source element, 62, 64, 220SourceGraphic keyword, 132space-around value, for justify-content

property, 73space-between value, for justify-content

property, 73spans for columns, 68–70speed, 8–9spellcheck attribute for form, 145sprites for icons, 129square bracket ([ ]) notation, for

storing item, 117src attribute, of track element, 167srclang attribute, of track element, 167srcset attribute, 62, 63stacking, in grid layout, 83–84standalone attribute, in XML

declaration, 127standards mode, 15Stark, Jonathan, 4, 10, 218start keyword

for grid alignment properties, 83for wrap-flow property, 203–204

statistics, information sources, 10, 217status property, of window.applicationCache

object, 187stdDeviation attribute, for feGaussianBlur

element, 132step attribute, for date or time, 149stepDown() method

for date or time, 150for number input type, 148

stepUp() methodfor date or time, 150for number input type, 148

stereotypes, context, 8Stevens, Luke, The Truth About HTML 5,

25, 38, 219storage event, 118Storey, David, 10, 218

stretch valuefor align-items property, 74for grid alignment properties, 83

stroke() method, 136structure

browser support, 213importance of, 21

structured data, 29style tag, declaring type for, 15–16styles, scoped, 195–196stylesheets

media queries to apply to viewport, 58

use of external based on media, 40subsequent screening, 7subtitles, for media files, 167–168@supports at-rule, 102, 207svg element, 127SVG (Scalable Vector Graphics)

files, 125vs. canvas, 138–139convergence with CSS, 134–135drawback, 135embedded, 130–132filters, 132–134information sources,

139–140, 223linked files, 128–130

format, 125, 126–135anatomy of image, 127–128linked files, 128–130

sprites, 129–130SVG2, 134swapCache() method, of window

.applicationCache object, 187sympathetic keyboard layout, 143

Ttablets, 5, 50tags, lowercase or uppercase

characters for, 16:target pseudo-class, 130Taubert, Tim, 138, 140, 223tel input type, for forms, 143template element, 193templates

client-side system, 102for grid, 85–86and scoped styles, 196for script tags, 104for web components, 192–194

Index 241

terminology, 12testing, 19

browsers for JavaScript support, 51in JavaScript, 105

text files, content as, 122text input, 142text tracks, for media files, 167–168Theora format, 164three-dimensional. See 3-D...timeupdate event, 171, 174Titanium, 184

information sources, 189, 225toggle() method, 98top value, for object-position

property, 61Touch Events specifications, 94–95touch-enabled input, events for, 94–96touch screens

finger-based, 50for tablets, 5

touchcancel event, 95touchend event, 95touchenter event, 95TouchEvent object, 95touchleave event, 95touchmove event, 95touchstart event, 95track child element, 167

information sources, 176, 224tracks in grid, 78, 79Transforms module, 134The Truth About HTML 5 (Stevens), 25,

38, 219TV, web-enabled, 5–6TV apps, 184Twitter, 18

data attributes use by, 37type attribute, for audio element, 165type parameter, 91typeof operator, 36

UUbuntu Phone, 6UI element states pseudo-classes, 159Unicode characters, 15unit of measure

fraction unit (fr), 79–80for viewport dimensions, 41

Universal Plug and Play (UPnP), 191update() method, of window

.applicationCache object, 187

updateready event, of window .applicationCache object, 187

UPnP (Universal Plug and Play), 191url() function, 128url input type, for forms, 142–143useCapture parameter, for

addEventListener method, 91user agents, 12. See also browsers

for data storage, 117user-defined attributes, 35:user-error pseudo-class, 159users, information display for, 151–154UTF-8, 15UX Magazine, 10, 218

V:valid pseudo-class, 159validation rule, custom, 158validation tool, for manifest files,

188, 225validationMessage property, 158validity property, 157validityState object, 157–158value attribute, for progress element, 151value property, for output element, 153valueAsDate property, 150valueAsNumber property (DOM), 148valueMissing property, 157van Kesteren, Anne, 176, 224var() function, 208variables

cascading, 200, 208–209creating with Mustache, 103

vcard class, 30vector graphics, 46

vs. bitmaps, 126vendor-specific prefixes, 17version field, in Firefox Marketplace

manifest, 181version property, in manifest file, 180vh unit, 56vibrate() method, on navigator

object, 113Vibration API, 113–114video element, 116, 162–163

additional attributes, 163–164multiple source files for, 164

video formatencoding, 168variation in browser support, 166

videoHeight attribute, 173

242 Index

videoWidth attribute, 173viewport

dimensions of, 41length units relative to, 56–59media query to apply stylesheet, 58orientation of, 44

viewport meta tag, 49@viewport at-rule, for setting viewport

parameter, 49–50Vision Mobile, 10, 217volume property, for media

elements, 171volumechange event, 174Vorbis format, 164vw unit, 56

WW3C (World Wide Web Consortium), 14

HTML5 specification, 20, 218Media Fragments specification,

176, 224widgets, 181

WAI-ARIA (Web Accessibility Initiative, Accessible Rich Internet Applications), 26, 38, 219

Walsh, David, 124, 222watchPosition() method, 109WCAG Audio Control page, 175, 224Web Accessibility Initiative, Accessible

Rich Internet Applications (WAI-ARIA), 26, 38, 219

Web Applications 1.0, 13web apps, 12, 177, 178–181

hosted vs. packaged, 178–179manifest files, 179–181

Web Audio API, 174Web Components, 37, 192–200

custom elements, 197–198decorators, 194–196Shadow DOM, 198–199templates, 192–194

web pagesexperimental features, 191–210

web components, 192–200loading times, JavaScript

libraries and, 98web platform, 13

browser support, 213technologies included, 19

Web Storage API, 117–119information sources, 124, 222

WebAPIs, 123and Firefox OS, 123

web-enabled devices, 2web-enabled TVs, 5–6WebGL, 138WebGL.com, 140, 223Webinos, 185, 189, 225WebKit engine, 4, 19WebKit Web Inspector, key:value pair

displayed in, 118-webkit-device-pixel-ratio media

feature, 47WebM format, 166, 168WebRTC project, 116, 174–175, 176, 224websites

adaptive vs. responsive, 53–56for book, 18meaning of, 12

WebSMS API, 123WebTelephony API, 123WebVtt format, 168

information sources, 176, 224week, for date input, 149weinre, 19WHATWG, 14widgets, 181, 188, 225width attribute

for video element, 163–164of viewport, 41

widthMatch() function, 52Wilcox, Matt, 64, 220

Adaptive Images, 63, 64, 221willValidate property, 156window object, deviceorientation event on,

110–111window.applicationCache object, 187window.navigator object, 108Windows 8, and tablets, 5Windows Phone, 4, 19World Wide Web Consortium (W3C), 14

HTML5 specification, 20, 218Media Fragments specification,

176, 224widgets, 181

wrap in flexbox, 76–78wrap value, for flex-wrap property, 76–77wrap-flow property, 202–203wrappers, native, 123wrap-reverse property, 77wrap-through property, 204Wroblewski, Luke, Mobile First, 58,

64, 220

Index 243

Xx -axis, 110

rotation around, 111XML file

manifest file as, 179SVG file format as, 127Widget manifest file as, 181

X-Tags, 210, 226

Yy -axis, 110

rotation around, 111YepNope, 100–101

information sources, 106, 221properties used in Modernizr, 102

Zz-axis, 110

rotation around, 111z-index property, 84Zakas, Nicholas, 124, 222Zepto, 100

information sources, 106, 221zoom level, user control over, 49zoomed-out view, 48