The Modern Web

Previous Chapter

Chapter 11: The Future

About the Author

Index

A note on the digital index

A link in an index entry is displayed as the section title in which that entry appears. Because some sections have multiple index markers, it is not unusual for an entry to have several links to the same section. Clicking on any link will take you directly to the place in the text in which the marker appears.

Symbols

-webkit-device-pixel-ratio media feature, Screen Resolution Media Queries

. (dot) notation, for storing items, Camera and Microphone

.appcache file, Webinos, Contents of the AppCache File

.oga file extension, for audio files, Extra Attributes for the video Element

.ogv file extension, for video files, Extra Attributes for the video Element

3-D axes, Orientation

3-D context

detecting device position in, Orientation
WebGL for, Image Manipulation

3-D orientation, information sources, Summary, Chapter 5: Modern JavaScript

:disabled pseudo-class, Forms and CSS

:enabled pseudo-class, Forms and CSS

:full-screen CSS pseudo-class, Fullscreen

:in-range pseudo-class, Forms and CSS

:invalid pseudo-class, Forms and CSS

:optional pseudo-class, Forms and CSS

:out-of-range pseudo-class, Forms and CSS

:read-only pseudo-class, Forms and CSS

:read-write pseudo-class, Forms and CSS

:required pseudo-class, Forms and CSS

:root selector, Feature Queries

:target pseudo-class, SVG Sprites

:user-error pseudo-class, Forms and CSS

:valid pseudo-class, Forms and CSS

@import at-rule, Media Queries, Media Queries

@supports at-rule, Modernizr, Modernizr, Feature Queries, Feature Queries

@viewport at-rule, for setting viewport parameter, Device Adaptation, Device Adaptation

[] (square bracket) notation, for storing items, Camera and Microphone

“business card” syntax, The Importance of Semantic Markup

A

a element, dragging, Web Storage

aboutness, The Importance of Semantic Markup

activeElement() attribute, Embedded SVG

Adaptive Images tool, The HTML5 Responsive Images Solution, Further Reading, Chapter 3: Device-Responsive CSS

adaptive websites, Device-Responsive CSS

vs. responsive, Media Queries in JavaScript

add() method, CSS Selectors in JavaScript

addEventListener method, The addEventListener Method

Adobe, Introduction, PhoneGap, Further Reading, Chapter 11: The Future

Edge Inspect, Browser Support
open standards, Putting It All Together

agents, detecting dimension, Media Queries

align-content property, Wrap and Flow

align-items property, Alignment Inside the Container

align-self property, Alignment Inside the Container

alignment

in Flexbox, Alignment Inside the Container
in grid layout, Placing Items on the Grid

all media type, for media queries, Media Features Based on Dimensions

all value, for column-span property, Gaps and Rules

almost standards mode, The HTML5 Template

alpha property, for orientation, Orientation

alt attribute, for picture element, The Image Problem

Amazon Kindle, TV

Ambient Findability (Morville), Further Reading, Chapter 1: The Web Platform

and operator

for feature queries, Feature Queries
for media queries, Media Features Based on Dimensions

Android, Browser Support

browsers, The Browsers in Question

anonymous functions

removing from event handlers, Removing Event Listeners
vs. named functions, The addEventListener Method

Apache Cordova, PhoneGap

APIs (see device APIs; specific APIs)

app object, in manifest file, The Chrome Web Store

AppCache (Application Cache), Web Apps, Webinos

caching sequence, Contents of the AppCache File
documentation, Further Reading, Chapter 10: Web Apps

Appcelerator Titanium, PhoneGap Events

appendChild() method, Templates

Apple, and MP4 format, Fallbacks

Application Cache (see AppCache (Application Cache))

application role, WAI-ARIA

applications (see TV apps; web apps)

arc() method, The canvas Element

Archibald, Jake, Webinos

areas in grid, Wrap and Flow, Declaring and Defining the Grid

aria-haspopup attribute, The Downside of HTML5 Sectioning Elements

article element, Structure and Semantics

width of, Mobile First and Content Breakpoints

aside element, Structure and Semantics

aspect ratio

maintaining, Responsive Design and Replaced Objects
of device or viewport, Media Features Based on Dimensions

assistive technology

automatic focus and, New Input Types
browser awareness of interactive content, The Downside of HTML5 Sectioning Elements

asynchronous execution of scripts, New in JavaScript

Atkins, Tab, The September 2012 Grid Layout Syntax

audio element, Network Information, Multimedia

multiple source files for, Extra Attributes for the video Element

audio format, variation in browser support, Fallbacks

audio() method, Network and Ready States

AudioContext() method, Media Events

auto value

for column-fill property, Multi-columns
for height property, Responsive Design and Replaced Objects
for preload attribute, The Media Elements

autocomplete attribute for form, placeholder

autofocus attribute for form, New Input Types

autoplay attribute, for media elements, The Media Elements

avoid-column value, for break-before property, Spans and Breaks

axes

in Flexbox, Alignment Inside the Container
in Orientation API, Orientation

B

B2B (business-to-business) sites, Introduction

balance value, for column-fill property, Multi-columns

bandwidth attribute, of connection object, Battery Status

banner role, WAI-ARIA

baseline value, for align-items property, Alignment Inside the Container

Battery Status API, Vibration

information sources, Summary, Chapter 5: Modern JavaScript

battery, vibrating impact on, Fullscreen

beta property, for orientation, Orientation

Beverloo, Peter, Summary, Chapter 3: Device-Responsive CSS

Bidelman, Eric, Cascading Variables, Chapter 10: Web Apps

bitmap images, A Quick Digression: All About Pixels

vs. vector graphics, Images and Graphics

Blackberry, Browser Support

blockquote element, What’s the Point?

Blooman, Patrick, Summary, Chapter 1: The Web Platform

Blueprint.css file, CSS Frameworks and Preprocessors

Boolean attributes, New Best Practices

Bootstrap framework, CSS Frameworks and Preprocessors

border-box value, for box-sizing property, Adaptive vs. Responsive Web Design

both keyword, for wrap-flow property, Exclusions

bottom value, for object-position property, Responsive Design and Replaced Objects

Boulton, Mark, The September 2012 Grid Layout Syntax, Further Reading, Chapter 3: Device-Responsive CSS

Box Alignment module, information sources, Further Reading, Chapter 11: The Future

box-sizing property, Adaptive vs. Responsive Web Design, Feature Queries

break-after property, Gaps and Rules

break-before property, Gaps and Rules

break-inside property, Gaps and Rules

breakpoints, Media Queries in JavaScript

content, Root-Relative Units, Further Reading, Chapter 2: Structure and Semantics

breaks for columns, Gaps and Rules

broadband connections, Context: What We Don’t Know

Brown, Brennen, Further Reading, Introduction

browsers, A Quick Note About Terminology

alert on size, Media Queries in JavaScript
default behavior, New in JavaScript
desktop, Desktop/Laptop
developer tools in, A Quick Note About Terminology
experimental features, enabling, The Browsers in Question
implementation of client-side validation, output
rendering modes, The Real HTML5
support, CSS Frameworks and Preprocessors, Browser Support as of March 2013

business-to-business (B2B) sites, Introduction

C

caching sequence, Contents of the AppCache File

calc() function, The box-sizing Property

Camen, Kroc, Fallbacks, WebRTC, Chapter 8: New Forms

camera, Network Information

accessing data stream from, WebRTC

canvas

information sources, Further Reading, Chapter 7: Images and Graphics
vs. SVG files, Image Manipulation

canvas element, Images and Graphics, The Convergence of SVG and CSS

captions, for media files, Fallbacks

cascading variables, Putting It All Together, Feature Queries, Further Reading, Chapter 11: The Future

CDATA section in SVG file, SVG Sprites

center value

for align-items property, Alignment Inside the Container
for grid alignment properties, Placing Items on the Grid
for justify-content property, Alignment Inside the Container
for object-position property, Responsive Design and Replaced Objects

chaining methods in jQuery, jQuery

change event handler, in Network Information API, Network Information

charging attribute, of navigator.battery object, Vibration

chargingchange event, in Battery Status API, Battery Status

chargingTime attribute, of navigator.battery object, Vibration

chargingtimechange event, in Battery Status API, Battery Status

charset attribute, for meta tag, The HTML5 Template

checkValidity() method, Client-side Form Validation

child elements, in grid, Wrap and Flow

Christian, Mark, Further Reading, Chapter 10: Web Apps

Chrome (browser), Desktop/Laptop

enabling experimental features in, Enabling Experimental Features

Chrome for Android, Geolocation opt-in prompt, Device Apis

Chrome Web Store, Web Apps

documentation from, The AppCache API, Chapter 10: Web Apps
manifest file for, Hosted Web Apps

Chromium, The Browsers in Question

circle element in SVG, Scalable Vector Graphics, Embedded SVG

circles, arc() method for, The canvas Element

Cisco, Further Reading, Further Reading

classes in JavaScript, interaction with, CSS Selectors in JavaScript

classList object, CSS Selectors in JavaScript

clear keyword, for wrap-flow property, Exclusions

clear() method, Web Storage

clearWatch() method, Geolocation

click event, information in object from, The event Object

client-side validation

disabling, Client-side Form Validation
of HTML form data, output

cloneNode() method, Templates

closing empty elements, New Best Practices

Coenraets, Christopher, Summary, Chapter 5: Modern JavaScript

color input, Dates

color picker, Dates

color query, for ebook reader, Input Mechanism Media Features

column value

for break-before property, Spans and Breaks
for flex-direction property, Declaring the Flexbox Model

column-count property, New Approaches to CSS Layouts, Feature Queries

column-fill property, Multi-columns

column-gap property, Multi-columns

column-reverse value, for flex-direction property, Declaring the Flexbox Model

column-rule property, Gaps and Rules

column-span property, Gaps and Rules

column-width property, New Approaches to CSS Layouts

columns property, Multi-columns

combining media queries, Media Features Based on Dimensions

comma separator, in media queries, Media Features Based on Dimensions

comments, in .appcache file, Contents of the AppCache File

complementary role, WAI-ARIA

condition, YepNope to test, jQuery

conditional elements, for HTML5 in IE, The Downside of HTML5 Sectioning Elements

config.xml manifest file, The Firefox Marketplace

connection object, attributes, Battery Status

Constraint Validation API, Client-side Form Validation

information sources, Summary, Chapter 8: New Forms

Contacts API, Interacting with Files

contacts object, The PhoneGap API

contain keyword

for object fit, Responsive Design and Replaced Objects
for object-position property, Responsive Design and Replaced Objects

contains() method, CSS Selectors in JavaScript, Drag and Drop

content attribute, Device Adaptation

content breakpoints, Root-Relative Units, Further Reading, Chapter 2: Structure and Semantics

content element, The Shadow DOM

content object, to access web template, Templates

contentinfo role, WAI-ARIA

context

for canvas element, The Convergence of SVG and CSS
for content, The Importance of Semantic Markup
for device use, The In Betweeners

controls attribute, for media elements, Multimedia

cookies, Camera and Microphone

coords child object, Device Apis

cover keyword, for object fit, Responsive Design and Replaced Objects

create() function, for contacts object, The PhoneGap API

createObjectURL() method, Camera and Microphone

createShadowRoot() method, Custom Elements

CreativeJS, Further Reading, Chapter 8: New Forms

cross axis, in Flexbox, Alignment Inside the Container

CSS

and HTML forms, Forms and CSS

future of, Putting It All Together

Box Alignment module, Even Further Future Layouts
cascading variables, Feature Queries
Exclusions, Exclusions, Further Reading, Chapter 11: The Future
feature queries, Feature Queries
Line Grid module, Even Further Future Layouts
Paged Media module, Even Further Future Layouts
Pagination Templates, Even Further Future Layouts
Regions, Putting It All Together

inheritance in, Decorators

preprocessors, Feature Queries

web component conflicts, Web Components

CSS box model, Adaptive vs. Responsive Web Design

CSS Exclusions, Exclusions

CSS layouts, New Approaches to CSS Layouts

browser support, Chapter 3: Device-Responsive CSS

convergence with SVG, SVG Filters

Flexbox module, Spans and Breaks

adding flexibility, Alignment Inside the Container
alignment inside container, Alignment Inside the Container
changing content order, Declaring the Flexbox Model
checking browser for properties, YepNope
declaring model, Spans and Breaks
information sources, Further Reading, Chapter 3: Device-Responsive CSS
wrap and flow, Adding Some Flexibility

for styling SVG file, Embedded SVG

Grid Layout module, CSS Frameworks and Preprocessors, Wrap and Flow

alignment and stacking, Placing Items on the Grid
Exclusions and, Exclusions
grid declaration and definition, Declaring and Defining the Grid
grid template, The September 2012 Grid Layout Syntax
information sources, Further Reading, Chapter 3: Device-Responsive CSS
key terms, Wrap and Flow, Declaring and Defining the Grid
placing items on grid, Repeating Grid Lines
repeating grid lines, Repeating Grid Lines
September 2012 syntax update, Alignment and Stacking
terminology, Wrap and Flow, The September 2012 Grid Layout Syntax

Multi-column Layout module, New Approaches to CSS Layouts

gaps and rules, Multi-columns
information sources, Further Reading, Chapter 3: Device-Responsive CSS
items spanning multiple rows or columns, Placing Items on the Grid
spans and breaks, Gaps and Rules

CSS pixel, Combining and Negating Media Queries

CSS selectors, Pointer Events

CSS.supports() method, Feature Queries

CSS3, New Best Practices

@viewport at-rule for setting viewport parameter, Device Adaptation
frameworks and preprocessors, CSS Frameworks and Preprocessors
vendor-specific prefixes, CSS3 and Beyond

CU-RTC-Web specification, WebRTC

currentSrc property, for media file, The Media API

currentTarget property, of event object, The addEventListener Method, Pointer Events

currentTime property, for media file, The Media API

custom elements, Custom Elements, Further Reading, Chapter 11: The Future

D

Dahlström, Erik, When to Choose SVG or Canvas, Chapter 7: Images and Graphics

data attributes, Data Attributes

information sources, Further Reading, Chapter 2: Structure and Semantics
jQuery and, The Data Attributes API

Data Attributes API, Data Attributes

data property, for image manipulation, Image Manipulation

data storage, user agents for, Camera and Microphone

data() method, The Data Attributes API

datalists, for form input suggestions, form

dataset property, Data Attributes

datatransfer object, Drag and Drop, Drag and Drop

datatypes, specifying for element, Drag and Drop

date-picker widget, Dates

dates, input types in forms, Numbers

datetime attribute, RDFa

datetime input, Dates

datetime-local input, Dates

Debenham, Anna, Further Reading, Summary, Introduction, Chapter 1: The Web Platform

debugging

in JavaScript, Polyfills and Shims
tools for, Summary, Chapter 5: Modern JavaScript

decorators, Templates

vs. custom elements, Custom Elements

defaultValue property, for output element, output

defer attribute, New in JavaScript

for script element, New in JavaScript

defs element, Embedded SVG

deleting item from storage, Web Storage

density-independent pixel (DIP), Combining and Negating Media Queries

desktop browser, Desktop/Laptop

Dev.Opera, Further Reading, Further Reading, Chapter 8: New Forms, Chapter 10: Web Apps

developer certificate, and PhoneGap setup, PhoneGap

developer tools in browser, A Quick Note About Terminology

Deveria, Alexis, Summary, Introduction

device adaptation, Screen Resolution Media Queries

device APIs, Device Apis

Battery Status API, Vibration
browser support, Chapter 6: Device APIs
camera and microphone, Network Information
Contacts API, Interacting with Files
Device Storage API, Interacting with Files
Drag and Drop API, Web Storage
Firefox OS and WebAPIs, Interacting with Files
Fullscreen API, Orientation
Geolocation API, Device Apis
information sources, Summary, Chapter 5: Modern JavaScript
interacting with files, Drag and Drop
Network Information API, Battery Status
Orientation API, Orientation
PhoneGap (see PhoneGap)
Vibration API, Fullscreen
Web Storage API, Camera and Microphone
WebSMS API, Interacting with Files
WebTelephony API, Interacting with Files

device emulators, Browser Support

device libraries, The Browsers in Question

device pixel ratio (DPR), A Quick Digression: All About Pixels, Screen Resolution Media Queries

media feature to target, Screen Resolution Media Queries

Device Storage API, Interacting with Files

device-aspect-ratio feature, Media Features Based on Dimensions

device-height media feature, Media Features Based on Dimensions

device-width media feature, Media Features Based on Dimensions

deviceorientation event, on window object, Orientation

devicePixelRatio DOM property, for window object, A Quick Digression: All About Pixels

deviceready event, in PhoneGap project, The PhoneGap API

devices, Introduction

boundaries between, Mobile First and Content Breakpoints
desktop/laptop, Introduction
in-betweeners, TV
mobile, Desktop/Laptop
tablets, Tablet

DIP (density-independent pixel), Combining and Negating Media Queries

dischargingTime attribute, of navigator.battery object, Vibration

dischargingtimechange event, in Battery Status API, Battery Status

display property, for grid element, Declaring and Defining the Grid

div elements, The Downside of HTML5 Sectioning Elements

vs. semantic markup, The Importance of Semantic Markup

Dive Into HTML5, Summary, Chapter 5: Modern JavaScript

Doctype declaration, The Real HTML5

Document Object Model (DOM), selecting elements from, Pointer Events

DOMContentLoaded event, Removing Event Listeners

domready event, Removing Event Listeners

dot notation (.), for storing items, Camera and Microphone

DPPX (dots per pixel), A Quick Digression: All About Pixels

dppx unit, Screen Resolution Media Queries

DPR (device pixel ratio), A Quick Digression: All About Pixels, Screen Resolution Media Queries

media feature to target, Screen Resolution Media Queries

Drag and Drop API, Web Storage

information sources, Summary, Chapter 5: Modern JavaScript

draggable attribute, Drag and Drop

dragover event, Web Storage

dragstart event, Drag and Drop

drawImage() method, Image Manipulation

drop event, Web Storage

drop shadow properties, The canvas Element

drop zone, Web Storage

list of files dropped in, Drag and Drop

Dublin Core, Microformats

metadata terms, Scalable Vector Graphics

duration property, for media elements, The Media API

Dutton, Sam, Further Reading, Chapter 8: New Forms

dynamic calculations, on length values, The box-sizing Property

E

ebook readers, TV, Input Mechanism Media Features

ECMAScript, testing for support, Input Mechanism Media Features

Edge Inspect (Adobe), Browser Support

element element, Custom Elements

elements

closing empty, New Best Practices
custom, Custom Elements, Further Reading, Chapter 11: The Future
draggable attribute, Drag and Drop
flow of content around, Exclusions
flowchart, Further Reading, Chapter 1: The Web Platform
getting classlist of, CSS Selectors in JavaScript

ellipse element in SVG, Scalable Vector Graphics

em unit, The box-sizing Property

email input type, for forms, New Forms

embed element, SVG Sprites

embedded SVG files, SVG Sprites

empty elements, closing, New Best Practices

encapsulation, Web Components, Scoped Styles

encoding video format, Subtitles and Captions

end keyword, for wrap-flow property, Exclusions

end value, for grid alignment properties, Placing Items on the Grid

error-checking for form input, client-side, output

Essential Considerations for Crafting Quality Media Queries (Gillenwater), Combining and Negating Media Queries

event handlers, adding to elements, The addEventListener Method

event listeners, removing, The event Object

event object, The addEventListener Method

events, for touch-enabled input, Removing Event Listeners

Exact Attribute Value Selector, WAI-ARIA

Exclusions (CSS), Exclusions

exitFullScreen() method, Fullscreen

experimental features

browser support for, YepNope
W3C standardization process and, New Approaches to CSS Layouts

explicit entries, Contents of the AppCache File

explicit sectioning, New Elements in HTML5

extends attribute, of element element, Custom Elements

external stylesheets, use based on media, Media Queries

F

fallback files, Contents of the AppCache File

fallbacks, for media elements, Multiple Source Files

feature phones, Desktop/Laptop

feature queries, Feature Queries

information sources, Further Reading, Chapter 11: The Future

feGaussianBlur element, Embedded SVG

feMorphology filter, SVG Filters

FFmpeg, Subtitles and Captions

information sources, Further Reading, Chapter 8: New Forms

figure element, What’s the Point?

File API, Drag and Drop

information sources, Summary, Chapter 5: Modern JavaScript

file size, of images, The Image Problem

File System API, Interacting with Files

File Writer API, Interacting with Files

FileReader interface, Interacting with Files

files child object, Drag and Drop

files, interacting with, Drag and Drop

fill attribute, Embedded SVG

fill keyword, for object fit, Responsive Design and Replaced Objects

fillRect() method, The canvas Element

filter attribute, Embedded SVG

Filter Effects, SVG and CSS convergence, SVG Filters

filter element, Embedded SVG

find() method, CSS Selectors in JavaScript

for contacts object, The PhoneGap API

findAll() method, CSS Selectors in JavaScript

finger-based touch screens, Device Adaptation

Firebug, A Quick Note About Terminology

message logged in console, A Quick Note About Terminology

Firefox (browser), Desktop/Laptop, Mobile

audio or video format for, Fallbacks
enabling experimental features in, The Browsers in Question
experimental implementation of JavaScript, New Best Practices

Firefox Marketplace, The AppCache API, Chapter 10: Web Apps

manifest file for, The Chrome Web Store

Firefox OS, Mobile, Interacting with Files

and WebAPIs, Interacting with Files
information sources, Summary, Chapter 5: Modern JavaScript

Flash

and iOS, Multimedia
as fallback, Fallbacks

flex container, Spans and Breaks

flex property, Alignment Inside the Container

flex-basis property, Alignment Inside the Container

flex-direction property, Declaring the Flexbox Model

combining flex-wrap with, Wrap and Flow

flex-end value

for align-items property, Alignment Inside the Container
for justify-content property, Alignment Inside the Container

flex-grow property, Alignment Inside the Container

flex-order property, Changing the Content Order

flex-shrink property, Alignment Inside the Container

flex-start value

for align-items property, Alignment Inside the Container
for justify-content property, Alignment Inside the Container

flex-wrap property, Adding Some Flexibility

Flexbox module, Spans and Breaks

adding flexibility, Alignment Inside the Container
alignment inside container, Alignment Inside the Container
changing content order, Declaring the Flexbox Model
checking browser for properties, YepNope
declaring model, Spans and Breaks
information sources, Further Reading, Chapter 3: Device-Responsive CSS
wrap and flow, Adding Some Flexibility

flow keyword, for wrap-through property, Exclusions

flow of content around element, Exclusions

flow-from property, for region chain, Regions

flow-into property, in CSS Regions, Regions

fluid design, Media Queries in JavaScript

fn (full name), in hCard pattern, Microformats

footer element, Structure and Semantics

footer for section, What’s the Point?

foreignObject element, SVG Filters

form attribute for form, form

form role, WAI-ARIA

formnovalidate attribute, for input element, Client-side Form Validation

forms (see HTML forms)

found time, Context: What We Don’t Know

fraction unit (fr), for grid definition, Declaring and Defining the Grid

Fragment Identifiers, SVG sprites with, SVG Sprites

frameworks, in CSS3, CSS Frameworks and Preprocessors

full name (fn), in hCard pattern, Microformats

Fullscreen API, Orientation

information sources, Summary, Chapter 5: Modern JavaScript

fullscreenchange event, Fullscreen

fullScreenElement attribute, Fullscreen

fullScreenEnabled attribute, Orientation

function keywords, SVG Filters

functions, anonymous vs. named, The addEventListener Method

G

game console browsers, TV

information sources, Further Reading, Introduction

gamma property, for orientation, Orientation

gaps between columns, Multi-columns

Gaussian Blur effect, for SVG graphic, Embedded SVG

Geolocation API, Device Apis

information sources, Summary, Chapter 5: Modern JavaScript

geolocation object, Device Apis

getContext() method, The Convergence of SVG and CSS

getCurrentPosition() method, Device Apis

getData() method, Drag and Drop

getElementByClassName() method, CSS Selectors in JavaScript

getElementById() method, Pointer Events

getElementByTagName() method, Pointer Events

getElementsByClassName() method, CSS Selectors in JavaScript

getImageData() method, Image Manipulation

getItems() method, Microdata

getSVGDocument() method, Embedded SVG

getUserMedia() method, Network Information, Image Manipulation

information sources, Summary, Chapter 5: Modern JavaScript

GIF file format, Images and Graphics

Gillenwater, Zoe Mickley, Combining and Negating Media Queries, The HTML5 Responsive Images Solution, Chapter 2: Structure and Semantics

global scope, Feature Queries

Google, Introduction

audio or video format for, Fallbacks
Nexus, TV
Webmaster pages, Schema.org

graphics (see images)

grayscale devices, browsers on, Input Mechanism Media Features

Grid Layout module, CSS Frameworks and Preprocessors, Wrap and Flow

alignment and stacking, Placing Items on the Grid
Exclusions and, Exclusions
grid declaration and definition, Declaring and Defining the Grid
grid template, The September 2012 Grid Layout Syntax
information sources, Further Reading, Chapter 3: Device-Responsive CSS
key terms, Wrap and Flow, Declaring and Defining the Grid
placing items on grid, Repeating Grid Lines
repeating grid lines, Repeating Grid Lines
September 2012 syntax update, Alignment and Stacking
terminology, Wrap and Flow, The September 2012 Grid Layout Syntax

grid value, for display property, Declaring and Defining the Grid

grid-area property, The September 2012 Grid Layout Syntax, Grid Template

grid-column property, The September 2012 Grid Layout Syntax

for grid cell reference, Repeating Grid Lines

grid-column-align property, Placing Items on the Grid

grid-column-position property, Alignment and Stacking, The September 2012 Grid Layout Syntax

grid-column-span property, Placing Items on the Grid, The September 2012 Grid Layout Syntax

grid-columns property, Declaring and Defining the Grid

grid-definition-columns property, Alignment and Stacking

grid-definition-rows property, Alignment and Stacking

grid-position property, The September 2012 Grid Layout Syntax

grid-row property, The September 2012 Grid Layout Syntax

for grid cell reference, Repeating Grid Lines

grid-row-align property, Placing Items on the Grid

grid-row-position property, Alignment and Stacking, The September 2012 Grid Layout Syntax

grid-row-span property, Placing Items on the Grid, The September 2012 Grid Layout Syntax

grid-rows property, Declaring and Defining the Grid

grid-span property, The September 2012 Grid Layout Syntax

grid-template property, The September 2012 Grid Layout Syntax

Grigsby, Jason, Further Reading, Introduction

gutter, in grid, Repeating Grid Lines

H

HandBrake, Subtitles and Captions

handheld devices, orientation, Media Features Based on Dimensions

Harmony, The Future

Hay, Stephen, Further Reading, Chapter 3: Device-Responsive CSS

hCard microformat, The Importance of Semantic Markup

mark up, Microdata, Microformats, and RDFa

header element, Structure and Semantics, WAI-ARIA

header elements (h1 to h6), New Elements in HTML5

header for section, What’s the Point?

height attribute

of video element, The Media Elements
of viewport, Media Queries

Heilmann, Christian, Summary, Chapter 3: Device-Responsive CSS

hgroup element, Structure and Semantics, What’s the Point?

Hickson, Ian, The Real HTML5, Enabling Experimental Features

horizontal layout, in flex container, Declaring the Flexbox Model

hosted web apps, vs. packaged, Web Apps

hover state, for mouse input, Device Adaptation

html element, manifest attribute of, Webinos

HTML forms, New Forms

and CSS, Forms and CSS

browser support, Chapter 6: Device APIs

client-side validation, output

Constraint Validation API, Client-side Form Validation

datalists, form

information display for user, Displaying Information to the User

meter element, progress
output element, meter
progress bars, Displaying Information to the User

information sources, Summary, Chapter 7: Images and Graphics

input types, New Forms

new attributes, New Input Types

autocomplete, placeholder
autofocus, New Input Types
form, form
multiple, placeholder
placeholder, New Input Types
spellcheck, placeholder

on-screen controls and widgets, Datalists

color, Dates
dates, Numbers
numbers, Datalists

HTML parsing, JavaScript blocking of, New in JavaScript

HTML5, Who You Are and What You Need to Know

best practices, The HTML5 Template

embedding SVG in, SVG Sprites

new elements, Structure and Semantics

purpose, New Elements in HTML5

responsive images solution, The Image Problem

schedule for Recommendation status, The Real HTML5

sectioning elements, downside of, What’s the Point?

syntax for, New Best Practices

template, The Real HTML5

HTML5 Boilerplate, The HTML5 Template, Summary, Introduction

HTML5 Doctor, Further Reading, Summary, Chapter 1: The Web Platform, Chapter 5: Modern JavaScript

HTML5 Please, CSS Frameworks and Preprocessors, Summary

HTML5 Rocks, Summary, Further Reading, Chapter 5: Modern JavaScript, Chapter 11: The Future

on Constraint Validation API, Summary, Chapter 8: New Forms
on image manipulation, Further Reading, Chapter 7: Images and Graphics

HTML5 Test, Browser Support, Summary, Introduction

HTML5Shiv, The Downside of HTML5 Sectioning Elements

HTMLAudioElement interface, Media Fragments, Network and Ready States

HTMLMediaElement interface, Media Fragments

HTMLVideoElement interface, Media Fragments

HTMLVideoFormat interface, Network and Ready States

hybrid apps, Interacting with Files, Web Apps, The Firefox Marketplace

I

icons object, in manifest file, The Chrome Web Store

id attribute

of filter element, Embedded SVG
of form, Datalists

IE Testdrive, When to Choose SVG or Canvas, Chapter 7: Images and Graphics

iframe elements, widths of media feature, Media Features Based on Dimensions

images, Anatomy of an SVG Image

(see also SVG files)
browser support, Chapter 6: Device APIs
manipulation, Image Manipulation
problem from file size, The Image Problem

img element, The Image Problem, Anatomy of an SVG Image

dragging, Web Storage

implicit sectioning, New Elements in HTML5

Indexed Database (IndexedDB) API, Web Storage

information display for user, Displaying Information to the User

meter element, progress
output element, meter
progress bars, Displaying Information to the User

information sources

on CSS layout, Further Reading, Chapter 3: Device-Responsive CSS
on device APIs, Summary, Chapter 5: Modern JavaScript
on device-responsive CSS, The HTML5 Responsive Images Solution, Chapter 2: Structure and Semantics
on HTML forms, Summary, Chapter 7: Images and Graphics
on HTML5, Further Reading, Chapter 1: The Web Platform
on JavaScript, Summary, Chapter 3: Device-Responsive CSS
on web platform, Summary, Introduction

inheritance, in CSS, Decorators

inherited properties, in schema, Schema.org

input elements in forms, New Forms

input events

in forms, listener for, Client-side Form Validation
in JavaScript, Removing Event Listeners

input mechanism media features, Device Adaptation

input-types.html file, New Input Types

interaction

with classes, CSS Selectors in JavaScript
with files, Drag and Drop

interactive content, browser assistive technology awareness of, The Downside of HTML5 Sectioning Elements

Internet connection

image size and, Screen Resolution Media Queries
knowing strength of, Battery Status

Internet Explorer (browser), Introduction, Desktop/Laptop, The Downside of HTML5 Sectioning Elements

CSS Regions in, Further Reading, Chapter 11: The Future
repetitions in grid, Repeating Grid Lines

Internet of Things (IoT), Introduction

Internet-enabled devices, convergence, Mobile First and Content Breakpoints

invalid event, The Constraint Validation API

iOS, and Flash, Multimedia

IoT (Internet of Things), Introduction

iPad, Tablet

iPhone 3GS, physical pixel count, Combining and Negating Media Queries, Device Adaptation

iPhone 4, TV

iPhone 5, A Quick Digression: All About Pixels

Irish, Paul, Further Reading, Chapter 2: Structure and Semantics

is attribute, of element element, Custom Elements

itemscope attribute, RDFa

itemtype attribute, Microdata, Microdata, Microformats, and RDFa

J

JavaScript, Modern JavaScript

browser support, Chapter 3: Device-Responsive CSS

Firefox OS and, Interacting with Files

Firefox’s experimental implementations of, New Best Practices

for canvas element, The Convergence of SVG and CSS

for HTML5 and IE, The Downside of HTML5 Sectioning Elements

information sources, Summary, Chapter 3: Device-Responsive CSS

libraries, Modern JavaScript, Interacting with Classes, Putting It All Together

jQuery, Interacting with Classes
Modernizr, YepNope
Mustache, Modernizr
YepNope, jQuery

new features, New in JavaScript

addEventListener method, The addEventListener Method
async and defer attributes, New in JavaScript
CSS selectors, Pointer Events
DOMContentLoaded event, Removing Event Listeners
getElementsByClassName() method, CSS Selectors in JavaScript
input events, Removing Event Listeners
interaction with classes, CSS Selectors in JavaScript

polyfills and shims, Mustache

revision, The Future

testing and debugging, Input Mechanism Media Features, Polyfills and Shims

web component conflicts, Web Components

Jobs, Steve, Multimedia, WebRTC, Chapter 8: New Forms

Jordesign, Further Reading, Chapter 2: Structure and Semantics

JPG file format, Images and Graphics

jQTouch, jQuery

information sources, Summary, Chapter 3: Device-Responsive CSS

jQuery, Interacting with Classes, Putting It All Together

data attributes and, The Data Attributes API
information sources, Summary, Chapter 3: Device-Responsive CSS

jQuery Mobile, jQuery, Summary, Chapter 3: Device-Responsive CSS

JS Bin, Polyfills and Shims

JS Fiddle, Polyfills and Shims

JSON text file, as manifest file, Hosted Web Apps

justify-content property, Alignment Inside the Container

K

key, in Mustache, Modernizr
keyboard, on-screen, for form input, New Input Types
kind attribute, of track element, Fallbacks
Kindle, TV
Koblentz, Thierry, Mobile First and Content Breakpoints, Further Reading, Chapter 2: Structure and Semantics
Kobo, TV
Koch, Peter-Paul, The AppCache API, Chapter 10: Web Apps

L

label element, New Input Types

LabUp!, Summary, Chapter 1: The Web Platform

landmark roles, The Downside of HTML5 Sectioning Elements

landscape mode, of viewport, Media Features Based on Dimensions

lang attribute, placeholder

latitude property, of coords object, Device Apis

Lauke, Patrick, Further Reading, Chapter 2: Structure and Semantics

launch_path field, in Firefox Marketplace manifest, The Firefox Marketplace

Lawson, Bruce, Summary, New Input Types, Summary, Introduction, Chapter 8: New Forms

New Exciting Web Technologies (NEWT), Who You Are and What You Need to Know

layout viewport, Screen Resolution Media Queries

layouts (see CSS layouts)

Learning WebGL, Further Reading, Chapter 7: Images and Graphics

length values

dynamic calculations on, The box-sizing Property
relative to viewport, Dynamic Calculations on Length Values

level attribute, of navigator.battery object, Vibration

levelchange event, in Battery Status API, Battery Status

LG Optimus Vu, TV

libraries in JavaScript, Modern JavaScript, Interacting with Classes

jQuery, Interacting with Classes
Modernizr, YepNope
Mustache, Modernizr
YepNope, jQuery

Lie, Håkon Wium, Further Reading, Chapter 11: The Future

line element in SVG, Scalable Vector Graphics

lines, Multi-columns

(see also rules (lines))
in grid, Wrap and Flow

link tag, declaring type for, The HTML5 Template

linked SVG files, Anatomy of an SVG Image

links, to script files, New in JavaScript

list attribute for form, Datalists

listener

for addEventListener method, The addEventListener Method
for state changes, Media Queries in JavaScript

load event, Removing Event Listeners

load() method, for media elements, The Media API

loading times of web pages, JavaScript libraries and, Interacting with Classes

localStorage object, Camera and Microphone

location-based services, Device Apis

logic-less syntax, Modernizr

longitude property, of coords object, Device Apis

loop attribute, for media elements, The Media Elements

Lubbers, Peter, Further Reading, Chapter 10: Web Apps

M

main axis, in Flexbox, Alignment Inside the Container

main role, WAI-ARIA

Manian, Divya, The Importance of Semantic Markup, Further Reading, Chapter 1: The Web Platform

manifest attribute, of html element, Webinos

manifest files

for web apps, Hosted Web Apps
information sources, The AppCache API, Chapter 10: Web Apps

manifest.webapp file, The Chrome Web Store

master entries, Contents of the AppCache File

matchMedia() method, Media Queries in JavaScript

max attribute

for date or time, Dates
for meter element, progress
for number input type, Numbers

max- prefix, for media features, Media Features Based on Dimensions

max-width property, Responsive Design and Replaced Objects

maximum keyword, for wrap-flow property, Exclusions

MDN (Mozilla Developer Network)

on feature queries, Further Reading
on forms, Summary
on Full Screen API, Chapter 6: Device APIs
on Media API and Events, Further Reading
on media formats, WebRTC

measurement unit

for viewport dimensions, Media Queries
fraction unit (fr), Declaring and Defining the Grid

media (see multimedia)

Media API, Media Fragments

media attribute, of source element, The HTML5 Responsive Images Solution, Multiple Source Files

media elements, fallbacks, Multiple Source Files

media events, Network and Ready States

media features, Media Queries

-webkit-device-pixel-ratio, Screen Resolution Media Queries
device adaptation, Screen Resolution Media Queries
dimensions as basis, Media Queries
input mechanism, Device Adaptation
max- and min- prefixes for, Media Features Based on Dimensions

Media Fragments URI, Subtitles and Captions

media queries, CSS3 and Beyond, Media Queries

browser support, Enabling Experimental Features
combining and negating, Media Features Based on Dimensions
comma-separated list of, Screen Resolution Media Queries
for screen resolution, A Quick Digression: All About Pixels
in JavaScript, Input Mechanism Media Features
in mobile-first methodology, Mobile First and Content Breakpoints
information sources, The HTML5 Responsive Images Solution, Chapter 2: Structure and Semantics
resolution query, Screen Resolution Media Queries

Media Queries Level 4 spec, script feature, Input Mechanism Media Features

media stream, element for display, Network Information

MediaQueryList object, Media Queries in JavaScript

MediaStream API, WebRTC

Meenan, Patrick, Summary, Chapter 1: The Web Platform

meta tag, The HTML5 Template

metadata value, for preload attribute, The Media Elements

metadata, in Dublin Core, Scalable Vector Graphics

meter element, Vibration, progress

metered attribute, of connection object, Battery Status

microdata, RDFa

information sources, Further Reading, Chapter 2: Structure and Semantics
rich snippets, Schema.org
Schema.org, Microdata, Microformats, and RDFa

Microdata API, Microdata

microformats, The Importance of Semantic Markup

information sources, Further Reading, Chapter 1: The Web Platform

microphone, Network Information

access to data stream from, WebRTC

Microsoft, Introduction

and MP4 format, Fallbacks
Surface, TV

milestones, in JS Bin, Polyfills and Shims

Mills, Chris, Further Reading, Chapter 11: The Future

MIME type, Multiple Source Files

min attribute

for date or time, Dates
for meter element, progress
for number input type, Numbers

min- prefix, for media features, Media Features Based on Dimensions

minimum keyword, for wrap-flow property, Exclusions

Miro Video Converter, Subtitles and Captions

mixins, Cascading Variables

mobile devices, Desktop/Laptop

information sources, The HTML5 Responsive Images Solution, Chapter 2: Structure and Semantics
media playback on, The Media Elements

Mobile First (Wroblewski), Mobile First and Content Breakpoints, Further Reading, Chapter 2: Structure and Semantics

mobile first methodology, Root-Relative Units

mobile libraries, information sources, Summary, Chapter 3: Device-Responsive CSS

Modernizr, YepNope, Putting It All Together

information sources, Summary, Chapter 5: Modern JavaScript

Modernizr.load() method, YepNope

modules, in CSS, CSS3 and Beyond

monochrome query, for ebook reader, Input Mechanism Media Features

month, for date input, Dates

Morville, Peter, Ambient Findability, Further Reading, Chapter 1: The Web Platform

MouseEvent interface, Pointer Events

MozDev, Summary, Chapter 5: Modern JavaScript

on columns, Further Reading, Chapter 3: Device-Responsive CSS

Mozilla Developer Center, Further Reading, Chapter 10: Web Apps

Mozilla Developer Network (see MDN (Mozilla Developer Network))

Mozilla, Firefox OS and WebAPIs, Interacting with Files

MP4 format, Fallbacks

Multi-column Layout module, New Approaches to CSS Layouts

gaps and rules, Multi-columns
information sources, Further Reading, Chapter 3: Device-Responsive CSS
items spanning multiple rows or columns, Placing Items on the Grid
spans and breaks, Gaps and Rules

multi-screen use, The In Betweeners

multimedia, Multimedia

advanced interaction, Media Events
browser support, Chapter 8: New Forms
media elements, Multimedia
subtitles and captions, Fallbacks

multiple attribute for form, placeholder

Mustache, Modernizr

information sources, Summary, Chapter 5: Modern JavaScript

N

name attribute, of element element, Custom Elements

name field, in Firefox Marketplace manifest, The Firefox Marketplace

name-value pair, RDFa

named flow, in CSS Regions, Regions

named functions, vs. anonymous functions, The addEventListener Method

naming conflicts, Web Components

native apps, Web Apps

native wrappers, Interacting with Files

nav element, Structure and Semantics

navigation devices, awareness of page structure, The Downside of HTML5 Sectioning Elements

navigation role, WAI-ARIA

navigator object, Network Information

vibrate() method on, Fullscreen

navigator.battery object, Vibration

negating, media queries, Media Features Based on Dimensions

nesting elements, percentage widths and, Adaptive vs. Responsive Web Design

NetFront, on PlayStation 3, TV

network entries, Contents of the AppCache File

Network Information API, Battery Status

networkState property, The Media API

Nintendo, Introduction

Nintendo Wii, TV

none keyword

for preload attribute, The Media Elements
for wrap-through property, Exclusions

Nook, TV

not operator

in feature queries, Feature Queries
in media queries, Media Features Based on Dimensions

novalidate attribute, of form element, Client-side Form Validation

nowrap value, for flex-wrap property, Adding Some Flexibility

number input, Datalists

Nyman, Robert, Summary, The Chrome Web Store, The AppCache API, Chapter 5: Modern JavaScript, Chapter 10: Web Apps

O

object element, for embedded SVG file, Embedded SVG

object-fit property, Responsive Design and Replaced Objects

object-position property, Responsive Design and Replaced Objects, Responsive Design and Replaced Objects

objects

created by click event, information contained in, The event Object
replaced, and responsive websites, Mobile First and Content Breakpoints
resizing, Responsive Design and Replaced Objects
sizing within container, Responsive Design and Replaced Objects

offline availability, Webinos

Ogg format, Extra Attributes for the video Element, Fallbacks

on() method, jQuery

on-screen keyboard, for form input, New Input Types

on-screen prompt

for permission to enter fullscreen mode, Orientation
to access camera or microphone, Network Information

open device labs, Browser Support

Open Web App Manifest, The Chrome Web Store

Opera (browser), Desktop/Laptop, Mobile

audio or video format for, Fallbacks
Mobile Emulator, Browser Support
on remote debugging, Summary, Chapter 1: The Web Platform
Presto rendering engine, The Browsers in Question

Opera Mini, Mobile

Opera TV Store, Further Reading, Chapter 10: Web Apps

optimum attribute, for meter element, meter

option child element, form

Opus format, Fallbacks

or operator

comma separator in media queries as, Media Features Based on Dimensions
for feature queries, Feature Queries

ordinal group, creating, Changing the Content Order

organization, in hCard pattern, Microformats

orientation

of viewport, Media Features Based on Dimensions
three-dimensional, information sources, Summary, Chapter 5: Modern JavaScript

Orientation API, Orientation

output element, meter

overflow-style property, Even Further Future Layouts

O’Callahan, Robert, When to Choose SVG or Canvas, Chapter 7: Images and Graphics

P

Paciello Group Blog, Further Reading, Chapter 1: The Web Platform

packaged web apps, vs. hosted, Web Apps

PadFone (Asus), The In Betweeners

page elements, percentages for, Media Queries in JavaScript

page structure, CSS Frameworks and Preprocessors

(see also grid layout models)
navigation device awareness of, The Downside of HTML5 Sectioning Elements

Pagination Templates, information sources, Further Reading, Chapter 11: The Future

parent element, and column flow, Multi-columns

pattern attribute, of input type, Client-side Form Validation

pause event, in PhoneGap project, PhoneGap Events

pause() method, for media element, Media Fragments

percentages, for page elements, Media Queries in JavaScript

performance, Context: What We Don’t Know

@import at-rule and, Media Queries

permanence of data storage, Camera and Microphone

permission to enter fullscreen mode, prompt for, Orientation

PhoneGap, Interacting with Files, The Firefox Marketplace, PhoneGap

API, PhoneGap
events for, The PhoneGap API
information sources, The AppCache API, Chapter 10: Web Apps
permissions, PhoneGap

phones, Desktop/Laptop

physical pixel count, Combining and Negating Media Queries

pixels, Combining and Negating Media Queries

pixels per centimeter (PPC), Combining and Negating Media Queries

pixels per inch (PPI), Combining and Negating Media Queries

placeholder attribute for form, New Input Types

play event, Media Events

play() method, for media element, Media Fragments

PlayStation 3, NetFront, TV

plug-ins, disadvantages, Multimedia

PNG file format, Images and Graphics

Pointer Events, Removing Event Listeners, Touch Events

pointer feature, Device Adaptation

pointerup event, Touch Events

polyfills, in JavaScript, Mustache

polygon element in SVG, Scalable Vector Graphics

portable devices, battery status, Vibration

portrait mode, of viewport, Media Features Based on Dimensions

poster property, Network and Ready States

PPC (pixels per centimeter), Combining and Negating Media Queries

PPI (pixels per inch), Combining and Negating Media Queries

PPK, The HTML5 Responsive Images Solution, Summary, Chapter 2: Structure and Semantics, Chapter 7: Images and Graphics

prefixes, vendor-specific, CSS3 and Beyond

preload attribute, for media elements, The Media Elements

preprocessors, CSS Frameworks and Preprocessors, Feature Queries

Presto rendering engine (Opera), The Browsers in Question

preventDefault() method, The event Object, Web Storage, Drag and Drop

progress bars, Displaying Information to the User

progress element, Displaying Information to the User, The Media API

prompt

for permission to enter fullscreen mode, Orientation
to access camera or microphone, Network Information

properties, RDFa

inherited, in schema, Schema.org

property-value pairs, in feature queries, Feature Queries

pseudo-classes for HTML5 forms, Forms and CSS

information sources, Summary, Chapter 8: New Forms

Q

querySelector() method, Pointer Events, Image Manipulation
querySelectorAll() method, Pointer Events
quirks mode, The Real HTML5

R

range element, The Media API

range input, Datalists

raster graphics, A Quick Digression: All About Pixels

RDFa (Resource Description Format in Attributes), Microformats, Further Reading, Chapter 2: Structure and Semantics

RDFa Core, Microformats

readability, characters in text line and, Mobile First and Content Breakpoints

readAsArrayBuffer() method, Interacting with Files

readAsDataURL() method, Interacting with Files

readAsText() method, Interacting with Files

readyState property, Network and Ready States

rect element in SVG, Scalable Vector Graphics

style for, Embedded SVG

region chain, Regions

Regions (CSS), Putting It All Together

regular expressions, Client-side Form Validation

information sources, Summary, Chapter 8: New Forms

Rel-Tag microformat, The Importance of Semantic Markup

rem (root em), Dynamic Calculations on Length Values

remoteItem() method, Web Storage

remove() method, CSS Selectors in JavaScript

removeEventListener() method, The event Object

repeat() function, Repeating Grid Lines

replaced objects, and responsive websites, Mobile First and Content Breakpoints

requestFullScreen() method, Orientation

required attribute, of input type, output

Resig, John, Further Reading, Chapter 2: Structure and Semantics

resizing objects, Responsive Design and Replaced Objects

resolution media query, Screen Resolution Media Queries

resolution of screen, Combining and Negating Media Queries

Resource Description Format in Attributes (RDFa), Microformats, Further Reading, Chapter 2: Structure and Semantics

Responsive Images Community Group, Further Reading, Chapter 3: Device-Responsive CSS

responsive websites, Device-Responsive CSS

and replaced objects, Mobile First and Content Breakpoints
browser support, Enabling Experimental Features
vs. adaptive, Media Queries in JavaScript

resume event, in PhoneGap project, PhoneGap Events

RGBA color model, Image Manipulation

rich snippets, Schema.org

information sources, Further Reading, Chapter 2: Structure and Semantics

right value, for object-position property, Responsive Design and Replaced Objects

Robinson, Mike, Further Reading, Chapter 1: The Web Platform

role attribute, WAI-ARIA

root em (rem), Dynamic Calculations on Length Values

root-relative units, Dynamic Calculations on Length Values

row value, for flex-direction property, Declaring the Flexbox Model

row-reverse value, for flex-direction property, Declaring the Flexbox Model

rows in graph, fraction unit for, Declaring and Defining the Grid

rows in grid, items spanning multiple, Placing Items on the Grid

Rubular, Summary, Chapter 8: New Forms

rules (lines)

between columns, Multi-columns
in grid, repeating, Repeating Grid Lines

S

Safari (browser), Desktop/Laptop

Safari mobile, The Browsers in Question

Samsung, Introduction, Further Reading, Chapter 10: Web Apps

Samsung Galaxy Note II, TV

Samsung Galaxy S III, TV, A Quick Digression: All About Pixels

scalability, SVG and, When to Choose SVG or Canvas

Scalable Vector Graphics (see SVG (Scalable Vector Graphics))

schema, Microformats

Schema.org, Microdata, Microformats, and RDFa

information sources, Further Reading, Chapter 2: Structure and Semantics

Schulze, Dirk, When to Choose SVG or Canvas, Chapter 7: Images and Graphics

scoped styles, Decorators

screen resolution, Combining and Negating Media Queries

for desktops, Desktop/Laptop
media queries for, A Quick Digression: All About Pixels

screen sizes, TV

script element

defer attribute for, New in JavaScript
in Media Queries Level 4 spec, Input Mechanism Media Features

script tag, declaring type for, The HTML5 Template

scripts, initiating, Removing Event Listeners

scrolling, Even Further Future Layouts

SDKs (software development kits), Browser Support

search input type, for forms, New Forms

search role, WAI-ARIA

section elements, Structure and Semantics

sectioning, Structure and Semantics

downside of, What’s the Point?
implicit or explicit, New Elements in HTML5

sectioning roots, What’s the Point?

sections, from Mustache, Mustache

Seddon, Ryan, Summary, Chapter 7: Images and Graphics

seeking property, for media elements, The Media API

Seidelin, Jacob, Further Reading, Chapter 7: Images and Graphics

selector, in jQuery, jQuery

semantic markup

browser support, Enabling Experimental Features
importance of, The Importance of Semantic Markup
information sources, Further Reading, Chapter 1: The Web Platform

semantic richness, Structure and Semantics

session storage, Camera and Microphone

sessionStorage object, Camera and Microphone

setCustomValidity() method, The Constraint Validation API

setData() method, Drag and Drop

setItem() method, for storing item, Camera and Microphone

Shadow DOM, Custom Elements

information sources, Further Reading, Chapter 11: The Future

shadow root, Custom Elements

shape elements in SVG, Scalable Vector Graphics

shape-inside property, Exclusions and Grids

shape-outside property, Exclusions and Grids

shaped exclusions, Exclusions and Grids

shims, in JavaScript, Mustache

simultaneous screening, The In Betweeners

Sitepoint, Further Reading, Chapter 11: The Future

sites (see websites)

smart TVs

information sources, Further Reading, Chapter 10: Web Apps
Internet-connected, PhoneGap Events

smartphones, Desktop/Laptop

PPI count, Combining and Negating Media Queries
use stereotypes, Context: What We Don’t Know

snapshots, in JS Bin, Polyfills and Shims

soft keyboard, for form input, New Input Types

software development kits (SDK), Browser Support

Souder, Steve, Media Queries

source element, The Image Problem, Further Reading, Chapter 2: Structure and Semantics

SourceGraphic keyword, Embedded SVG

space-around value, for justify-content property, Alignment Inside the Container

space-between value, for justify-content property, Alignment Inside the Container

spans for columns, Gaps and Rules

speed, Context: What We Don’t Know

spellcheck attribute for form, placeholder

sprites for icons, SVG Sprites

square bracket ([ ]) notation, for storing item, Camera and Microphone

src attribute, of track element, Fallbacks

srclang attribute, of track element, Fallbacks

srcset attribute, The Image Problem, The HTML5 Responsive Images Solution

stacking, in grid layout, Placing Items on the Grid

standalone attribute, in XML declaration, Scalable Vector Graphics

standards mode, The HTML5 Template

Stark, Jonathan, Mobile, Further Reading, Introduction

start keyword

for grid alignment properties, Placing Items on the Grid
for wrap-flow property, Exclusions

statistics, information sources, Further Reading, Further Reading

status property, of window.applicationCache object, The Caching Sequence

stdDeviation attribute, for feGaussianBlur element, Embedded SVG

step attribute, for date or time, Dates

stepDown() method

for date or time, Dates
for number input type, Numbers

stepUp() method

for date or time, Dates
for number input type, Numbers

stereotypes, context, Context: What We Don’t Know

Stevens, Luke, The Truth About HTML 5, The Downside of HTML5 Sectioning Elements, Further Reading, Chapter 1: The Web Platform

storage event, Web Storage

Storey, David, Further Reading, Introduction

stretch value

for align-items property, Alignment Inside the Container
for grid alignment properties, Placing Items on the Grid

stroke() method, The canvas Element

structure

browser support, Enabling Experimental Features
importance of, Structure and Semantics

structured data, The Importance of Semantic Markup

style tag, declaring type for, The HTML5 Template

styles, scoped, Decorators

stylesheets

media queries to apply to viewport, Mobile First and Content Breakpoints
use of external based on media, Media Queries

subsequent screening, The In Betweeners

subtitles, for media files, Fallbacks

SVG (Scalable Vector Graphics)

files, Images and Graphics

convergence with CSS, SVG Filters
drawback, The Convergence of SVG and CSS
embedded, SVG Sprites
filters, Embedded SVG
information sources, When to Choose SVG or Canvas, Chapter 7: Images and Graphics
linked files, Anatomy of an SVG Image
vs. canvas, Image Manipulation

format, Images and Graphics, Images and Graphics

anatomy of image, Scalable Vector Graphics
linked files, Anatomy of an SVG Image

sprites, SVG Sprites

svg element, Scalable Vector Graphics

SVG2, SVG Filters

swapCache() method, of window.applicationCache object, The Caching Sequence

sympathetic keyboard layout, New Input Types

T

tablets, Tablet, Device Adaptation

tags, lowercase or uppercase characters for, New Best Practices

Taubert, Tim, Image Manipulation, Further Reading, Chapter 7: Images and Graphics

tel input type, for forms, New Input Types

template element, Templates

templates

and scoped styles, Scoped Styles
client-side system, Modernizr
for grid, The September 2012 Grid Layout Syntax
for script tags, Mustache
for web components, Web Components

terminology, A Quick Note About Terminology

testing, Browser Support

browsers for JavaScript support, Input Mechanism Media Features
in JavaScript, Polyfills and Shims

text files, content as, Interacting with Files

text input, New Forms

text tracks, for media files, Fallbacks

The Truth About HTML 5 (Stevens), The Downside of HTML5 Sectioning Elements, Further Reading, Chapter 1: The Web Platform

Theora format, Extra Attributes for the video Element

three-dimensional (see 3-D…)

timeupdate event, The Media API, Media Events

Titanium, PhoneGap Events

information sources, Further Reading, Chapter 10: Web Apps

toggle() method, Interacting with Classes

top value, for object-position property, Responsive Design and Replaced Objects

Touch Events specifications, Removing Event Listeners

touch screens

finger-based, Device Adaptation
for tablets, Tablet

touch-enabled input, events for, Removing Event Listeners

touchcancel event, Touch Events

touchend event, Touch Events

touchenter event, Touch Events

TouchEvent object, Touch Events

touchleave event, Touch Events

touchmove event, Touch Events

touchstart event, Touch Events

track child element, Fallbacks

information sources, Further Reading, Chapter 8: New Forms

tracks in grid, Wrap and Flow, Declaring and Defining the Grid

Transforms module, SVG Filters

TV apps, PhoneGap Events

TV, web-enabled, Tablet

Twitter, CSS Frameworks and Preprocessors

data attributes use by, Data Attributes in the Wild

type attribute, for audio element, Multiple Source Files

type parameter, The addEventListener Method

typeof operator, The Data Attributes API

U

Ubuntu Phone, TV

UI element states pseudo-classes, Forms and CSS

Unicode characters, The HTML5 Template

unit of measure

for viewport dimensions, Media Queries
fraction unit (fr), Declaring and Defining the Grid

Universal Plug and Play (UPnP), The Future

update() method, of window.applicationCache object, The Caching Sequence

updateready event, of window.applicationCache object, The Caching Sequence

UPnP (Universal Plug and Play), The Future

url input type, for forms, New Forms

url() function, Anatomy of an SVG Image

useCapture parameter, for addEventListener method, The addEventListener Method

user agents, A Quick Note About Terminology

(see also browsers)

user-defined attributes, Data Attributes

users, information display for, Displaying Information to the User

UTF-8, The HTML5 Template

UX Magazine, Further Reading, Introduction

V

validation rule, custom, The Constraint Validation API

validation tool, for manifest files, The AppCache API, Chapter 10: Web Apps

validationMessage property, The Constraint Validation API

validity property, The Constraint Validation API

validityState object, The Constraint Validation API

value attribute, for progress element, Displaying Information to the User

value property, for output element, meter

valueAsDate property, Dates

valueAsNumber property (DOM), Numbers

valueMissing property, The Constraint Validation API

van Kesteren, Anne, Further Reading, Chapter 8: New Forms

var() function, Feature Queries

variables

cascading, Putting It All Together, Feature Queries
creating with Mustache, Mustache

vcard class, Microformats

vector graphics, A Quick Digression: All About Pixels

vs. bitmaps, Images and Graphics

vendor-specific prefixes, CSS3 and Beyond

version field, in Firefox Marketplace manifest, The Firefox Marketplace

version property, in manifest file, The Chrome Web Store

vh unit, Dynamic Calculations on Length Values

vibrate() method, on navigator object, Fullscreen

Vibration API, Fullscreen

video element, Network Information, Multimedia

additional attributes, The Media Elements
multiple source files for, Extra Attributes for the video Element

video format

encoding, Subtitles and Captions
variation in browser support, Fallbacks

videoHeight attribute, Network and Ready States

videoWidth attribute, Network and Ready States

viewport

dimensions of, Media Queries
length units relative to, Dynamic Calculations on Length Values
media query to apply stylesheet, Mobile First and Content Breakpoints
orientation of, Media Features Based on Dimensions

viewport meta tag, Device Adaptation

Vision Mobile, Further Reading, Further Reading

volume property, for media elements, The Media API

volumechange event, Media Events

Vorbis format, Extra Attributes for the video Element

vw unit, Dynamic Calculations on Length Values

W

W3C (World Wide Web Consortium), The Real HTML5

HTML5 specification, Summary, Introduction
Media Fragments specification, Further Reading, Chapter 8: New Forms
widgets, The Firefox Marketplace

WAI-ARIA (Web Accessibility Initiative, Accessible Rich Internet Applications), The Downside of HTML5 Sectioning Elements, Further Reading, Chapter 1: The Web Platform

Walsh, David, Summary, Chapter 5: Modern JavaScript

watchPosition() method, Geolocation

WCAG Audio Control page, WebRTC, Chapter 8: New Forms

Web Accessibility Initiative, Accessible Rich Internet Applications (WAI-ARIA), The Downside of HTML5 Sectioning Elements, Further Reading, Chapter 1: The Web Platform

Web Applications 1.0, Who You Are and What You Need to Know

web apps, A Quick Note About Terminology, Web Apps, Web Apps

hosted vs. packaged, Web Apps
manifest files, Hosted Web Apps

Web Audio API, Media Events

Web Components, Data Attributes in the Wild, Web Components

custom elements, Custom Elements
decorators, Templates
Shadow DOM, Custom Elements
templates, Web Components

web pages

experimental features, The Future

web components, Web Components

loading times, JavaScript libraries and, Interacting with Classes

web platform, Who You Are and What You Need to Know

browser support, Enabling Experimental Features
technologies included, Browser Support

Web Storage API, Camera and Microphone

information sources, Summary, Chapter 5: Modern JavaScript

web-enabled devices, Introduction

web-enabled TVs, Tablet

WebAPIs, Interacting with Files

and Firefox OS, Interacting with Files

WebGL, Image Manipulation

WebGL.com, Further Reading, Chapter 7: Images and Graphics

Webinos, Webinos, Further Reading, Chapter 10: Web Apps

WebKit engine, Mobile, Browser Support

WebKit Web Inspector, key:value pair displayed in, Web Storage

WebM format, Fallbacks, Subtitles and Captions

WebRTC project, Network Information, Media Events, Further Reading, Chapter 8: New Forms

websites

adaptive vs. responsive, Media Queries in JavaScript
for book, CSS Frameworks and Preprocessors
meaning of, A Quick Note About Terminology

WebSMS API, Interacting with Files

WebTelephony API, Interacting with Files

WebVtt format, Subtitles and Captions

information sources, Further Reading, Chapter 8: New Forms

week, for date input, Dates

weinre, Browser Support

WHATWG, The Real HTML5

widgets, The Firefox Marketplace, The AppCache API, Chapter 10: Web Apps

width attribute

for video element, The Media Elements
of viewport, Media Queries

widthMatch() function, Media Queries in JavaScript

Wilcox, Matt, Further Reading, Chapter 2: Structure and Semantics

Adaptive Images, The HTML5 Responsive Images Solution, Further Reading, Chapter 3: Device-Responsive CSS

willValidate property, Client-side Form Validation

window object, deviceorientation event on, Orientation

window.applicationCache object, The Caching Sequence

window.navigator object, Device Apis

Windows 8, and tablets, Tablet

Windows Phone, Mobile, Browser Support

World Wide Web Consortium (W3C), The Real HTML5

HTML5 specification, Summary, Introduction
Media Fragments specification, Further Reading, Chapter 8: New Forms
widgets, The Firefox Marketplace

wrap in flexbox, Adding Some Flexibility

wrap value, for flex-wrap property, Adding Some Flexibility

wrap-flow property, Exclusions

wrap-reverse property, Wrap and Flow

wrap-through property, Exclusions

wrappers, native, Interacting with Files

Wroblewski, Luke, Mobile First, Mobile First and Content Breakpoints, Further Reading, Chapter 2: Structure and Semantics

X

x-axis, Orientation

rotation around, Orientation

X-Tags, Further Reading, Chapter 11: The Future

XML file

manifest file as, Hosted Web Apps
SVG file format as, Scalable Vector Graphics
Widget manifest file as, The Firefox Marketplace

Y

y-axis, Orientation

rotation around, Orientation

YepNope, jQuery

information sources, Summary, Chapter 3: Device-Responsive CSS
properties used in Modernizr, Modernizr

Z

z-axis, Orientation

rotation around, Orientation

z-index property, Alignment and Stacking

Zakas, Nicholas, Summary, Chapter 5: Modern JavaScript

Zepto, jQuery

information sources, Summary, Chapter 3: Device-Responsive CSS

zoom level, user control over, Device Adaptation

zoomed-out view, Screen Resolution Media Queries

Previous Chapter

Chapter 11: The Future

About the Author