Book Index - HTML5 & CSS3 for the Real World

Symbols

3D graphics, (Getting the Context)
? (question mark), in attributes, (Geolocation’s Position Object)
@-rules, (Implementing @font-face)

A

a element, (Block Elements Inside Links), (Validating HTML5 Documents)

accessibility

audio/video, (Accessible Media)
canvas API and, (Accessibility Concerns)
hovering and, (Pseudo-classes)
nav element and, (The nav Element)
required attribute and, (The required Attribute)
WAI-ARIA, (WAI-ARIA)

Accessible Rich Internet Applications (ARIA) (see WAI-ARIA)

action attribute, (The form Element)

:active pseudo-class, (Pseudo-classes)

addColorStop method, (Variations on fillStyle)

addEventListener method, (Introducing the Media Elements API), (Playing and Pausing the Video)

adjacent sibling selector, (Relational Selectors)

::after pseudo-element, (Generated Content)

alpha value, (RGBA)

animate method, (Rotating a Spinner with Raphaël)

animation property, (The Shorthand animation Property)

animation-delay property, (animation-delay)

animation-direction property, (animation-direction)

animation-duration property, (animation-duration)

animation-fill-mode property, (animation-fill-mode)

animation-iteration-count property, (animation-iteration-count)

animation-name property, (animation-name)

animation-play-state property, (animation-play-state)

animation-timing-function property, (animation-timing-function)

animations, (Transitions), (Accepting Dropped Elements)

(see also Drag and Drop API)
(see also transitions)
about, (Animations)
browser support, (Animations)
keyframes, (Keyframes)
multiple, (The Shorthand animation Property)
properties for, (Animation Properties)
properties shorthand, (The Shorthand animation Property)

anonymous functions, (Variations on fillStyle)

APIs (Application Programming Interface), (Why should I care about HTML5?)

about, (What is HTML5?)
for database interaction, (Web SQL and IndexedDB)
for dragging/dropping (see Drag and Drop API)
for drawing (see Canvas API)
for geolocation (see geolocation API)
for graphics (see SVG)
for offline site access (see offline site access)
for running scripts in background, (Web Workers)
for two-way communication, (Web Sockets)
for video (see video API)
for web storage (see web storage)

application cache, (How It Works: the HTML5 Application Cache)

arc method, (Drawing Other Shapes by Creating Paths)

article element, (The article Element), (Structuring The HTML5 Herald)

aside element, (The aside Element), (Structuring The HTML5 Herald)

async attribute, (The async Attribute for Scripts)

at-rules, (Implementing @font-face)

attribute selectors, (Attribute Selectors)

attribute values, (What about other XHTML-based syntax customs?), (Validating HTML5 Documents)

audio

browser support, (The Current State of Play), (What combinations work in current browsers?), (What about audio?)
captions, (Accessible Media)
controls, (What about audio?)
muting, (The audio Attribute)

audio attribute, (The audio Attribute)

audio codecs, (Audio Codecs)

audio element, (What about audio?)

autocomplete attribute, (The autocomplete Attribute), (The form Element)

autofocus attribute, (The autofocus Attribute)

autoplay attribute, (The autoplay Attribute), (What about audio?)

B

b element, (Bold Text)

background images, (Multiple Background Images)

(see also gradients)
multiple, (Multiple Background Images)
sizing, (Background Size)

background property, (Multiple Background Images)

background-color property, (Multiple Background Images)

background-image property, (Multiple Background Images)

background-size property, (Background Size)

backwards selectors, (Relational Selectors)

::before pseudo-element, (Generated Content)

big element, (Big and Small Text)

block elements, (A New Perspective on Types of Content), (Block Elements Inside Links), (Validating HTML5 Documents), (Getting Older Browsers on Board), (Translation)

blur distance, (Drop Shadows)

bold text, (Bold Text)

Boolean attributes, (What about other XHTML-based syntax customs?)

border-radius property, (Rounded Corners: border-radius)

box-shadow property, (Drop Shadows)

boxes

basic, (Putting It into Practice)
rounding corners, (Rounded Corners: border-radius)
shadows, (Drop Shadows)

breaks, column, (Column Breaks)

browser cache, (How It Works: the HTML5 Application Cache)

browser support

about, (The Varied Browser Market)
for 3D graphics, (Getting the Context)
for animations, (Animations)
for audio, (The Current State of Play), (What combinations work in current browsers?), (What about audio?)
for background sizing, (Background Size)
for canvas API, (Canvas)
character encoding and, (The head Element)
for columns, (CSS3 Multicolumn Layouts), (The columns Shorthand Property), (Column Breaks), (Spanning Columns), (Progressive Enhancement)
for debugging, (Creating Various Font File Types: Font Squirrel)
for Drag and Drop API, (Drag and Drop)
for File API, (Drag and Drop)
for fonts, (Declaring Font Sources), (Creating Various Font File Types: Font Squirrel)
for geolocation, (Geolocation)
graceful degradation, (transition-duration)
for gradients, (CSS3 Gradients and Multiple Backgrounds), (Linear Gradients), (The W3C Syntax), (The Old WebKit Syntax)
for HTML5, (Why do these changes still work in older browsers?), (Getting Older Browsers on Board)
for image manipulation, (Security Errors with getImageData)
for media queries, (Browser Support)
for obsolete elements, (The Word “Deprecated” is Deprecated)
for offline API, (Offline Web Applications)
for pseudo-classes, (Pseudo-classes), (Structural Pseudo-classes)
for required fields, (The required Attribute)
for RGBA, (RGBA)
for rounded corners, (Rounded Corners: border-radius)
for shadows, (Drop Shadows), (Inset and Multiple Shadows), (Text Shadow)
for SVG, (SVG)
for transforms, (Transforms), (Translation), (Changing the Origin of the Transform), (Support for Internet Explorer 8 and Earlier)
for unrecognized elements, (Leveling the Playing Field)
for video, (The Current State of Play), (What combinations work in current browsers?), (What about Internet Explorer 6–8?)
for WAI-ARIA, (The Current State of WAI-ARIA)
for Web Sockets API, (Web Sockets)
for Web SQL, (Web SQL and IndexedDB)
for web storage, (Web Storage), (Local Storage)
for Web Workers API, (Web Workers)

buffered attribute, (Attributes)

button input, (The required Attribute)

C

cache, refreshing, (Refreshing the Cache)

cache.manifest file, (The cache.manifest File), (Pointing Your HTML to the Manifest File), (Caching the Cache)

calculations, displaying, (The output Element)

calendar control, (Dates and Times)

callbacks, (Retrieving the Current Position)

canplay event, (Events)

canplaythrough event, (Introducing the Media Elements API)

canvas API

2D vs 3D, (Getting the Context)
about, (Canvas)
accessibility issues, (Accessibility Concerns)
browser support for, (Canvas)
clearing canvas, (Displaying Text on the Canvas)
color, (Filling Our Brush with Color)
color to grayscale, (Converting an Image from Color to Black and White), (Manipulating Video with Canvas)
coordinate system, (The Canvas Coordinate System)
creating elements, (Creating a canvas Element)
displaying text, (Displaying Text on the Canvas)
drawing an image, (Drawing an Image to the Canvas)
drawing circles, (Drawing Other Shapes by Creating Paths)
drawing complex shapes, (Drawing Other Shapes by Creating Paths)
drawing on canvas, (Drawing on the Canvas)
drawing rectangles, (Drawing a Rectangle to the Canvas)
gradients, (Variations on fillStyle)
manipulating an image, (Manipulating Images)
pattern fills, (Variations on fillStyle)
resources, (Further Reading)
saving drawings, (Saving Canvas Drawings)
security issues, (Security Errors with getImageData)
setting context, (Getting the Context)
SVG vs, (Canvas versus SVG)

canvas element, (Creating a canvas Element)

CanvasGradient object, (Filling Our Brush with Color), (Variations on fillStyle)

CanvasPattern object, (Filling Our Brush with Color), (Variations on fillStyle)

CanvasRenderingContext2D object, (Getting the Context)

captions, (Accessible Media)

case, upper vs lower, (What about other XHTML-based syntax customs?), (Validating HTML5 Documents)

character encoding, (The head Element), (Why do these changes still work in older browsers?)

:checked pseudo-class, (Pseudo-classes)

child elements, selecting, (Structural Pseudo-classes)

child selector, (Relational Selectors)

Chrome, (Introducing HTML5 and CSS3)

(see also browser support)
geolocation prompt, (Privacy Concerns)
local storage viewing/changing, (Viewing Our Web Storage Values with the Web Inspector)

circle element, (Drawing in SVG)

cite element, (A cite for Sore Eyes)

clear input, (Search)

clear method, (Removing Items and Clearing Data)

clearPosition, (Geolocation Methods)

closePath method, (Drawing Other Shapes by Creating Paths)

closing tags, (Shouldn’t all tags be closed?), (What about other XHTML-based syntax customs?), (Validating HTML5 Documents)

codecs, (Video Codecs)

collapsible text, (The details Element)

color

converting to grayscale, (Converting an Image from Color to Black and White)
fills, (Filling Our Brush with Color)
grayscale conversion, (SVG Filters)
HSL notation, (HSL and HSLA)
opacity property, (Opacity)
pre-CSS3, (CSS3 Colors)
RGBA notation, (RGBA)
for shadows, (Drop Shadows)
transparency, (Filling Our Brush with Color), (Displaying Text on the Canvas)

color input, (The required Attribute), (Colors)

color picker, (Colors)

color stops, (The W3C Syntax), (The Old WebKit Syntax), (Linear Gradients with SVG), (Variations on fillStyle)

color-stop function, (The Old WebKit Syntax)

column-count property, (The column-count Property)

column-fill property, (Columns and the height Property)

column-gap property, (The column-gap Property)

column-rule property, (The column-rule Property)

column-span property, (Spanning Columns)

column-width property, (The column-width Property)

Columnizer, (Progressive Enhancement)

columns

about, (CSS3 Multicolumn Layouts)
borders on, (The column-rule Property)
breaking, (Column Breaks)
browser support, (CSS3 Multicolumn Layouts), (The columns Shorthand Property), (Column Breaks), (Spanning Columns), (Progressive Enhancement)
gaps between, (The column-gap Property)
height of, (Columns and the height Property)
hyphenation in, (Other Considerations)
shorthand, (The columns Shorthand Property)
spanning, (Spanning Columns)
specifying number, (The column-count Property)
width of, (The column-width Property)

columns property, (The columns Shorthand Property)

compatibility mode, (Declaring Font Sources)

content, semantic types, (A New Perspective on Types of Content)

content-type, setting, (MIME Types), (Setting the Content Type on Your Server)

context menu, (Playing and Pausing the Video)

context object, (Getting the Context)

context, 2D or 3D, (Getting the Context)

controls attribute, (Enabling Native Controls), (What about audio?)

cookies, (Local Storage)

coordinates

geolocation API, (Geolocation’s Position Object)
in canvas, (The Canvas Coordinate System)
latitude/longitude, (Grabbing the Latitude and Longitude)

corners

asymmetrical, (Rounded Corners: border-radius)
rounding, (Rounded Corners: border-radius)

createLinearGradient method, (Variations on fillStyle)

createPattern method, (Variations on fillStyle)

createRadialGradient method, (Variations on fillStyle)

CSS3

about, (What is CSS3?)
Modernizr and, (Using Modernizr with CSS)
older browsers and, (Why do these changes still work in older browsers?), (Getting Older Browsers on Board)

CSS3 Sandbox, (Tools of the Trade)

CSS3, Please, (Tools of the Trade)

cubic-bezier function, (transition-timing-function)

currentSrc attribute, (Attributes)

currentTime property, (Responding When the Video Ends Playback), (Updating the Time as the Video Plays)

D

database APIs, (Web SQL and IndexedDB)

datalist element, (The datalist Element and the list Attribute)

DataTransfer Object, (The DataTransfer Object)

date and time inputs, (Dates and Times)

dates, dynamic, (Dates and Times)

dates, encoding (see time element)

datetime attribute, (The time Element)

datetime input, (Dates and Times)

datetime-local input, (Dates and Times)

debugging tools, (Testing If the Application Cache Is Storing Your Site)

:default pseudo-class, (Pseudo-classes)

defer attribute, (The async Attribute for Scripts)

definition lists, (Description (not Definition) Lists)

deprecated, vs. obsolete, (The Word “Deprecated” is Deprecated)

descendant selector, (Relational Selectors)

description lists, (Description (not Definition) Lists)

details element, (The details Element)

determineLocation method, (Are we online?)

dialogue, encoding, (Description (not Definition) Lists)

disabled attribute, (The disabled Attribute)

:disabled pseudo-class, (Pseudo-classes)

:disabled pseudo-class, (The disabled Attribute)

displayOnMap function, (Retrieving the Current Position), (Grabbing the Latitude and Longitude)

div element, (The header Element), (The section Element), (Structuring The HTML5 Herald)

dl element, (Description (not Definition) Lists)

doctype, (The Doctype), (Why do these changes still work in older browsers?)

document outline, (The Document Outline), (The hgroup Element)

document ready check, (Loading a Map)

double colon, (Pseudo-elements and Generated Content)

DPI, (Background Size)

Drag and Drop API

about, (Drag and Drop)
browser support, (Drag and Drop)
dropping objects, (Accepting Dropped Elements)
getting/setting data, (The DataTransfer Object)
making draggable, (Making Elements Draggable)
resources, (Further Reading)

draggable attribute, (Making Elements Draggable)

dragover event, (Accepting Dropped Elements)

draw method, (Drawing on the Canvas)

drawImage method, (Drawing an Image to the Canvas)

drawOneFrame functio, (Manipulating Video with Canvas)

drop event, (Accepting Dropped Elements)

drop shadows, (Drop Shadows)

duration attribute, (Attributes)

dynamic dates, (Dates and Times)

E

elements

moving, (Translation)

resizing, (Scaling)

role attribute, (How WAI-ARIA Complements Semantics)

rotating, (Rotation)

selecting, (Attribute Selectors) (see selectors)

(see also selectors)

skewing, (Skew)

em element, (Italicized Text)

email input, (Email Addresses)

embedded content, (A New Perspective on Types of Content)

:empty pseudo-class, (Structural Pseudo-classes)

:enabled pseudo-class, (Pseudo-classes)

ended event, (Responding When the Video Ends Playback)

error event, (Events)

error handling

getImageData, (Displaying Text on the Canvas)
QUOTA_EXCEEDED_ERR, (Storage Limits)
try/catch, (Storage Limits), (Displaying Text on the Canvas)

error messages, customizing, (Email Addresses)

exceptions, handling, (Storage Limits)

explicit section, (The cache.manifest File)

eXtensible Markup Language (XML), (SVG)

F

fallback section, (The Fallback Section)

figcaption element, (The figure and figcaption Elements)

figure element, (The figure and figcaption Elements)

File API, (Drag and Drop)

fillRect method, (Drawing a Rectangle to the Canvas)

fillStyle property, (Filling Our Brush with Color)

fillText method, (Displaying Text on the Canvas)

filters

for gradients, (Linear Gradients with IE Filters)
for shadows, (Drop Shadows)
in SVG, (SVG Filters)
for transforms, (Support for Internet Explorer 8 and Earlier)

Firebug, (Creating Various Font File Types: Font Squirrel)

Firefox (see browser support)

:first-child pseudo-class, (Structural Pseudo-classes)

::first-letter pseudo-element, (Pseudo-elements and Generated Content)

::first-line pseudo-element, (Pseudo-elements and Generated Content)

:first-of-type pseudo-class, (Structural Pseudo-classes)dt>

flash of unstyled text (FOUT), (Other Considerations)

Flash Player plugin, (A Bit of History), (What about Internet Explorer 6–8?)

float property, (CSS3 Multicolumn Layouts)

flow content, (A New Perspective on Types of Content)

focus, (The required Attribute), (The autofocus Attribute)

focus event, (The required Attribute)

:focus pseudo-class, (Pseudo-classes)

font property descriptors, (Font Property Descriptors)

Font Squirrel, (Creating Various Font File Types: Font Squirrel)

font stack, (Applying the Font)

fonts

using @font-face, (Implementing @font-face)

font-face rule, (Web Fonts with @font-face)

font-family declaration, (Implementing @font-face)

fonts

browser support, (Declaring Font Sources), (Creating Various Font File Types: Font Squirrel)
converting formats, (Creating Various Font File Types: Font Squirrel)
declaring sources, (Declaring Font Sources)
file size, (Creating Various Font File Types: Font Squirrel)
in canvas, (Displaying Text on the Canvas)
licensing issues, (Legal Considerations)
performance issues, (Other Considerations)
property descriptors, (Font Property Descriptors)
setting font stack, (Applying the Font)
troubleshooting, (Creating Various Font File Types: Font Squirrel)
unicode support, (Unicode Range)
web font services, (Legal Considerations)

footer element, (The footer Element)

for attribute, (The output Element)

form attribute, (The form Attribute)

form attributes

about, (HTML5 Form Attributes)
accessibility, (The required Attribute)
autocomplete, (The autocomplete Attribute), (The form Element)
autofocus, (The autofocus Attribute)
disabled, (The disabled Attribute)
form, (The form Attribute)
list, (The datalist Element and the list Attribute)
multiple, (The multiple Attribute)
pattern, (The pattern Attribute), (Numbers)
placeholder, (The placeholder Attribute), (Dates and Times)
readonly, (The readonly Attribute)
required, (The required Attribute), (Pseudo-classes)

form element, (The form Element)

form elements

basic structure, (Dependable Tools in Our Toolbox)
datalist, (The datalist Element and the list Attribute)
form, (The form Element)
HTML5 vs XHTML, (Validating HTML5 Documents)
keygen, (The keygen Element)
optgroup, (The optgroup Element)
output, (The output Element)
textarea, (The textarea Element)

form inputs (see input types)

future-proofing, (On to the Real Stuff)

G

general sibling selector, (Relational Selectors)

generated content, (Generated Content)

geo-location-javascript library, (A Final Word on Older Mobile Devices)

geolocation API

about, (Geolocation)
browser support, (Geolocation)
checking browser support, (Checking for Support with Modernizr)
coordinates available, (Geolocation’s Position Object)
getting current position, (Retrieving the Current Position)
getting latitude/longitude, (Grabbing the Latitude and Longitude)
getting timestamp, (Geolocation’s Position Object)
loading a map, (Loading a Map)
methods, (Geolocation Methods)
mobile devices, (A Final Word on Older Mobile Devices)
privacy issues, (Privacy Concerns)

getContext method, (Getting the Context)

getCurrentPosition method, (Geolocation Methods), (Retrieving the Current Position)

getImageData method, (Manipulating Images), (Security Errors with getImageData)

getItem method, (Getting and Setting Our Data), (The Shortcut Way)

Google Maps, (Grabbing the Latitude and Longitude), (Loading a Map)

graceful degradation, (transition-duration)

Gradient Generator, (Tools of the Trade)

gradients

about, (CSS3 Gradients and Multiple Backgrounds)
images vs., (CSS3 Gradients and Multiple Backgrounds)
in canvas, (Variations on fillStyle)
linear (see linear gradients)
radial (see radial gradients)
repeating, (Repeating Gradients)

grayscale, converting to, (Converting an Image from Color to Black and White), (Manipulating Video with Canvas), (SVG Filters)

H

h5o, (The Document Outline)

head element, (The head Element)

header element, (The header Element), (Structuring The HTML5 Herald)

heading content, (A New Perspective on Types of Content), (The Document Outline)

height attribute, (The Markup)

height property, (Columns and the height Property)

hgroup element, (The hgroup Element)

Hickson, Ian, (The nav Element)

hidden input, (The required Attribute)

high attribute, (The progress and meter Elements)

hints, on forms, (The placeholder Attribute)

:hover pseudo-class, (Pseudo-classes)

HSL notation, (HSL and HSLA)

.htaccess file, (MIME Types), (Setting the Content Type on Your Server), (Caching the Cache)

html element, (The html Element)

HTML5

about, (What is HTML5?)
basic page structure, (A Basic HTML5 Template)
changes to existing features, (Changes to Existing Features)
choice of new elements, (The footer Element)
content types, (A New Perspective on Types of Content)
older browsers and, (Why do these changes still work in older browsers?), (Getting Older Browsers on Board)
specifications, (Would the real HTML5 spec please stand up?)
validation changes, (Validating HTML5 Documents)
XHTML vs, (Shouldn’t all tags be closed?), (Validating HTML5 Documents)

HTML5 shim (see HTML5 shiv)

HTML5 shiv, (Leveling the Playing Field), (Getting Older Browsers on Board), (Support for Styling HTML5 Elements in IE8 and Earlier)

hyphenation, (Other Considerations)

I

i element, (Italicized Text)

image method, (Drawing an Image to Raphaël’s Container)

images

converting color to grayscale, (Converting an Image from Color to Black and White)
drawing, (Drawing an Image to the Canvas)
as fills, (Variations on fillStyle)
gradients vs., (CSS3 Gradients and Multiple Backgrounds)
manipulating, (Manipulating Images), (Security Errors with getImageData)
rotating, (Rotating a Spinner with Raphaël)

implied sections, (The Document Outline), (The hgroup Element)

:in-range pseudo-class, (Pseudo-classes)

:indeterminate pseudo-class, (Pseudo-classes)

IndexedDB, (Web SQL and IndexedDB)

Inkscape, (Using Inkscape to Create SVG Images)

inline elements, (A New Perspective on Types of Content), (Translation), (Scaling)

input types

color, (The required Attribute), (Colors)
date and time, (Dates and Times)
email address, (Email Addresses)
full list, (HTML5 New Form Input Types)
numbers, (Numbers)
phone numbers, (Telephone Numbers)
range, (The required Attribute), (Ranges)
search, (Search)
URLs, (URLs)

inset shadows, (Inset and Multiple Shadows)

integer/string conversion, (Converting Stored Data)

interactive content, (A New Perspective on Types of Content)

Internet Explorer, (Introducing HTML5 and CSS3)

(see also browser support)
font support, (Declaring Font Sources)
gradient filters, (Linear Gradients with IE Filters)
HTML5 support, (Getting Older Browsers on Board)
Modernizr and, (Support for Styling HTML5 Elements in IE8 and Earlier)
offline API and, (Offline Web Applications)
transforms support, (Support for Internet Explorer 8 and Earlier)
unrecognized elements, (Leveling the Playing Field)

:invalid pseudo-class, (Pseudo-classes)

:invalid pseudo-class, (Styling Required Form Fields)

italic text, (Italicized Text)

itemtype attribute, (Microdata Namespaces)

J

JavaScript, (Geolocation, Offline Web Apps, and Web Storage), (Modernizr)

(see also APIs (Application Programming Interface))
(see also Modernizr)
caching, (Introducing the Media Elements API)
collapsible text, (The details Element)
for columns, (Progressive Enhancement)
default HTML5 styling, (Getting Older Browsers on Board)
disabled, (Leveling the Playing Field)
embedding, (The Rest is History)
focus event, (The required Attribute)
form validation and, (Styling Required Form Fields)
forms, (HTML5 Forms)
GoogleMaps, (Grabbing the Latitude and Longitude)
h5o, (The Document Outline)
html5 shiv, (Leveling the Playing Field), (Getting Older Browsers on Board), (Support for Styling HTML5 Elements in IE8 and Earlier)
hyphenation, (Other Considerations)
jQuery library, (Polyfilling Support with JavaScript), (The DataTransfer Object)
placeholder attribute polyfill, (Polyfilling Support with JavaScript)
Raphaël Library, (Using the Raphaël Library)
resources, (Geolocation, Offline Web Apps, and Web Storage)
running in background, (Web Workers)
scoped styles, (Scoped Styles)
string/integer conversion, (Converting Stored Data)
for transitions, (Transitions)

jQuery library, (Polyfilling Support with JavaScript), (The DataTransfer Object)

JW Player, (What about Internet Explorer 6–8?)

K

key/value pairs, (What Web Storage Data Looks Like)
keyframes, (Keyframes)
keygen element, (The keygen Element)
kind attribute, (Accessible Media)

L

lang attribute, (The html Element)

:lang pseudo-class, (Structural Pseudo-classes)

:last-child pseudo-class, (Structural Pseudo-classes)

:last-of-type pseudo-class, (Structural Pseudo-classes)

Lawson, Bruce, (The section Element)

line breaks, (The textarea Element)

linear gradients

about, (Linear Gradients)
browser support, (Linear Gradients), (The W3C Syntax), (The Old WebKit Syntax)
color stops, (The W3C Syntax), (The Old WebKit Syntax), (Linear Gradients with SVG)
direction, (The W3C Syntax), (The Old WebKit Syntax)
in Internet Explorer, (Linear Gradients with IE Filters)
from Photoshop, (Putting It All Together)
stripes, (The W3C Syntax)
SVG files, (Linear Gradients with SVG)
tools for creating, (Tools of the Trade)
W3C syntax, (The W3C Syntax)
WebKit syntax, (The Old WebKit Syntax)

linearGradient element, (Linear Gradients with SVG)

link element, (The head Element), (Why do these changes still work in older browsers?)

lint tools, (Validating HTML5 Documents)

list attribute, (The datalist Element and the list Attribute)

lists

datalists, (The datalist Element and the list Attribute)
description/definition, (Description (not Definition) Lists)
ordered, (Customized Ordered Lists)

loadeddata event, (Events)

loadedmetadata event, (Events)

local storage, (Local Storage), (Viewing Our Web Storage Values with the Web Inspector)

localStorage[key], (The Shortcut Way)

loop attribute, (The loop Attribute), (What about audio?)

low attribute, (The progress and meter Elements)

M

manifest attribute, (Pointing Your HTML to the Manifest File)

mark element, (The mark Element)

max attribute, (The progress and meter Elements), (Numbers), (Ranges)

media queries, (Media Queries)

browser support, (Browser Support)
syntax, (Syntax)

meta element, (The head Element)

metadata content, (A New Perspective on Types of Content)

metadata, loading video, (Events)

meter element, (The progress and meter Elements)

microdata

about, (Microdata)
adding, (The Microdata Syntax)
item types, (Microdata Namespaces)
resources, (Further Reading)
semantic elements vs, (Aren’t HTML5’s semantics enough?)

MIME types, (MIME Types)

min attribute, (The progress and meter Elements), (Numbers), (Ranges)

Miro Video Converter, (Encoding Video Files for Use on the Web)

mobile devices, (The Growing Mobile Market), (The preload Attribute), (Background Size), (Declaring Font Sources), (Geolocation’s Position Object), (A Final Word on Older Mobile Devices), (Offline Web Applications)

(see also offline web applications)

Modernizr

about, (Modernizr)
with CSS, (Using Modernizr with CSS)
geolocation API and, (Checking for Support with Modernizr)
HTML5 shiv and, (Getting Older Browsers on Board)
Internet Explorer and, (Support for Styling HTML5 Elements in IE8 and Earlier)
with JavaScript, (Using Modernizr with JavaScript)
placeholder attribute, (Polyfilling Support with JavaScript)
resources, (Further Reading)
video API and, (Introducing the Media Elements API)

month input, (Dates and Times)

multiple attribute, (The multiple Attribute)

muted attribute, (Muting and Unmuting the Video’s Audio Track)

muting/unmuting, (The audio Attribute), (Muting and Unmuting the Video’s Audio Track)

N

names, in citations, (A cite for Sore Eyes)
nav element, (The nav Element), (The Current State of WAI-ARIA)
navigator.onLine property, (Are we online?)
negative delays, (transition-delay)
NEWT (New Exciting Web Technologies), (What is HTML5?)
nightly builds (WebKit), (Linear Gradients)
no-js class, (Using Modernizr with CSS)
normalization (of date/time) (see time element)
:not pseudo-class, (Structural Pseudo-classes)
novalidate attribute, (The form Element)
:nth-child pseudo-class, (Structural Pseudo-classes)
:nth-last-child pseudo-class, (Structural Pseudo-classes)
:nth-last-of-type pseudo-class, (Structural Pseudo-classes)
:nth-of-type pseudo-class, (Structural Pseudo-classes)
number input, (Numbers)
numeric pseudo-classes, (Structural Pseudo-classes)

O

obsolete, vs. deprecated, (The Word “Deprecated” is Deprecated)

offline site access

application cache, (How It Works: the HTML5 Application Cache), (Testing If the Application Cache Is Storing Your Site)
application cache size, (Limits to Offline Web Application Storage)
browser support, (Offline Web Applications)
cache refresh, (Refreshing the Cache)
cache.manifest file, (The cache.manifest File), (Pointing Your HTML to the Manifest File), (Caching the Cache)
handling load failure, (The Fallback Section)
manifest attribute, (Pointing Your HTML to the Manifest File)
prompting for, (Getting Permission to Store the Site Offline)
resources, (Further Reading)
setting content type, (Setting the Content Type on Your Server)
testing functionality, (Going Offline to Test)
testing whether user is online, (Are we online?)

ol element, (Customized Ordered Lists)

online/offline condition, testing, (Are we online?)

:only-child pseudo-class, (Structural Pseudo-classes)

:only-of-type pseudo-class, (Structural Pseudo-classes)

opacity property, (Opacity)

(see also transparency)

Opera (see browser support)

optgroup element, (The optgroup Element)

optimum attribute, (The progress and meter Elements)

:optional pseudo-class, (Pseudo-classes)

ordered lists, (Customized Ordered Lists)

origin-based security, (Security Considerations)

origin-based security issues, (Security Errors with getImageData)

originalEvent method, (The DataTransfer Object)

:out-of-range pseudo-class, (Pseudo-classes)

outline, document, (The Document Outline), (The hgroup Element)

output element, (The output Element)

P

page structure, (Defining the Page’s Structure)

parseInt method, (Converting Stored Data)

paths, (Drawing Other Shapes by Creating Paths)

pattern attribute, (The pattern Attribute), (Numbers)

pause method, (Playing and Pausing the Video)

paused attribute, (Playing and Pausing the Video)

persistent storage (see local storage)

phone number input, (Telephone Numbers)

phrasing content, (A New Perspective on Types of Content)

placeholder attribute, (The placeholder Attribute), (Dates and Times)

play method, (Playing and Pausing the Video)

playbackRate attribute, (Attributes)

playing event, (Events)

polyfills, (The Varied Browser Market)

Position object, (Geolocation’s Position Object)

poster attribute, (The poster Attribute)

prefixes, vendor, (Why should I care about CSS3?)

preload attribute, (The preload Attribute), (What about audio?)

preventDefault method, (Accepting Dropped Elements)

progress element, (The progress and meter Elements)

progress meter, (The progress and meter Elements), (Using Inkscape to Create SVG Images)

pseudo-classes, (Structural Pseudo-classes)

(see also specific pseudo-classes by name, e.g. :visited)
attribute or state, (Pseudo-classes)
numeric, (Structural Pseudo-classes)
structural, (Structural Pseudo-classes)

pseudo-elements, (Pseudo-elements and Generated Content)

pubdate attribute, (The time Element)

putImageData method, (Converting an Image from Color to Black and White)

Q

Quartz 2D, (A Bit of Canvas History)
quirks mode, (Why do these changes still work in older browsers?)
QUOTA_EXCEEDED_ERR, (Storage Limits)

R

radial gradients

about, (Radial Gradients), (The W3C Syntax)
W3C syntax, (The W3C Syntax)
WebKit syntax, (The Old WebKit Syntax)

range input, (The required Attribute), (Ranges), (Pseudo-classes)

Raphaël Library, (Using the Raphaël Library)

Raphael method, (Drawing an Image to Raphaël’s Container)

:read-only pseudo-class, (Pseudo-classes)

:read-write pseudo-class, (Pseudo-classes)

readonly attribute, (The readonly Attribute)

readyState attribute, (Attributes)

redundant values, (What about other XHTML-based syntax customs?)

regular expressions, matching, (The pattern Attribute)

relational selectors, (Relational Selectors)

removeItem method, (Removing Items and Clearing Data)

repeating gradients, (Repeating Gradients)

required attribute, (The required Attribute), (Pseudo-classes)

required fields

encoding, (The required Attribute)
error messages, (The required Attribute)
styling, (Styling Required Form Fields)

:required pseudo-class, (Pseudo-classes)

:required pseudo-class, (Styling Required Form Fields)

Resig, John, (Leveling the Playing Field)

reversed attribute, (Customized Ordered Lists)

reversed sliders, (Ranges)

RGB to grayscale formula, (Converting an Image from Color to Black and White)

RGBA notation, (RGBA), (Filling Our Brush with Color)

rivers, in text, (Other Considerations)

role attribute, (How WAI-ARIA Complements Semantics)

:root pseudo-class, (Structural Pseudo-classes)

rotate function, (Rotation)

S

Safari, (Introducing HTML5 and CSS3)

(see also browser support)
local storage viewing/changing, (Viewing Our Web Storage Values with the Web Inspector)
offline file loading, (The Fallback Section)

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

scale function, (Scaling)

scoped element, (Scoped Styles)

scoped styles, (Scoped Styles)

screen pixel density, (Background Size)

screen readers (see accessibility)

script attribute, (The async Attribute for Scripts)

script element, (The Rest is History), (Why do these changes still work in older browsers?)

scripts, running in background, (Web Workers)

search input, (Search)

section element, (The section Element), (Structuring The HTML5 Herald)

sectioning content, (The header Element), (A New Perspective on Types of Content), (The Document Outline)

sectioning roots, (The Document Outline)

sections, implied, (The Document Outline), (The hgroup Element)

security issues

image manipulation, (Security Errors with getImageData)
:visited pseudo-class, (Pseudo-classes)
web storage, (Security Considerations)

seeked event, (Events)

seeking event, (Events)

::selection pseudo-element, (::selection)

selectors

about, (CSS3 Selectors)
attribute, (Attribute Selectors)
backwards, (Relational Selectors)
pseudo-classes, (Pseudo-classes)
pseudo-elements, (Pseudo-elements and Generated Content)
relational, (Relational Selectors)
structural, (Structural Pseudo-classes)

semantic elements

about, (Defining the Page’s Structure), (The section Element), (The footer Element)
article, (The article Element), (Structuring The HTML5 Herald)
aside, (The aside Element), (Structuring The HTML5 Herald)
footer, (The footer Element)
header, (The header Element), (Structuring The HTML5 Herald)
microdata vs, (Aren’t HTML5’s semantics enough?)
nav, (The nav Element), (The Current State of WAI-ARIA)
section, (The section Element), (Structuring The HTML5 Herald)

semantics, (Defining the Page’s Structure), (How WAI-ARIA Complements Semantics)

session storage, (Session Storage), (Viewing Our Web Storage Values with the Web Inspector)

setCustomValidity method, (Email Addresses), (Telephone Numbers)

setItem method, (Getting and Setting Our Data)

setTimeout method, (Manipulating Video with Canvas)

shadows

drop, (Drop Shadows)
inset, (Inset and Multiple Shadows)
text, (Text Shadow)

sibling selectors, (Relational Selectors)

skew function, (Skew)

sliders, (Ranges)

small element, (Big and Small Text)

source element, (Adding Support for Multiple Video Formats)

span tags, (The progress and meter Elements)

spread distance, (Drop Shadows)

src attribute, (The Markup), (Adding Support for Multiple Video Formats), (Attributes)

src property, (Declaring Font Sources)

standards mode, (Why do these changes still work in older browsers?)

start attribute, (Customized Ordered Lists)

step attribute, (Numbers), (Ranges), (Dates and Times)

storage object, (Getting and Setting Our Data)

storage, web (see web storage)

strict validation, (Validating HTML5 Documents)

string/integer conversion, (Converting Stored Data)

strokeRect method, (Drawing a Rectangle to the Canvas)

strokeStyle property, (Filling Our Brush with Color)

strong element, (Bold Text)

style element, (Scoped Styles)

styles

default HTML5, (Getting Older Browsers on Board)
for required fields, (Styling Required Form Fields)
scoped, (Scoped Styles)

stylesheets, linking to, (The head Element)

summary element, (The details Element)

SVG (Scalable Vector Graphics)

about, (SVG)
browser support, (SVG)
canvas vs, (Canvas versus SVG)
drawing shapes, (Drawing in SVG)
filters, (SVG Filters)
font format, (Declaring Font Sources)
gradients, (Linear Gradients with SVG)
Inkscape, (Using Inkscape to Create SVG Images)
Raphaël Library, (Using the Raphaël Library)
rotating objects, (Rotating a Spinner with Raphaël)

# (hash), in cache.manifest file, (The cache.manifest File)

$ (dollar sign), in attribute selectors, (Attribute Selectors)

* (asterisk)

in attribute selectors, (Attribute Selectors)
in cache.manifest file, (The cache.manifest File)

:: (double colon), (Pseudo-elements and Generated Content)

^ (caret), in attribute selectors, (Attribute Selectors)

| (vertical bar), in attribute selectors, (Attribute Selectors)

~ (tilde), in attribute selectors, (Attribute Selectors)

T

target attribute, (Validating HTML5 Documents)

:target pseudo-class, (Pseudo-classes)

tel input, (Telephone Numbers)

text, (Other Considerations)

(see also fonts)
bolding, (Bold Text)
collapsing, (The details Element)
displaying in canvas, (Displaying Text on the Canvas)
FOUT effect, (Other Considerations)
italicizing, (Italicized Text)
rotating, (Rotation)

text shadows, (Text Shadow)

text-shadow property, (Text Shadow)

textarea element, (Validating HTML5 Documents), (The textarea Element)

time element, (The time Element)

time input, (Dates and Times)

timeupdate event, (Updating the Time as the Video Plays)

toDataURL method, (Saving Canvas Drawings)

track element, (Accessible Media)

transform-origin property, (Changing the Origin of the Transform)

transforms

about, (Transforms)
browser support, (Transforms), (Translation), (Changing the Origin of the Transform)
in Internet Explorer, (Support for Internet Explorer 8 and Earlier)
order of, (Rotation)
rotation, (Rotation)
scaling, (Scaling)
setting origins, (Changing the Origin of the Transform)
skew, (Skew)
translations, (Translation)

transition property, (The transition Shorthand Property)

transition-delay property, (transition-delay)

transition-duration property, (transition-duration)

transition-property, (transition-property)

transition-timing-function, (transition-timing-function)

transitions

about, (Transitions)
delaying start of, (transition-delay)
duration, (transition-duration)
multiple, (Multiple Transitions)
older browsers and, (transition-duration)
pace of, (transition-timing-function)
properties available, (transition-property)
shorthand for, (The transition Shorthand Property)

translate function, (Translation)

transparency

animations, (Keyframes)
in canvas, (Filling Our Brush with Color), (Displaying Text on the Canvas)
colors, (RGBA), (HSL and HSLA), (Opacity)
opacity property, (Opacity)
shadows and, (Drop Shadows)

try/catch blocks, (Storage Limits), (Displaying Text on the Canvas)

two-way communication, (Web Sockets)

type attribute, (The head Element), (The Rest is History), (Adding Support for Multiple Video Formats)

U

unicode-range descriptor, (Unicode Range)
unrecognized elements, (Leveling the Playing Field), (Support for Styling HTML5 Elements in IE8 and Earlier)
url input, (URLs)
user agents, (The nav Element)
utf-8, (The head Element)

V

:valid pseudo-class, (Pseudo-classes)

:valid pseudo-class, (Styling Required Form Fields)

validation

client-side, (HTML5 Forms)
customizing error messages, (Email Addresses)
of email addresses, (Email Addresses)
of HTML5 files, (Validating HTML5 Documents)
of phone numbers, (Telephone Numbers)
of required fields, (The required Attribute)
of URLs, (URLs)

value attribute, (The progress and meter Elements)

vendor prefixes, (Why should I care about CSS3?)

video

autoplaying, (The autoplay Attribute)
browser support, (The Current State of Play), (What combinations work in current browsers?), (What about Internet Explorer 6–8?)
captions, (Accessible Media)
color to grayscale conversion, (Manipulating Video with Canvas)
custom controls (see video API)
disabling "save as", (Playing and Pausing the Video)
encoding for the web, (Encoding Video Files for Use on the Web)
licensing issues, (What combinations work in current browsers?)
looping, (The loop Attribute)
MIME types, (MIME Types)
multiple sources, (Adding Support for Multiple Video Formats)
muting, (The audio Attribute)
native controls, (Enabling Native Controls), (Introducing the Media Elements API)
preloading, (The preload Attribute)
setting dimensions, (The Markup)
teaser image, (The poster Attribute)
video element, (The Markup)

video API

about, (Creating Custom Controls)
addEventListener, (Introducing the Media Elements API), (Playing and Pausing the Video)
attribute list, (Attributes)
canplaythrough event, (Introducing the Media Elements API)
custom controls, (Some Markup and Styling to Get Us Started)
events, (Events)
HTML code, (Some Markup and Styling to Get Us Started)
muting/unmuting, (Muting and Unmuting the Video’s Audio Track)
playing and pausing, (Playing and Pausing the Video)
resetting to start, (Responding When the Video Ends Playback)
timer, (Updating the Time as the Video Plays)
videoEl variable, (Introducing the Media Elements API)

video codecs, (Video Codecs)

video containers, (Video Container Formats)

video conversion, (Encoding Video Files for Use on the Web), (Manipulating Video with Canvas)

video element, (The Markup), (What about Internet Explorer 6–8?), (Creating Custom Controls), (Playing and Pausing the Video)

video object, (Manipulating Video with Canvas)

videoEl variable, (Introducing the Media Elements API)

videoHeight attribute, (Attributes)

videoWidth attribute, (Attributes)

:visited pseudo-class, (Pseudo-classes)

volumechange event, (Muting and Unmuting the Video’s Audio Track)

W

W3C, (Would the real HTML5 spec please stand up?)

WAI-ARIA, (The required Attribute), (Feeding the WAI-ARIA Cat), (WAI-ARIA)

watchPosition, (Geolocation Methods)

web font services, (Legal Considerations)

Web Inspector, (Testing If the Application Cache Is Storing Your Site), (Viewing Our Web Storage Values with the Web Inspector)

Web Sockets API, (Web Sockets)

Web SQL, (Web SQL and IndexedDB)

web storage

across domains, (Security Considerations)
browser dependence, (Local Storage)
browser support, (Web Storage)
clearing data, (Removing Items and Clearing Data)
converting data, (Converting Stored Data)
data format, (What Web Storage Data Looks Like)
databases and, (Web SQL and IndexedDB)
exception handling, (Storage Limits)
getting/setting data, (Getting and Setting Our Data), (The Shortcut Way)
local storage, (Viewing Our Web Storage Values with the Web Inspector)
resources, (Viewing Our Web Storage Values with the Web Inspector)
size limits, (Storage Limits)
types of, (Two Kinds of Storage)

Web Workers API, (Web Workers)

WebGL, (Getting the Context)

WebKit browsers, (Introducing HTML5 and CSS3), (URLs), (Linear Gradients)

(see also browser support)

webkit-gradient property, (The Old WebKit Syntax)

week input, (Dates and Times)

WHATWG (Web Hypertext Application Technology Working Group), (Would the real HTML5 spec please stand up?)

whitelist, (The cache.manifest File)

width attribute, (The Markup)

window.offline event, (Are we online?)

window.online event, (Are we online?)

"work offline" option, (Going Offline to Test)

wrap attribute, (The textarea Element)

X

XHTML, vs. HTML5, (Shouldn’t all tags be closed?), (Validating HTML5 Documents)
XML (eXtensible Markup Language), (SVG)
xmlns attribute, (The html Element), (Why do these changes still work in older browsers?)

Y

YouTube, (Playing and Pausing the Video)

SitePoint

SitePoint

HTML5 & CSS3 for the Real World

The Index

Symbols

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

More Information

Order the Book, eBook and Course for $59.95

What’s the Course?

The HTML5 + CSS3 Online Course

Customer Reviews

Live, unmoderated reviews from our customers, typos and all.

See More Reviews or Write Your Own