Professional Documents
Culture Documents
180
Sergey’s
HTML5
& CSS3
Quick Reference
Second Edition
www.itpub.net
Sergey’s HTML5 & CSS3
Quick Reference.
2012
Belisso Corporation
Copyright © 2009-2012 by Belisso Corp, All Rights Reserved.
Copyright © 2009-2012 by Sergey Mavrody, All Rights Reserved.
Copyright © 2009-2012 W3C ® (MIT, ERCIM, Keio), All Rights Reserved.
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any
means, electronic or mechanical, including photocopying, recording, or by any information
storage and retrieval system, without the written permission of the author.
Notice of Liability
This information is provided “as is”, without warranty of any kind, express or implied, including
but not limited to the warranties of merchantability, fitness for a particular purpose and non
infringement. In no event we shall Belisso, Corp be liable for any claim, damages or other
liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection
with Belisso, Corp or the use or other dealings in Belisso, Corp.
2. HTML Syntax.................................................15
HTML document.............................................................15
Basics...............................................................................15
Elements and Tags.........................................................15
Tag nesting.....................................................................15
Void Elements.................................................................16
Attributes ......................................................................16
Boolean attribute...........................................................16
XHTML5............................................................................17
Polyglot HTML document..............................................17
XHTML5 defined .............................................................17
Document Type and Structure.....................................18
3
MIME Type.......................................................................18
Common MIME Types....................................................19
Document Object Model (DOM)................................20
Semantic Elements........................................................20
Syntax Summary.............................................................21
General Syntax Rules.....................................................21
(X)HTML5 void tag syntax..............................................22
HTML5 elements with optional tags.............................23
Elements by Type...........................................................25
Browser Compatibility Scripting....................................26
Modernizr........................................................................26
HTML5 enabling scripts - Polyfills...................................27
3. HTML5 Elements...........................................29
General Definitions........................................................29
Chapter Legend & Conventions.................................29
Summary of HTML5 Elements........................................29
HTML5 Elements.............................................................29
HTML5 Browser Compatibility .......................................65
Elements..........................................................................65
www.itpub.net
HTML5 Selectors API Level 2........................................146
CSS3 Browser Compatibility Summary ......................147
6. HTML5 APIs.................................................149
What is API....................................................................149
HTML5 and Related Technologies.............................149
Semantics.....................................................................150
Semantic Web .............................................................150
Microdata.....................................................................150
HTML5 + RDFa...............................................................152
MathML.........................................................................154
WAI-ARIA.......................................................................155
Offline & Storage..........................................................156
Web Storage................................................................156
HTTP Caching and Serving..........................................158
Indexed Database API................................................159
Web SQL database.....................................................162
Device Access.............................................................163
Contacts API.................................................................163
Drag and Drop.............................................................165
Geolocation.................................................................168
Media Capture............................................................172
File API ..........................................................................174
Touch Events.................................................................176
Real-Time Connectivity...............................................177
Web Sockets.................................................................177
Web Messaging...........................................................179
Web Workers................................................................181
Multimedia and Graphics...........................................183
Audio and Video.........................................................183
Canvas..........................................................................185
Scalable Vector Graphic............................................190
Performance & Integration.........................................193
XMLHttpRequest...........................................................193
Navigation Timing........................................................194
6
Browser Compatibility..................................................195
7. Appendix...................................................197
Online Resources.........................................................197
HTML5 and CSS3 desktop tools..................................197
X11 color keywords......................................................198
HTML special characters.............................................202
Properties which can be animated...........................203
Acknowledgements....................................................204
8. Index.................................................. 207-218
7
In the Chapter 1
■■ Overview 9
■■ About this book 9
■■ What is HTML? 10
■■ Major HTML versions 10
■■ HTML5 10
■■ XHTML5 11
■■ CSS3 11
■■ Why use HTML5 11
■■ HTML5 advantages 11
■■ Who this book is for 12
■■ HTML5 Branding 12
■■ The logo 13
■■ The technology class icons 13
8
Overview > About this book
1. Intro to HTML5
Overview
Today you can find a wealth of HTML5 information on the web including references, tutorials and tips.
There are also a few very good books available which concentrate on certain HTMl5 features. However
there is always a need for a relatively concise summary of all that information in one handy reference-
style book.
This book is an essential technical dictionary for professional web designers and developers,
conveniently summarizing over 3000 pages of (X)HTML5 and CSS3 specifications and covering the most
common and fundamental concepts and specs, including tags, attributes, values, objects, properties,
methods, events, and APIs.
Topics include:
■■ Introduction to HTML5
■■ HTML5 and XTML5 syntax rules
■■ Document semantic structure
■■ Summary of HTML5 Elements and Attributes
■■ HTML5 forms
■■ Global attributes and events
■■ Summary of CSS3 properties
■■ HTML5 APIs, including Canvas, SVG, Video, Audio, Web Workers, Web Sockets, Microdata,
Geolocation, Web Storage and more.
The author’s goal was to create a one-stop reference source which is comprehensive but still concise,
simple, easy-to-read, and structured.
9
Chapter 1. Intro to HTML5
What is HTML?
The well-known acronym ‘HTML’ stands for HyperText Markup Language. It is the primary markup
language for the world wide web, capable of creating web documents by specifying content
structure including headings, paragraphs, tables, footers and other elements.
The HTML markup also typically utilizes CSS (Cascading Style Sheets) to describe the visual appearance
of content. CSS enables the separation of document HTML content from document visual presentation,
such as the layout, colors, and fonts.
HTML allows for the creation of interactive forms as well as the embedding of images, video, audio
and other objects. HTML code can embed scripts, such as JavaScript, which contribute to dynamic
behavior of web pages.
HTML5
The HTML5 development began in 2004 by an informal group of experts from Apple Computer, the
Mozilla Foundation, and Opera Software forming the WHATWG group (Web Hypertext Application
Technology Working Group). Ian Hickson of Google, Inc. is the lead author on the HTML5 specification.
The WHATWG HTML5 specification was eventually adopted by the World Wide Web Consortium (W3C)
in 2007.
■■ The HTML5 markup is more backward compatible with HTML 4 and XHTML 1.0 vs. XHTML 2.0.
■■ HTML5 introduces many new elements, including semantic replacements for generic HTML
elements. For instance new layout elements, such as <header>, <footer>, <section>,
<nav>, <article> were created. Many HTML 4 elements were retired (deprecated).
■■ HTML5 also introduces many additional plugin-free capabilities such as standardized video and
audio interface, raster imaging, local database, offline mode, more efficient multi-threaded
JavaScript, Cross Document Messaging and more.
10
Overview > XHTML5
XHTML5
XHTML5 is the XML serialization of HTML5. XHTML5 document is served with an XML MIME type, e.g.
application/xhtml+xml. Also XHTML5 requires stricter well-formed syntax. In XHTML5 document the
HTML5 document type declaration is optional and may be omitted. XHTML5 may be utilized to extend
HTML5 to some XML-based technologies such as SVG and MathML.
CSS3
The new version of CSS is introduced and approved in modules which allow for more flexibility to be
released. New features of CSS3 are quite extensive:
■■ Selectors offer a much more specific way of selecting elements, including matching on attributes
and attribute values, structural pseudo-classes, target pseudo-class to style only elements that are
targeted in the URL, a checked pseudo-class to style any element that is checked such as radio or
checkbox elements
■■ Text Effects and Layout, including hyphenation, ‘whitespace’, and justification of text
■■ Paged Media and Generated Content, supporting more options in paged media, such as running
headers, footers, page numbering, footnotes and cross-references
■■ Multi-Column Layout properties allow for multiple column layouts
■■ First-Letter and First-Line pseudo-classes
■■ Ruby module offers ability to add small annotations on top or next to words, used in Asian scripts
11
www.itpub.net
Chapter 1. Intro to HTML5
User Interface
Scope Functional Specs Use cases, data specs Business Systems Analyst
Customer
HTML5 Branding
On 18 January 2011, the W3C introduced HTML5 visual branding: the logo and the technology class
icons represent aspects of modern Web applications and Web sites. The logo, icons, and website are
licensed under Creative Commons Attribution 3.0 Unported.
The W3C encourages using this visual branding as a way of showing support for HTML5 if the web
site/application is in fact built on HTML5 technologies. The HTML5 visual identity graphics can be
downloaded here: http://www.w3.org/html/logo
12
HTML5 Branding > The logo
The logo
The HTML5 logo does not imply the code validity or conformance.
Device Access
Beginning with the Geolocation API, Web Applications can present rich, device-aware
features and experiences, including audio/video input access to microphones and
cameras, to local data such as contacts & events, and tilt orientation.
Connectivity
More efficient connectivity means more real-time chats, faster games, and better
communication. Web Sockets and Server-Sent Events are pushing (pun intended) data
between client and server more efficiently than ever before.
Multimedia
HTML5 introduces built-in media support via the <audio> and <video> elements,
without requiring a plug-in or external player, offering the ability to easily embed media
into HTML documents.
CSS3
CSS3 delivers a wide range of stylization and effects, enhancing the web app without
sacrificing your semantic structure or performance. Additionally Web Open Font
Format provides typographic flexibility and control far beyond anything offered before.
13
In the Chapter 2
■■ HTML document 15
-- Basics 15
-- Elements and Tags 15
-- Tag nesting 15
-- Void Elements 16
-- Attributes 16
-- Boolean attribute 16
■■ XHTML5 17
-- Polyglot HTML document 17
-- XHTML5 defined 17
■■ Document Type and Structure 18
-- MIME Type 18
-- Common MIME Types 19
-- Document Object Model (DOM) 20
-- Semantic Elements 20
■■ Syntax Summary 21
-- General Syntax Rules 21
-- (X)HTML5 void tag syntax 22
-- HTML5 elements with optional tags 23
-- Elements by Type 25
-- Browser Compatibility Scripting 26
-- Modernizr 26
-- HTML5 enabling scripts - Polyfills 27
14
HTML document > Basics
2. HTML Syntax
HTML document
Basics
<!DOCTYPE html>
Generally, HTML document represents a
standalone HTML file. <html>
<head>
■■ HTML document is a code assembled of
<title>HTML5 Reference</title>
elements and text.
<!-- This is a comment. It does not
■■ Elements are basic HTML building blocks,
render in browser -->
represented by HTML tags.
</head>
■■ Elements form a hierarchical nested
structure. <body>
<h1>Overview</h1>
Elements and Tags <p>The well-known acronym
Each element is denoted by an opening tag, in HTML stands for HyperText Markup
this example: <title>, and a corresponding Language.</p>
closing tag </title>. In some cases a closing </body>
tag is not required.
</html>
The difference between an element and a tag is
that an element is a conceptual representation
of HTML tag, which can also include its attributes
and child tags. See Chapters 3, 4 for detailed
element coverage.
Tag nesting
■■ Tag is denoted by the less than (<) and
greater than (>) inequality signs. The <b><em>wrong</b></em> nesting
■■ Nested tag pairs have to be completely The <b><em>correct</em></b> nesting
within each other, without overlapping with
another pair.
15
www.itpub.net
Chapter 2. HTML Syntax
Void Elements
Void element has only an opening tag and
therefore it can not have any content. A <!--Void elements:-->
terminating slash may optionally be inserted at the
<img src=logo.gif><br />
end of the element’s tag, immediately before the
closing greater-than sign. For a non-void element <input type=text>
the terminating slash is illegal.
Attributes
An element in this example: input can have
multiple attributes type, autofocus, name. <input type=text autofocus
name=’first name’>
Boolean attribute
A boolean attribute is a property that represents either a false or true value.
16
XHTML5 > Polyglot HTML document
XHTML5
XHTML5 defined
A polyglot HTML5 code essentially becomes an XHTML5 document if it is served with the XML MIME
type [application/xhtml+xml]. In a nutshell the HTML5 polyglot document is:
17
Chapter 2. HTML Syntax
Finally, the basic XHTML5 document would look like this:
The main advantage of using XHTML5 would be the ability to extend HTML5 to XML-based technologies
such as SVG and MathML. Even though SVG and MathML are supported inline by HTML5 specification,
browser support is currently limited. The disadvantage is the lack of Internet Explorer support, more
verbose code, and error handling. Unless you need that extensibility, HTML5 is the way to go.
Ultimately, the choice between HTML5 and XHTML5 comes down to the choice of a MIME/content
type, that determines what type of document you are using. Unlike XHTML1 vs. HTML4, the XHTML5 vs.
HTML5 choice of is exclusively dependent upon the choice of the MIME type, rather than the DOCTYPE.
MIME Type
“MIME” stands for Multipurpose Internet Mail
Extensions. MIME type is also called an Internet <!DOCTYPE html>
Media Type or Content Type. It is similar to file <head>
extensions identifying a type of information and <title>HTML5</title>
it requires at least two components: a type, a <link media=screen type=text/css
subtype, and some optional parameters. href=styles.css rel=stylesheet>
</head>
<body></body>
</html>
18
Document Type and Structure > Common MIME Types
application/xhtml+xml XHTML
audio/vnd.rn-realaudio RealAudio
text/html HTML
The majority of media types could be accessed at the IANA site, the Internet Assigned Numbers
Authority: www.iana.org/assignments/media-types.
19
Chapter 2. HTML Syntax
Semantic Elements
(X)HTML5 offers new block-level and inline-level elements. The new HTML5 block-level and elements
forming semantic structure of a web page.
<body>
<header>
<section>
<header>
<hgroup>
<h1-h3>
<article>
<nav> <aside>
<footer>
<hgroup>
<h1-h3>
<article>
<footer>
<footer>
20
Syntax Summary > General Syntax Rules
<header> Title, logo, banner, Introductory Body, Section, Article Nav, Section
information
<hgroup> h1-h6 headings Article, Header h1, h2, h3, h4, h5, h6
<article> Story, subsection, blog post, Body, Section Section, Header, Footer
<address> Footer p, a
The following are the inline-level semantic elements: <del>, <s>, <ins>, <strong>, <small>, <b>,
Syntax Summary
<?xml version=”1.0”
encoding=”UTF-8”?>
White space White space characters are not White space characters are normalized
normalization in normalized to single space with some exceptions
attribute values
21
www.itpub.net
Chapter 2. HTML Syntax
Un-escaped Special Un-escaped ampersands (&) and less Un-escaped ampersands (&) and ‘less
Characters than signs (<) are generally permitted than’ signs (<) are not permitted within
within elements and attribute values. elements and attribute values and must
Some exceptions apply. be substituted respectively with &
and <
22
Syntax Summary > HTML5 elements with optional tags
br hr link source
col
23
Chapter 2. HTML Syntax
Example of a valid HTML5 document omitting optional tags, versus so called well-formed XHTML5
document, checked with Total Validator tool:
24
Syntax Summary > Elements by Type
HTML5 XHTML5
Elements by Type
Type Elements
Root ■■ html
Grouping ■■ p ■■ pre ■■ ol ■■ dl
■■ hr ■■ dialog ■■ ul ■■ dt
■■ br ■■ blockquote ■■ li ■■ dd
25
Chapter 2. HTML Syntax
Type Elements
Inline ■■ a ■■ dfn ■■ samp ■■ bdo
Semantics ■■ q ■■ abbr ■■ kbd ■■ ruby
■■ cite ■■ time ■■ sub ■■ rt
■■ em ■■ progress ■■ sup ■■ rp
■■ strong ■■ meter ■■ span
■■ small ■■ code ■■ i
■■ mark ■■ var ■■ b
Modernizr
■■ The most effective HTML5 compatibility
detection tool is Modernizr, an open <!DOCTYPE html>
source JavaScript library that detects <html>
support for HTML5 and CSS3. <head><title></title>
26
HTML5 enabling scripts - Polyfills
■■ HTML5 Modernizr is a detection tool: it does not add missing HTML5 functionality to older browsers,
however Modernizr site has a page “HTML5-Cross-browser-Polyfills”, which is a collection of useful
links for many various solutions of this kind.
■■ Polyfill is a piece of code or plugin that allows developer to provide a technology browser is
missing. Polyfills fill in the gaps to make HTML5 and CSS3 usable today even in older browsers.
27
www.itpub.net
3. HTML5 Elements
In the Chapter 3
■■ General Definitions 29
■■ Summary of HTML5 Elements 29
-- <article> 32
-- <audio> 33
-- <button> 34
-- <canvas> 35
-- <datalist> 38
-- <header> 42
-- <input> 44
-- <output> 54
-- <ruby> 55
-- <section> 56
-- <textarea> 61
-- <time> 62
-- <video> 64
■■ HTML5 Browser Compatibility 65
28
<!DOCTYPE> > General Definitions
3. HTML5 Elements
General Definitions
29
Chapter 3. HTML5 Elements
Attribute Value
coords {coordinates}
30
<area> > Summary of HTML5 Elements
Shape circ:
centerx,centery,radius
Shape poly:
x1,y1,x2,y2 ... xn,yn
media all, aural, braille, Defines the device media type of the
handheld, projection, target URL. This attribute requires the
print, screen, tty, tv, href attribute. Operators and, not
{width}, {height}, and (,) comma could be utilized to
{device-width}, combine multiple values. Example:
{device-height},
<a href=media.html
{orientation}, {grid}
{aspect-ratio}, media=”screen and (aspect-
{device-aspect-ratio}, ratio:16/9)”>
{color}, {color-index}, View Video</a>
{monochrome},
{resolution}, {scan}
31
www.itpub.net
Chapter 3. HTML5 Elements
Attribute Value
IE 6 FF 3 SF 5 CH 7 O11
IE 6 FF 4 SF 5 CH 7 O11
32
<basefont> > Summary of HTML5 Elements
IE 9 FF 3.5 SF 4 CH 7 O10.5
iOS 4 An 2.3
33
Chapter 3. HTML5 Elements
IE 7 FF 4 SF 4 CH 7 O10.5
iOS 4 An 2.3
IE 8 FF 4 SF 5 CH 9 O10.6
34
<canvas> > Summary of HTML5 Elements
Attribute Value
IE FF SF CH O
text/plain
IE 8 FF 4 SF 5 CH 9 O10.6
post
put IE FF SF CH O
35
Chapter 3. HTML5 Elements
Attribute Value
char {character}
36
<command> > Summary of HTML5 Elements
Attribute Value
charoff {number}
char {character}
charoff {number}
IE 9 FF 3.5 SF 5 CH 7 O10.6
iOS 4
37
Chapter 3. HTML5 Elements
Attribute Value
IE FF 4 SF CH O10.5
38
<div> > Summary of HTML5 Elements
Attribute Value
39
Chapter 3. HTML5 Elements
IE 6 FF 3 SF 4 CH 7 O 10
iOS 4 An 2.2
IE 9 FF 4 SF 5 CH 7 O11
iOS 4 An 2.1
40
<form> > Summary of HTML5 Elements
method get (default), post, get - sends the form data via the URL:
put, delete {URL} ? name = value & name = value
post - sends the form data in the body
of the request
41
Chapter 3. HTML5 Elements
IE 9 FF 4 SF 5 CH 7 O11
iOS 4 An 2.1
IE 9 FF 3.5 SF 4 CH 7 O10.6
iOS 3.2 An 2.1
42
<iframe> > Summary of HTML5 Elements
IE 8 FF 4 SF 5 CH 9 O 11
IE 8 FF 4 SF 5 CH 9 O 11
ongdesc {URL}
43
Chapter 3. HTML5 Elements
IE 8 FF 4 SF 5 CH 7 O10.6
iOS 4 An 2.2
44
<input> > Summary of HTML5 Elements
Attribute Value
IE 8 FF 4 SF 5 CH 9 O10.6
iOS 4 An 2.2
IE FF SF CH O
text/plain
IE 8 FF 4 SF 5 CH 9 O10.6
post
IE FF SF CH O
put
45
Chapter 3. HTML5 Elements
Attribute Value
[required] {
border-color: #88a;
-webkit-box-shadow: 0 0 3px
rgba(0, 0, 255, .5);}
<input required>
46
<keygen> > Summary of HTML5 Elements
Attribute Value
47
Chapter 3. HTML5 Elements
48
<li> > Summary of HTML5 Elements
49
Chapter 3. HTML5 Elements
IE 9 FF 4 SF 5 CH 7 O 11
IE 6 FF 1 SF 2 CH 2 O10
iOS 3 An 2
50
<meter> > Summary of HTML5 Elements
Attribute Value
IE 9 FF 4 SF 6 CH 8 O 11
Shipment Status
51
Chapter 3. HTML5 Elements
archive {URL}
classid {text_string}
codebase {URL}
codetype {MIME_type}
declare {boolean}
standby text
52
<option> > Summary of HTML5 Elements
53
Chapter 3. HTML5 Elements
IE 9 FF 4 SF 5 CH 7 O11
54
<script> > Summary of HTML5 Elements
蘋果
<s> Deprecated in HTML5
55
Chapter 3. HTML5 Elements
Attribute Value
application/ecmascript
application/javascript
text/vbscript
- Immediately (default)
- After the page has rendered
56
<strong> > Summary of HTML5 Elements
<source> <video controls autoplay> Multiple media source for video and
<source src=mymovie.mp4 audio elements. If the media attribute
type=’video/mp4; is omitted, it is the default: the media
codecs=”theora, vorbis”’> resource is for all media.
IE 9 FF 4 SF 5 CH 10 O11
An 2.2
57
Chapter 3. HTML5 Elements
IE FF SF CH O
58
<table> > Summary of HTML5 Elements
cellpadding
cellspacing
59
Chapter 3. HTML5 Elements
60
<textarea> > Summary of HTML5 Elements
char character
charoff {number}
nowrap {boolean}
nowrap {boolean}
61
Chapter 3. HTML5 Elements
Attribute Value
char character
charoff {number}
nowrap {boolean}
<time> The Apollo 11 landed the first Inline semantic element. Deprecated,
humans on the Moon on <time replaces by <data> element.
datetime=”1969-07-20T17:40”>
July 20, 1969 at 20:17:40</time>
IE 9 FF 4 SF 5 CH 7 O11
iOS 4 An 2.1
62
<var> > Summary of HTML5 Elements
Attribute Value
■ Date: 1995-12-30
■ Time:
23:59
23:59:12
23:59:12.30
■ Date and time:
- ‘Z’ is a time zone designator
- Date and time separated by ‘T’
1995-12-30T23:59
1995-12-30T23:59:58Z
1995-12-30T23:59:58-08:00
<title> <head> HTML document title, appears in the
<title>Google</title> browser’s tab/title bar
</head>
<u>
63
Chapter 3. HTML5 Elements
64
<xmp> > HTML5 Browser Compatibility
Elements
Desktop Mobile
Rubi 9* 4* 6* 6* 11.1? ✖ ✖ ✖
Overall compliance 60% 73% 82% 88% 73% 73% 33% 67%
65
In the Chapter 4
■■ HTML5 Forms aka Web Forms 2.0 67
■■ Input and Output elements 67
-- HTML5 <input> types and attributes 67
-- HTML5 <output> element 70
-- Input Type/Attribute Matrix 71
■■ Global Attributes 72
-- Summary 72
■■ Global Events 74
-- HTML Event Handler Attributes 74
-- Window 74
-- Form 75
-- Keyboard 76
-- Mouse 76
-- Media 77
66
HTML5 Forms aka Web Forms 2.0 > HTML5 <input> types and attributes
A wide range of web forms functionality is now available without the use of JavaScript, Ajax libraries or
plugin-based technologies, utilizing the updated HTML markup.
This section provides an overview of new input element types and attributes and the next chapter
offers a more complete summary.
<input type=date>
<input type=datetime>
67
Chapter 4. Form Elements & Globals
<input type=month>
<input type=week>
<input type=time>
68
Input and Output elements > HTML5 <input> types and attributes
69
Chapter 4. Form Elements & Globals
Hours: 20
Rate: $ 30
Total: $ 600
70
Input and Output elements > Input Type/Attribute Matrix
accept
alt
autocomplete
checked
files
formaction
formenctype
formmethod
formnovalidate
formtarget
height, width
list
max, min
maxlength
multiple
pattern
placeholder
readonly
required
size
src
step
value
71
Chapter 4. Form Elements & Globals
Global Attributes
Summary
■■ Global attributes apply to all HTML elements with some minor exceptions.
■■ The code examples use mainly the HTML5 syntax (not XHTML).
72
Global Attributes Summary
{URL} item=”http://abc.com/
microdata/”
73
Chapter 4. Form Elements & Globals
Global Events
Window
Applicable to the <body> tag.
74
Global Events > Form
Form
Global events triggered by actions inside a HTML form. These global events are the most common in
form elements.
75
Chapter 4. Form Elements & Globals
Keyboard
Global events triggered by a keyboard.
Mouse
Global events triggered by a mouse, or similar user actions.
76
Global Events > Media
Media
These global events triggered by videos, images and audio.
onseeking Media element's seeking attribute is true: the seeking has started
77
In the Chapter 5
■■ CSS Basics 79
-- Anatomy of a CSS Rule 79
-- Typical CSS property locations 80
-- About CSS Properties 80
-- CSS Cascading Priority 81
■■ CSS Properties 82
-- Section definitions & conventions 82
-- CSS Box Model 83
-- Background & Borders 83
-- Box Model 92
-- Font 96
-- Marquee 97
-- Text Formatting 98
-- Color; Multi-column layout 108
-- Grid Positioning 110
-- Flexible Box Layout 112
-- Speech 113
-- Table; Auto Numbering and Lists 117
-- Animation and Transitions * 118
-- Outline 120
-- 2D and 3D Transforms 121
-- CSS3 ‘Transform’ property functions 122
-- Generated Content: Paged Media 123
-- Paged Media 126
-- Image Values & Replaced Content 128
-- Line 129
-- Rubi 134
-- Hyperlink Presentation 136
-- Basic User Interface 137
-- CSS Selector Types 140
-- CSS3 Selectors 141
-- HTML5 Selectors API Level 1 and 2 146
■■ CSS3 Browser Compatibility Summary 147
78
CSS Basics > Anatomy of a CSS Rule
5. CSS3
CSS Basics
‘CSS’ stands for Cascading Style Sheets. Cascading Style Sheets are similar to style sheets found in word
processing and page layout application programs.
79
Chapter 5. CSS3
80
CSS Basics > CSS Cascading Priority
81
Chapter 5. CSS3
CSS Properties
Section definitions & conventions
■ CSS3 specifications are still in draft mode and could potentially change.
■ In this chapter of the book, shorthand properties are formatted in bold.
■ The description section has CSS properties and values delimited by single quotes.
■ In this chapter of the book, a set of property values represented by a conceptual syntax ‘model’,
which describes rules these values can be assigned.
■ Syntax model section describes several types of values, using distinctive display conventions:
- Variable data values denoted by the less than (<) and greater than (>) brackets (e.g.,
<image>, <length>, <color>, etc.). These are placeholders for actual values.
- Variable data values, that have the same set of values wile sharing the same name as a
property, appear in single quotes
(e.g., <’column-width’> , <’text-emphasis-style’>, <’background-color’>, etc.)
- Constant keyword values must appear literally, without any delimiting characters (e.g., normal,
hidden, blue, auto, etc.). The slash (/) and the comma (,) must also appear literally.
■ Pipe character (|) is a substitution for “or”, meaning that values delimited by pipe character (|)
generally can not be used together within a single property.
■ A plus symbol (+) separates options that could be used together in any order, within one property.
■ An ampersand (&) separates values which must all occur, in any order.
■ An asterisk symbol (*) indicates that the preceding value may occur zero or more times. This
model example [<URL> + [,* ]] represents a list of multiple comma-delimited URLs. Two
optional numbers in curly brackets {X-Y} indicate that the preceding group occurs X to Y times.
■ The ‘inherit’ value defines whether the value is inherited from its parent. It applies to every CSS
property, though it is omitted from the Model row in order to simplify the content. For instance, the
‘float’ property model would be: left | right | none | inherit .
On the other hand, note that not every property has the ‘inherited’ quality, defining whether a
property value is inherited from a parent element by default.
■ In this section of the book an initial default property value is indicated by underline.
■ In case an initial value indicator is omitted, it means initial value is not defined by standards and it
is implementation dependent.
■ The characters <, >, [, ], |, &, +, * , and underlining are not used in CSS syntax that way, but they
rather a convention of the Model row of this book.
■ The , symbols indicate the CSS version.
■ The color text of this kind (visible:) indicates a property value.
■ Browser compatibility matrix:
*Partial support,
m,w,o
Browser-specific syntax required, e.g. -ms- , -webkit- , -moz- , -o-
IE 9m SF 5w CH 10*
82
CSS Properties > CSS Box Model
Property Values
83
Chapter 5. CSS3
Property Values
84
CSS Properties > Background & Borders
Property Values
Example {background:url(sky.png) top left no-repeat,
url(water.png) bottom left no-repeat,
url(portrait.png) top left no-repeat;}
object.style.backgroundImage=”url(sky.png)”
85
Chapter 5. CSS3
Property Values
Example .class1, .class2
{background-image:url(img.jpg)}
.class1 {background-position: left top;}
/* 0px 0px */
.class2 {background-position:
left 15px top 20px;} /* 15px 20px */
.class3 {background:url(img.jpg)top center}
/* shorthand: 50%, 0% */
object.style.backgroundOrigin=”content-box”
//JavaScript
background-size Model <bg-size: [ <width > + <height> ] | cover | contain ]> + [,* ]
Description Preserving original aspect ratio to fit inside the background
positioning area could be achieved by values:
■ contain: scale the image to the largest size.
■ cover: scale the image to the smallest size.
86
CSS Properties > Background & Borders
Property Values
Description Background repeat behavior:
87
Chapter 5. CSS3
Property Values
border-style Model none | hidden | dotted | dashed | solid | double |
groove | ridge | inset | outset
Description Defines one common style for all 4 borders
Example .class1 {border-style: dashed solid;}
object.style.borderStyle=”dashed solid”
border-top-style Model none | hidden | dotted | dashed | solid | double |
border-right-style groove | ridge | inset | outset
Description Defines individual style for each of 4 optional borders
border-bottom-style
Example .class1 {border-top-style: dashed;
border-left-style
border-left-style: solid;}
border-width Model <numeric> | thin | medium | thick
Description Defines one common width for all 4 borders.
Numeric can be in pixels, points or em.
Example .class1 {border-width: 1.6em;}
border-top-width Model <numeric_fixed> | thin | medium | thick
border-right-width Description Defines individual width for each of 4 optional borders.
border-bottom-width Numeric can be in pixels, points or em.
Example .class1 {border-top-width: thin;
border-left-width
border-left-width: 2px;}
88
CSS Properties > Background & Borders
Property Values
Example
89
Chapter 5. CSS3
Property Values
Description Initial value: 100%. Four values represent inward offsets from
the top, right, bottom, and left edges of the image, dividing it
into nine regions: four corners, four edges and a middle. The
middle image part is discarded (treated as transparent)
unless the ‘fill’ keyword is present.
20% 30%
no browser
support
15%
90
CSS Properties > Background & Borders
Property Values
round
repeat stretch
space
Box Shadow
91
Chapter 5. CSS3
Property Values
Example 1 .class1 {border:1px solid blue;
background-color: #FFFF00;
width: 120px; height: 120px;
box-shadow: 10px 10px 20px 0px gray;
-webkit-box-shadow: 10px 10px 20px 0px gray;
-moz-box-shadow: 10px 10px 20px 0px gray;}
Example 2 /* since box-shadow property is incompatible
with most of Internet Explorer versions, this
IE-specific alternative could be used*/
.class1 { filter:
progid:DXImageTransform.Microsoft.Shadow
(color=#C6CDD5,direction=90,strength=4)
progid:DXImageTransform.Microsoft.Shadow
(color=#C6CDD5,direction=180,strength=4)}
Property Values
Description Element side where other floating elements are not allowed.
92
CSS Properties > Box Model
Property Values
93
Chapter 5. CSS3
Property Values
Example .class1 {padding: inherit 0 10%;}
/* top:inherit; left & right:0, bottom:10% */
.class2 {padding: 15px;}
/* top, left, bottom, right: 15px */
.class3 {padding: 15px 10px;}
/* top & bottom:15px; left & right:10px */
padding-bottom Model <width_numeric>
94
CSS Properties > Box Model
Property Values
95
Chapter 5. CSS3
Property Values
Property Values
Description Inherited
Example p {font-family: Arial, Gill, sans-serif;}
96
CSS Properties > Marquee
Property Values
Description Inherited
■■ <absolute> values: [ xx-small | x-small | small | medium |
large | x-large | xx-large ]
■■ <relative> values: [ larger | smaller ]
Example .class1 {font-size: 12px;} /*numeric_fixed*/
font-weight Model 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | bold |
bolder | lighter | normal
Description Inherited
Example .class1 {font-weight: bold;}
Property Values
97
Chapter 5. CSS3
Property Values
Description Defines the scrolling method for elements that overflow (see
the ‘overflow’ property.)
Property Values
98
CSS Properties > Text Formatting
Property Values
■■ ltr: left-to-right.
■■ rtl: right-to-left: useful for some languages, such as
Hebrew.
no browser support
99
Chapter 5. CSS3
Property Values
100
CSS Properties > Text Formatting
Property Values
Description Inherited. In-line content horizontal alignment to:
■ left: left edge of the line.
■ right: right edge of the line.
■ center: centered within the line.
■ justify: text is justified.
New values in CSS3:
■ start: start edge of the line.
■ end: end edge of the line.
■ <string>: table cell alignment using text string as reference.
The code example below aligns on the decimal period.
■ match-parent: inherited ‘start’ or ‘end’ keyword is
calculated from its parent’s ‘direction’ value ‘left’ or ‘right.
Description Inherited. Defines alignment method for the last line of text.
IE9 FF SF CH
IE 9 FF SF CH
101
Chapter 5. CSS3
Property Values
IE 9 FF SF CH
102
CSS Properties > Text Formatting
Property Values
103
Chapter 5. CSS3
Property Values
104
CSS Properties > Text Formatting
Property Values
IE 9 FF SF CH
indent
To be, or not to be, that is the question:
Whether ‘tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Example .class1 {text-indent: 5px hanging;}
Or to take arms against a sea of troubles,
overflow-wrap Model normal | [ break-word + hyphenate ]
Description Inherited. Defines break within a word to prevent overflow.
■ normal: regular line-break behavior.
■ break-word: a word may be broken at any point.
■ hyphenate: forced hyphenation of an unbreakable word.
IE 9 FF 4 SF 5 CH 12 O11
105
Chapter 5. CSS3
Property Values
IE 9* FF 6 SF 4w CH 10w O11
IE 9 FF SF CH
106
CSS Properties > Text Formatting
Property Values
107
Chapter 5. CSS3
Property Values
Property Values
Description Inherited
■ <color>: a keyword or a numerical RGB value.
See Appendix for the list of keyword values.
■ attr(X,color): the function returns color as value of attribute X
Property Values
108
CSS Properties > Multi-column layout
Property Values
Description Column/page break method for the multiple column layout:
■ auto: neither force nor forbid a break
■ always|avoid: force/avoid a break
■ left | right: force 1 or 2 breaks to format the next page as
a left/right page
■ page | column: force a break
■ avoid-page |avoid-column: avoid a break
Example .class1 {break-after: avoid-page;}
109
Chapter 5. CSS3
Property Values
Property Values
110
CSS Properties > Grid Positioning
Property Values
Description Defines grid-based layout.
IE 10m FF SF CH
Example 1
Tip: Use grid system to
design layout similar to At vero eos et accusamus et
iusto odio dignissimos ducimus
voluptatibus maiores alias
consequatur aut perferendis
modi tempora incidunt ut labore
et dolore magnam aliquam
creating predictable
autem quibusdam et aut officiis fugit, sed quia consequuntur rerum facilis est et expedita
debitis aut rerum necessitatibus magni dolores eos qui ratione distinctio. Nam libero tempore,
saepe eveniet ut et voluptates voluptatem sequi nesciunt. cum soluta nobis est eligendi
cognitive patterns. repudiandae sint et molestiae Neque porro quisquam est, qui optio cumque nihil impedit
non recusandae. Itaque earum dolorem ipsum quia dolor sit quo minus id quod maxime
rerum hic tenetur a sapiente amet, consectetur, adipisci velit, placeat facere possimus,
delectus, ut aut reiciendis sed quia non numquam eius omnis voluptas assumenda
111
Chapter 5. CSS3
Draft è Last Call è Candidate è Recommendation
Flexible Box Layout w3.org/TR/2011/WD-css3-flexbox-20110322
Property Values
112
CSS Properties > Speech
Property Values
Example <style>
div { display: flexbox;
flex-direction: tb; width: 200px;}
span { margin: 0 auto;}
</style>
<div>
<span>The red<br>box</span>
<span>The long green box</span>
<span>The blue blue blue
The red
blue blue box</span>
box
</div>
The long green box
The blue blue blue
blue box
Property Values
113
Chapter 5. CSS3
Property Values
cue-after Description Sounds to be played before or after the element to delimit it.
■■ URL: auditory icon resource.
■■ none: no auditory icon is used.
■■ decibel: “dB” (decibel unit), representing a change
relative to the value of the voice-volume property within
the aural “box” model.
114
CSS Properties > Speech
Property Values
115
Chapter 5. CSS3
Property Values
Description Inherited.
■■ silent: no sound is generated
■■ x-soft | soft | medium | loud | x-loud: a sequence of
audible volume level values: minimum to a maximum.
■■ decibel: “dB” (decibel unit), representing a change
relative to the given keyword value for the root element.
116
CSS Properties > Table
Table
Property Values
117
Chapter 5. CSS3
Property Values
Property Values
118
CSS Properties > Animation and Transitions
Property Values
Example .class1 {animation: “splash” 12s, “main” 20s,
“splash” 12s alternate;}
119
Chapter 5. CSS3
Property Values
Example .b1 {animation-timing-function: linear, ease;}
.b2 {animation-timing-function: cubic-
bezier(0.4, 0, 0.5, 1.0);}
Outline
Property Values
120
CSS Properties > 2D and 3D Transforms
Property Values
Property Values
121
Chapter 5. CSS3
Property Values
122
CSS Properties > Generated Content for Paged Media
IE 8 FF 4 SF 3• iOS 3 CH 4• An 3 O11
CSS3 paged media is defined as a continuous media describing page specific behavior and elements:
123
Chapter 5. CSS3
Property Values
Description Initial value: 6pt. Defines the page bleed amount. This
property only has an effect if crop marks are enabled.
124
CSS Properties > Generated Content for Paged Media
Property Values
Description Crop / cross marks definition which normally used for printing.
125
Chapter 5. CSS3
IE FF SF CH O11
Property Values
126
CSS Properties > Paged Media
Property Values
127
Chapter 5. CSS3
Property Values
Description Applies to: page context. Defines the size and orientation of
the containing box for page content. The size of a page box
may either be “absolute” (fixed size) or “relative” (scalable,
fluid). Relative pages automatically scale the document and
make optimal use of the page size:
IE FF SF CH O11
CSS can be used to insert and move content around a document, in order to create footnotes,
counters, running headers and footers, section numbering, and lists. CSS can also define replaced
images while scaling and cropping them.
Property Values
Description Initial: 0deg. Applies to: images. Defines the image angle.
128
CSS Properties > Line
Property Values
Description Initial value: 50% 50%. Applies to: replaced elements. Defines
the alignment of the replaced element inside its box. The
<position> value is defined as syntax of background-position.
This module specifies the properties of line within block elements, baseline alignment and the
placement of drop cap initial letters. Most of the properties are new to CSS3.
Property Values
129
Chapter 5. CSS3
Property Values
Alignment of elements that is at the intersection of:
■ baseline: start-edge / dominant-baseline
■ before-edge: start-edge / before-edge
■ text-before-edge: start-edge / ‘text-before-edge’
■ central: start-edge / ‘central’ baseline
■ middle: start-edge / ‘middle’ baseline
■ after-edge: start-edge / after-edge
■ text-after-edge: start-edge / ‘text-after-edge’ baseline
■ ideographic: start-edge / ‘ideographic’ baseline
■ alphabetic: start-edge / ‘alphabetic’ baseline
■ hanging: start-edge / ‘hanging’ baseline
■ mathematical: start-edge / ‘mathematical’ baseline.
text-before-edge
hanging
central
alphabetic
iconographic
text-after-edge
130
CSS Properties > Line
Property Values
131
Chapter 5. CSS3
Property Values
T
Description Applies to: ::first-letter o be, or not to be:
pseudo element. Number of that is the question:
lines occupied by a drop cap. whether ‘tis nobler
in the mind to suffer
the slings and arrows of
no browser support
132
CSS Properties > Line
Property Values
133
Chapter 5. CSS3
Property Values
Ruby is a short caption/annotation text next to the base text, typically used in ideographic East Asian
scripts. The CSS Rubi properties associated with the ‘Ruby’ HTML elements.
IE 9* FF SF 5* CH 11* O
134
CSS Properties > Rubi
Property Values
Description Inherited. All elements. Defines the text alignment of the ruby text
and ruby base contents relative to each other:
■■ auto: browser defined, generally equal to the ‘centered’ value
■■ start | left: the start edge of the base
■■ center: centered within the width of the base
■■ end | right: end edge of the base.
■■ The ruby text content is evenly distributed across the width of the
base. Preceding the first and following the last ruby character:
-- distribute-letter: no white space is added
-- distribute-space: white space is added
■■ line-edge: if the ruby text is NOT adjacent to a side edge, then
it is center aligned. Otherwise, the ‘auto’ value applies and the
side of the ruby text is lined up with the corresponding edge.
135
Chapter 5. CSS3
Property Values
136
CSS Properties > Basic User Interface
Property Values
137
Chapter 5. CSS3
Property Values
138
CSS Properties > Basic User Interface
Property Values
139
Chapter 5. CSS3
Property Values
Description Initial value: none. Applies to: all elements. The outline-style
property accepts the same values as border-style property
plus the value ‘auto’, minus ‘hidden’.
Description Initial value: medium. Applies to: all elements. The values are
the same values as the border-width property values.
Description Applies to: elements with ‘overflow’ value other than visible.
HTML tag Defines property for any specific div {height: 100%;}
HTML element
140
CSS Properties > CSS3 Selectors
Class Defines value for the ‘class’ attribute. .myclass {font-weight: bold;}
‘Class’ attribute can apply a
<p class=myclass>1st paragraph</p>
common set of property values to a <p class=myclass>2nd paragraph</p>
multiple elements of different types.
Child Defines property value that only #heading > p {color: blue;}
affect elements that are children of
other specific elements
General Sibling All elements that share the same h1 ~ p {font-style: italic;}
parent and elements are in the same
sequence, not always immediate
141
Chapter 5. CSS3
Pseudo-Classes
Pseudo-Class Values
142
CSS Properties > CSS3 Selectors
Pseudo-Class Values
Description Matches any element that is the n-th child of its parent.
■■ The :nth-child(an+b) pseudo-class notation represents
an element that has an+b-1 siblings before it, for any positive
integer or zero value of n, and has a parent element.
■■ For values of a and b > 0, this divides the element’s children into
groups of a elements (the last group taking the remainder), and
selecting the b-th element of each group. For instance, this
allows to alternate the table row colors. The 1st child index is 1.
Example Selecting the 2nd, 5th, 8th, etc, paragraphs in a div element:
div > p:nth-of-type(3n-1)
143
Chapter 5. CSS3
Pseudo-Class Values
Example Two ways of selecting all h3 children except the first and last:
body > h3:nth-of-type(n+2):nth-last-of-type(n+2) { }
body > h3:not(:first-of-type):not(:last-of-type){ }
:indeterminate Description Radio and checkbox elements can be toggled, but are sometimes
in an indeterminate state, neither checked nor unchecked.
Description This negation pseudo-class would match all elements that do not
match an argument in the parenthesis
Example :not(div) { }
:not(‘logo’) { }
input:not([type=”checkbox”] { }
144
CSS Properties > CSS3 Selectors
Pseudo-Elements
::first-letter Defines style for the first letter of a paragraph (the drop cap letter)
::selection Part of a document that has been highlighted by the user, e.g. text
CSS At-Rules
At-rules are special set of instructions to the CSS interpreter. At-rules are named because of the @
character prefix. @rules can be defined for a specific type of elements or media.
Pseudo-Class Values
@character Description Character set encoding defined at the top of for the CSS document
145
Chapter 5. CSS3
Method Values
querySelector Description ■■ Selects the 1st matching element for a selection expression
■■ Returns a matching DOM element
This specification defines NodeSelector Interface and methods for retrieving element nodes from the
DOM by matching against a group of selectors, and if a given element matches a particular selector.
Method Values
querySelector() Description Return the 1st element that matches any of the
selectors in the group
Example document.querySelector(“#menu, #rule”);
querySelectorAll() Description Find the second cell of each row
Example document.querySelectorAll
(“#score>tbody>tr>td:nth-of-type(2)”);
queryScopedSelector() Description Return the 1st matching node within the DOM tree
Example element.queryScopedSelector(“:scope>div”)
queryScopedSelectorAll() Description Return a NodeList including all of the matching nodes
Example element.queryScopedSelectorAll(“:scope+div”)
146
CSS3 Browser Compatibility Summary > HTML5 Selectors API Level 2
3D Transforms 10 x ? 5x ? ? 3.2 ✖ ✖
147
In the Chapter 6
■■ What is API 149
-- HTML5 and Related Technologies 149
■■ Semantics 150
-- Semantic Web 150
-- Microdata basics 150
-- HTML5 + RDFa 152
-- MathML 154
-- WAI-ARIA 155
■■ Offline & Storage 156
-- Web Storage 156
-- HTTP Caching and Serving 158
-- Indexed Database API 159
-- Web SQL database 162
■■ Device Access 163
-- Contacts API 163
-- Drag and Drop 165
-- Geolocation 167
-- Media Capture 172
-- File API 173
■■ Real-Time Connectivity 175
-- Web Sockets 175
-- Web Messaging 177
-- Web Workers 179
■■ Multimedia and Graphics 181
-- Audio and Video 181
-- Canvas 183
-- Scalable Vector Graphic 189
■■ Performance & Integration 191
-- XMLHttpRequest 191
-- Navigation Timing 192
■■ Browser Compatibility 194
148
What is API > HTML5 and Related Technologies
6. HTML5 APIs
What is API
In addition to a new markup specifications, HTML5 offers scripting application programming
interfaces (APIs). API is a collection of programming methods and standards for accessing a software
application to be powered by the API service. The HTML5 APIs provide various native Rich Internet
Application functionality without the use of plugins, simplifying development and improving user
experience. This chapter provides basic fundamental information about most common HTML5 APIs.
HTML5 ML5&
related techno
HT MathML SVG
3.0
Selectors
log
ies
Taxonomy & Status L1
Navigation
TML5 specificat
CSS3 Timing
W3C Recommendation 3CH ion
W Web Web Open
Storage Font
Candidate Recommendation Web SQL HTML +
Indexed
RDFa
Database
G HTML5 spe
XmlHTTP
Last Call TW cif
Request 1
HA ic
Media W Web
Working Draft
at
Messaging
ial
Capture Geo
ion
Init
149
Chapter 6. HTML5 APIs
Semantics
Semantic Web
The next generation of the World Wide Web will be the Semantic Web, which will significantly improve
the level of efficiency with which we use the web. The web will evolve into one ocean of standardized
machine-readable semantic metadata, one global database of uniformly formatted semantic entities.
I will call these entities “semantic objects“. Every entity will become a semantic object and every
entity will have assigned standardized semantic properties: any product, person, concept, entity,
even a single word. For instance, a personal computer will have the properties: type, manufacturer,
color, weight, etc. Semantic data will be fetched, analyzed and processed by various web
applications, portlets and widgets, helping us search, shop, sell, market, travel, research, invent, create,
communicate, socialize, etc. While the current web is very fragmented, inefficient and redundant, the
future semantic web will be unified, efficient, and significantly less redundant. There are a few types of
technologies available to assign semantic structured information:
■■ RDF - the standardized machine-readable language RDF describes object semantic properties /
relationships, using a concept of triple: entity-property-value (subject-predicate-object). RDF/XML
implementation is relatively difficult to publish requiring to maintain huge parallel databases.
■■ Microformats - method of embedding semantics within the attributes of HTML markup tags.
■■ Microdata - method to create pieces of custom metadata and embed it into HTML web pages.
■■ RDFa - combines simplicity of embedding metadata into web pages with the use of a wide range
of existing specialized RDF vocabularies, e.g. taxonomies, contacts, copyrights, geolocation.
■■ Schema.org - launched in 2011 by Bing, Google and Yahoo, proposing to mark up website
content as metadata, using microdata, according to their schemas.
Microdata
Draft è Last Call è Candidate è Recommendation
w3.org/TR/2011/WD-microdata-20110525
Microdata API extends HTML by adding custom semantic vocabularies offering a standardized way to
embed machine-readable custom semantic properties in HTML document. At a high level, microdata
is expressed by of a group of name-value pairs which can be nested. The groups are called items, and
each name-value pair is a property. Example:
<div itemscope>
■■ The itemscope attribute creates an item
<p>Bread $<span itemprop=price>
■■ The itemprop attribute adds a property to an item 2.50</span>.</p>
■■ Two of these items have the same property ‘price’
</div>
■■ An element can introduce multiple properties at
<div itemscope>
once, e.g. type, color, operating system:
<span itemprop=”type-desktop <p>Milk $<span itemprop=price>
color-beige os-winows7”>Dell PC</span> 3.20</span>.</p>
</div>
150
Semantics > Microdata
■■ An element can introduce multiple properties at once, e.g. type, color, operating system:
<span itemprop=”type-desktop color-beige os-winows7”>Dell PC</span>
■■ The global document object will have getItems() function for supported browsers:
function microdataSupport() {return !!document.getItems;}.
■■ Search engines utilize HTML-based microdata. Browsers, on the other hand, will take advantage of
microdata DOM API functions.
Attribute Description
itemscope A boolean attribute that creates a group of name-value pairs called an item
itemref Non-descendent properties of element with the itemscope attribute can be associated
with the item via reference to an element ID
Property types
Description Code
151
Chapter 6. HTML5 APIs
HTML5 + RDFa
Draft è Last Call è Candidate è Recommendation
w3.org/TR/2011/WD-rdfa-in-html-20110525
RDFa (Resource Description Framework – in – attributes) is a W3C Recommendation that defines rules
for adapting the RDFa specification for use in (X)HTML5, and it is also applicable to (X)HTML4 documents
interpreted through the HTML5 parsing rules.
RDFa adds attribute extensions to HTML for embedding web metadata (RDF subject-predicate-object
expressions) within HTML documents. The RDF data model is based on subject-predicate-object data
model, known as triples. This data model is also known as Ontology. The subject denotes the resource,
and the predicate denotes traits or aspects of the resource and expresses a relationship between the
subject and the object, e.g.“the sun”-“has the color”-“orange”.
RDFa HTML attributes extend visual presentation data (e.g. text and links) into machine-readable data
without creating redundant content.
Description Code
152
Semantics > HTML5 + RDFa
Description Code
RDFa triple
subject: John Smith > predicate: knows > object: Ann Paxson
153
Chapter 6. HTML5 APIs
For a complete RDFa syntax refer to the RDFa Core document: http://www.w3.org/TR/rdfa-core
RDFaCE is an RDFa Visual Content Editor based on TinyMCE. It supports different views for semantic
content authoring and uses existing Semantic Web APIs to annotate and edit of RDFa contents.
MathML
Draft è Last call è Candidate è Recommendation
w3.org/TR/MathML3
MathML is an XML application for describing mathematical notation and capturing both its
presentation structure and its content. About 35of the MathML tags describe abstract notational
structures, while another 170 specify the semantic meaning.
<math> <math>
<mrow> <apply>
<mi>a</mi> <plus/>
<mo>⁢<!-- <apply>
⁢ --></mo> <times/><ci>a</ci>
<msup> <apply>
<mi>x</mi> <power/>
<mn>2</mn> <ci>x</ci><cn>2</cn>
</msup> </apply>
<mo>+</mo> </apply>
<mi>b</mi> <apply>
<mo>⁢</mo> <times/>
<mi>x</mi> <ci>b</ci><ci>x</ci>
<mo>+</mo> </apply>
<mi>c</mi> <ci>c</ci>
</mrow> </apply>
</math> </math>
ax2 + bx + c
154
Semantics > WAI-ARIA
Embedding MathML in HTML5 files example
WAI-ARIA
Draft è Last Call è Candidate è Recommendation
w3.org/TR/2011/CR-wai-aria-20110118
Web Accessibility Initiative-Accessible Rich Internet Applications (WAI-ARIA), defines a way to make
Web content more accessible to people with disabilities. It especially helps with dynamic content
developed with Ajax and related technologies, providing means to utilize screen reader devices. WAI-
ARIA assigns semantic roles to elements, and gives those roles properties and states.
155
Chapter 6. HTML5 APIs
Web Storage APIs allow a string client side data storage in a key-value pair database of two types: the
sessionStorage and the localStorage.
■■ The sessionStorage is similar to HTTP session cookie retaining data only for a single session.
■■ The localStorage stores data locally across browser sessions and even system reboots.
■■ The Web Storage API is separate from the Web SQL Database API which provides a offline SQL
database. As of November 2010, the standardization of Web SQL Database API is blocked due to
a lack of different implementations
■■ Web Storage API have a few advantages over the conventional HTTP session cookie:
-- Cookies are included with every HTTP request, slowing down the web application
-- Cookies send data unencrypted over the Internet
-- Cookies are limited to about 4 KB of data
localStorage sessionStorage
Value lasts beyond the current session Value exists as long as its window or tab
Description Code
156
Offline & Storage > Web Storage
Description Code
} } } }) ();
157
Chapter 6. HTML5 APIs
Methods applicable to both storage attributes
Methods Description
getItem(key) description Returns a clone of the current value associated with the key
key(lIndex) description Retrieves the key at the specified index in the collection
158
Offline & Storage > HTTP Caching and Serving
Deprecated
Programmable HTTP Caching and Serving w3.org/TR/DataCache
Defines APIs for off-line serving of requests to HTTP resources using static and dynamic responses,
extending the function of application caches defined in HTML5. Example:
The replacement, IndexedDB is the data-store that developers should use to store and manipulate
data on the client-side.
■■ IndexedDB is object-oriented. Unlike a relational database table that stores a collection of rows
of data of rows and columns, IndexedDB creates an object store for a type of data and simply
persist JavaScript objects to that store.
■■ Each object store can have a collection of indexes.
■■ The object store is similar to SQL table, but with no object structure constraints so tables do not
need to be defined upfront, similar to Web Storage.
■■ IndexedDB is built on a transactional database model.
■■ Unlike Web Storage, the IndexedDB is mostly asynchronous, delivering better performance. It
doesn’t give you data by returning values. Instead, you have to pass a callback function. You
don’t store/retrieve a value synchronously means. Instead, you request a database operation.
■■ IndexedDB uses requests - objects that receive the success or failure DOM events that were
mentioned previously with onsuccess and onerror properties.
■■ IndexedDB uses an index instead of Structured Query Language (SQL).
■■ IndexedDB uses DOM events to notify you when results are available
159
Chapter 6. HTML5 APIs
Common IndexedDB Interfaces
Interface Content
IDBObjectStore description A database comprises one or more object stores, similar to tables
IDBIndex description Index allows looking up records in a object store using properties
of the values. An index is a specialized persistent key-value
storage and has a referenced object store.
IDBCursor description Query against an index produces a cursor that is used to iterate
across the result set.
IDBKeyRange description Records can be retrieved from object stores and indexes using
either keys or key ranges. A key range is a continuous interval
over some data type used for keys.
160
Offline & Storage > Indexed Database API
IndexedDB code example
Description Code
161
Chapter 6. HTML5 APIs
Description Code
Rendering the Object Store data function rendercontact(row) {
var contacts = document.getElementById(“contactItems”);
■■ The renderContact
var p = document.createElement(“p”);
function is called for each
var a = document.createElement(“a”);
result in the cursor.
var x = document.createTextNode(row.text);
■■ HTML markup created a.addEventListener(“click”, function() {
for the item, including myWebInxDB.indexedDB.deletecontact(row.timeStamp); });
list element and a delete a.textContent = “[remove]”; p.appendChild(x);
button p.appendChild(a); contacts.appendChild(p)}
Deleting data from a table myWebInxDB.indexedDB.deletecontact = function(id) {
var db = myWebInxDB.indexedDB.db;
■■ A transaction started
var trans = db.transaction([“contact”],IDBTransaction.
■■ The Object Store is READ_WRITE);
referenced with an object var store = trans.objectStore(“contact”);
■■ A delete command is var request = store.delete(id);
invoked with the object ID. myWebInxDB.indexedDB.getAllcontactItems(); };
162
Device Access > Web SQL database
function createTbl(name) {
var liLine = document.createElement(“li”);
var spanLine = document.createElement(“span”);
spanLine.textContent = name; liLine.appendChild(spanLine); }
mysales(); </script><body> <div id=customers>
Device Access
Contacts API
Draft è Last Call è Candidate è Recommendation
w3.org/TR/2011/WD-contacts-api-20110616
163
Chapter 6. HTML5 APIs
Contact API Interfaces
Interface Content
ServiceContacts description Exposed on the Navigator object. Its goal is to provide an access
point to the functionality in this specification.
164
Device Access > Drag and Drop
Interface Content
ContactOrganization definition interface ContactOrganization {
attribute boolean pref;
attribute DOMString? [attribute value]; };
Drag and Drop (DnD) interface makes it easy to add, reorder and delete items using mouse input.
HTML 5 Drag and Drop API delivers native DnD support, introducing new interface objects & attributes.
165
Chapter 6. HTML5 APIs
Description Code
Interface Content
DataTransfer description Drag events record drag data in an object called dataTransfer.
The recorded drag data can be manipulated using object
methods and attributes
166
Device Access > Drag and Drop
Interface Content
methods ■■ getData( string type ): returns the data
■■ setData( string type, string data ): sets the data for a given type
■■ setDragImage( string type, string data ): sets the dragging image
UndoManager description Manages the undo object entries in the undo transaction history
UndoManagerEvent description The UndoManagerEvent interface and the undo and redo events
167
Chapter 6. HTML5 APIs
Geolocation
Draft è Last Call è Candidate è Recommendation
w3.org/TR/2010/CR-geolocation-API-20100907
Description Code
168
Device Access > Geolocation
Description Code
169
Chapter 6. HTML5 APIs
1. Geolocation object
Properties enclosed in [ ] are optional. If the optional property value is undefined, it is set to null.
Method Values
170
Device Access > Geolocation
Method Values
2. Position object
The getCurrentPosition() and getPositionUsingMethodName() methods capture location
information asynchronously utilizing an object Position. The location value is a set of geographic
coordinates, direction and speed. Properties enclosed in [ ] are optional.
[coords.altitude] number Altitude in meters above the World Geodetic System (WGS 84) ellipsoid
timestamp date Time recorded for the location retrieved and the Position object
created
171
Chapter 6. HTML5 APIs
3. PositionOptions object
The PositionOptions object specifies a set of options for the third argument of the
getCurrentPosition() method:
getCurrentPosition(callback, ErrorCallback, options)
enableHighAccuracy Boolean Specifies whether the widget wants to receive the most
accurate location estimate possible. By default this is false.
timeout Number The timeout property is the number of milliseconds your web
application is willing to wait for a position.
maximumAge Number Specifies the expiry time in milliseconds for cached location
information.
4. PositionError object
If an error occurs the geolocation methods getCurrentPosition() and watchPosition()
use the error handler callback method ErrorCallback which is provided by
the PositionError object.
code Number A numeric error codes (also listed within the geolocation object topic):
Code Constant Description
0 unknown_error failed to retrieve the location due to an unknown error
1 permission_denied application does not have permission to use the Location Service
2 position_unavailable location could not be determined
3 timeout failed to retrieve the location within the specified interval
Media Capture
Draft è Last Call è Candidate è Recommendation
w3.org/TR/2011/WD-html-media-capture-20110414
The Capture API defines an interface to access the microphone and camera of a hosting device.
attributes Capture
172
Device Access > Media Capture
CaptureAudioOptions ■■ limit: upper limit of clips/images user can record. Value => 1
This is an example of
launching a camera function success(data) {
application to retrieve var container = document.createElement(“div”);
pictures. for (var i in data) {
var img = document.createEle ment(“img”);
img.src = data[i].url;
container.appendChild(img);}
document.body.appendChild(container);}
function error(err) {
if (err.code === err.CAPTURE_INTERNAL_ERR) {
alert(“The capture failed due to an error.”);}
else { alert(“Other error occured.”);}}
navigator.device.capture.captureImage(success, error,
{ limit: 1 });
173
Chapter 6. HTML5 APIs
File API
Draft è Last Call è Candidate è Recommendation
w3.org/TR/2011/WD-FileAPI-20111020
This specification defines the basic representations for files, lists of files, errors raised by access to files,
and programmatic ways to read files.
The File interface represents file data typically obtained from the underlying file system, and the
Blob interface (“Binary Large Object” - a name originally introduced to web APIs in Google Gears)
represents immutable raw data. File or Blob reads should happen asynchronously on the main thread,
with an optional synchronous API used within threaded web applications.
In this example different code blocks handle progress, error, and success conditions.
Interface Content
FileList description This interface is a collection DOMCore of File objects.
174
Device Access > File API
Interface Content
attributes length - must return the number of files in the FileList collection
Blob description Provides a method to slice raw data objects between ranges of
bytes into smaller chunks of raw data.
File description Describes a file in a FileList exposing its name. Inherits from Blob.
175
Chapter 6. HTML5 APIs
Touch Events
Draft è Last Call è Candidate è Recommendation
w3.org/TR/2011/WD-touch-events-20111027
The Touch Events API specification defines events interacting with a touch-sensitive surface (e.g. touch
screens and pen-tablet devices) with respect to any DOM elements displayed upon it.
Interface Content
Touch description Defines an individual point of contact for a touch event.
attribute length - unsigned long, returns the number of Touches in the list
methods ■■ identifiedTouch - returns the first Touch item in the list whose
identifier property matches the specified identifier
■■ item - returns the Touch at the specified index in the list
TouchEvent description Defines the touchstart, touchend, touchmove, and touchcancel
event types
176
Real-Time Connectivity > Web Sockets
Code example
This is an example of relations between the touches and targetTouches members defined in the
TouchEvent interface. This code will generate different output based on the number of touch points:
Real-Time Connectivity
Web Sockets
Draft è Last Call è Candidate è Recommendation
w3.org/TR/2011/CR-websockets-20111208
Web Sockets is a bidirectional full-duplex communication technology which operates over a single
socket. Web Sockets provides simple alternative to AJAX utilizing send() method to send data and
the onmessage event handler to receive data from server to browser.
■■ This API creates a WebSocket object var Socket = new WebSocket(url, [protocol]);
■■ The URL argument, defines the target connection URL.
■■ The protocol attribute is optional, and if present, specifies a sub-protocol that the server must
support for the connection to be successful.
Following are the methods, attributes, and events, associated with WebSocket object.
WebSocket methods
Method Description
177
Chapter 6. HTML5 APIs
WebSocket attributes
Attribute Description
WebSocket events
WebSocket example
What’s great about the WebSocket API is that server and client can push messages bi-directionally to
each other at any given time. Unlike AJAX, WebSocket is not limited to requests made by the client,
instead WebSocket servers and clients can push messages to each other. The WebSocket example:
Description Code
178
Real-Time Connectivity > Web Messaging
Event Definitions
This API defines two mechanisms
for communicating between interface MessageEvent : Event {
browsing contexts in HTML
documents: readonly attribute any data;
readonly attribute DOMString origin;
■■ Cross-Document Messaging readonly attribute DOMString lastEventId;
■■ Channel Messaging readonly attribute WindowProxy? source;
Messages in server-sent events, readonly attribute MessagePort[]? ports; };
Web sockets, cross-document
dictionary MessageEventInit : EventInit {
messaging, and channel
messaging use the MessageEvent any data;
event, defined in the following DOMString origin;
interface. DOMString lastEventId;
WindowProxy? source;
MessagePort[]? ports;
};
origin event.origin Returns the origin of the message, for server-sent events and
cross-document messaging.
lastEventId event.lastEventId Returns the last event ID string, for server-sent events.
source event.source Returns the WindowProxy of the source window, for cross-
document messaging.
ports event.ports Returns the MessagePort array sent with the message, for cross-
document messaging and channel messaging
Cross-document messaging
Cross-document messaging provides means for secure communication from different origin, which is
used in server-sent events, Web sockets, cross-document messaging, and channel messaging.
179
Chapter 6. HTML5 APIs
Sending a cross-document message
A script in document A calls the
postMessage() method on the Window <iframe id=”x” src=”http://domain.com/
object of document B, sending a output.html”></iframe>
message to document B.
<script>
The origin of the sender is automatically /* ... */
sent in the message and it can’t be
falsified (spoofed). var consoleOutput=document.
getElementById(“x”).contentWindow;
consoleOutput.postMessage(‘message’,
’http://domain.com’);/* origin,message */
/* ... */
</script>
Channel Messaging
Channel Messaging can be used to enable independent pieces of code (running in different browsing
contexts) to communicate directly as two-ways pipes, with a port at each end. Messages are
asynchronous, and delivered as DOM events.
180
Real-Time Connectivity > Web Workers
Web Workers
Draft è Last Call è Candidate è Recommendation
w3.org/TR/2011/WD-workers-20110901
JavaScript was designed to run in a single-threaded environment, meaning multiple scripts cannot run
at the same time without causing browser to crash in a CPU intensive environment. Web Workers (WW)
allow browser to perform individual tasks on in the background without interfering with other scripts.
While the worker is running, user can continue using the web browser without waiting for the processes
to complete.
181
Chapter 6. HTML5 APIs
Description Code
WebWorker.js code
Description Code
■■ Web Workers can be stopped by calling worker.terminate() method from the main page,
or by calling self.close() inside of the worker itself.
■■ Due to the multi-threaded nature, WW can only access a limited set of JavaScript’s features:
-- Objects: navigator, location (read-only), XMLHttpRequest
-- Methods: setTimeout(), clearTimeout(), setInterval(), clearInterval(),
importScripts()
-- Application Cache
-- Spawning other web workers
■■ Workers do NOT have access to: the DOM and objects: window, document , parent
■■ Inline Workers can be created without having to a separate worker utilizing the BlobBuilder
interface, and appending the worker code as a string
■■ Unlike other browsers, Google Chrome has security restrictions to WW local access
182
Multimedia and Graphics > Audio and Video
Description Code
Video Attributes
183
Chapter 6. HTML5 APIs
poster {URL} URL of an image to show until the user plays or seeks
Audio Attributes
preload {boolean} Audio will preload at page load, and be ready to play.
This attribute will be ignored if autoplay is present.
Event Description
184
Multimedia and Graphics > Canvas
Audio and video codecs
Desktop Mobile
wav ✖ 4 5 9 11 5 ✖
video
WebM (.webm) ✖ 4 ✖ 9 11 ✖ 4
MPEG4 ✖ ✖ 5 9 ✖ ? 4
Canvas
Draft è Last Call è Candidate è Recommendation
w3.org/TR/2010/WD-2dcontext-20100304
185
Chapter 6. HTML5 APIs
Canvas element
The HTML5 canvas element uses JavaScript to create web graphics
<body>
186
Multimedia and Graphics > Canvas
Moving canvas script into a function
Description Code
fill() The subpaths fill and stroke applied using current fill style
stroke()
fillStyle Shape’s fill and stroke style
strokeStyle
bezierCurveTo(cp1x, cp1y, The point is added to the path, connecting to the previous
cp2x, cp2y, x, y) point by a Bezier curve using control points. The x & y: the
end point coordinates.
The cp1x & cp1y / cp2x & cp2y: the 1st / 2nd control point
coordinates
187
Chapter 6. HTML5 APIs
textAlign [ = value ] Text alignment property. Values: start, end, left, right, center.
shadowOffsetY [ = value ]
shadowBlur [ = value ] Shadow blur property
188
Multimedia and Graphics > Canvas
Object Code
Rectangle cxt.fillRect(15,15,120,60);
cxt.clearRect(20,20,110,50);
cxt.strokeRect(15,15,120,60);
Oval var centerX = 200; var centerY = 50; //location and size
var height = 80; var width = 250;
cxt.beginPath(); cxt.moveTo(centerX,centerY - height/2);
//right half of oval
cxt.bezierCurveTo(centerX+width/2,centerY+height/2,centerX
+width/2,centerY-height/2,centerX,centerY-height/2);
189
Chapter 6. HTML5 APIs
Object Code
Raster Image var img = new Image();
img.src = ‘/images/portrait.jpg’;
Scalable Vector Graphic (SVG) is an XML-based language for 2-D vector graphics.
190
Multimedia and Graphics > Scalable Vector Graphic
6 ways of creating SVG in HTML Document
Technique Commentary
<embed> tag Description The <embed> tag is not a standard HTML tag. It utilizes Adobe SVG Viewer.
The <embed> tag is not compatible with a valid XHTML document
<object> tag Description The <object> tag is a standard HTML tag and is supported by all
modern browsers. This method does not allow scripting.
<iframe> tag Description The <iframe> tag can be used to render SVG graphics.
Inline Description Inline SVG only with XHTML5 document, using MIME Type
application/xhtml+xml or text/xml, or in modern browsers
Example <svg width=”200” height=”200” version=”1.1”
xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”100” cy=”80” r=”60” stroke=”#ffffff”
stroke-width=”1” fill=”blue”>
</svg>
JavaScript Description JavaScript can be used to create canvas, graphic object (circle) and
object attributes
191
Chapter 6. HTML5 APIs
Technique Commentary
Raphaël Description Raphaël is a small JavaScript library that could be used to build vector
JavaScript graphics. The raphael.js file can be downloaded and included
Library into the <head> of HTML document. Various predefined shapes and
transformations then can be accessed from the library.
raphaeljs.com
Example var paper = Raphael(10, 50, 320, 200);
// Circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Fill and stroke attributes
circle.attr(“fill”, “blue”);
circle.attr(“stroke”, “black”);
SVG Shapes
192
Performance & Integration > XMLHttpRequest
The XMLHttpRequest specification defines scripted functionality in web browser for transferring data
between a client and a server. XMLHttpRequest is essential in the Ajax web development technique,
that allows updating of a small region within the browser window without refreshing the page.
Method Commentary
193
Chapter 6. HTML5 APIs
Navigation Timing
Draft è Last Call è Candidate è Recommendation
w3.org/TR/navigation-timing
Interface Commentary
194
Browser Compatibility > Navigation Timing
Browser Compatibility
Desktop Mobile
MathML ✖ 5 6 ✖ *12 5 ✖ ✖
Web Storage 8 4 4 6 11 3 ✖ 2
Indexed Database 10 4 ✖ 11 ✖ ✖ ✖ ✖
Web SQL ✖ ✖ 4 4 11 3 ✖ 2
Contacts API 6 5 ? ? ? ? ? ?
Geolocation 9 4 5 5 11 3 11 2
Media Capture ✖ 10 ✖ 3 ✖ ✖ ✖ 3
FileReaer API 10 4 ? 6 12 ✖ 11 3
Web Workers 10 4 4 4 11 5 11 ✖
Canvas (basic) 9 2 3 4 9 3 10 2
Inline SVG 9 4 6 7 9 5 10 4
XMLHttpRequest 1, 2 10 4 5 4 *12 5 ✖ 3
Navigation Timing 9 7 ✖ 13 ✖ 3 ✖ 2
195
In the Chapter 7
■■ Online Resources 195
■■ HTML5 and CSS3 desktop tools 195
■■ X11 color keywords 196
■■ HTML special characters 200
■■ Properties which can be animated 201
■■ Acknowledgements 202
196
Online Resources
7. Appendix
Online Resources
Web companion for this book http://html5.belisso.com
Adobe Dreamweaver CS5.5 HTML5 and CSS3 WYSIWYG editing Windows, Mac Commercial
Adobe Illustrator CS5+ Exports to SVG and CSS3 Windows, Mac Commercial
Total Validator (X)HTML5 and accessibility validation Windows, Mac, Linux Free (basic)
ActiveState Komodo 6 HTML5 and CSS3 markup editing Windows, Mac, Linux Free (basic)
197
Chapter 7. Appendix
TextMate with HTML5 bundle HTML5 and CSS3 markup editing Mac Commercial
The Free HTML Editor 9.4 HTML5 and CSS3 markup editing Windows Free
CoffeeCup HTML Editor HTML5 and CSS3 WYSIWYG editing Windows Commercial
CSE HTML Validator 10.0 (X)HTML5 and CSS3 validation Windows Commercial
Google Swiffy Flash extension Exports Flash to HTML5 Windows, Mac Beta
Apatana Studio 3 HTML5 and CSS3 markup editing Windows, Mac, Linux Free
198
X11 color keywords
199
Chapter 7. Appendix
200
X11 color keywords
201
Chapter 7. Appendix
202
Properties which can be animated
203
Chapter 7. Appendix
Dedication
For Natasha and Nika. I love you!
For people who read books.
Acknowledgements
Special thanks to the W3C, WHATWG and other contributors:
Ian ‘Hixie’ Hickson, Tim Berners-Lee, Aankhen, Aaron Boodman, Aaron Leventhal, Adam Barth, Adam
de Boor, Adam Hepton, Adam Roben, Addison Phillips, Adele Peterson, Adrian Bateman, Adrian Sutton,
Agustín Fernández, Ajai Tirumali, Akatsuki Kitamura, Alan Plum, Alastair Campbell, Alejandro G. Castro,
Alex Bishop, Alex Nicolaou, Alex Rousskov, Alexander J. Vincent, Alexey Feldgendler, Алексей
Проскуряков (Alexey Proskuryakov), Alexis Deveria, Allan Clements, Amos Jeffries, Anders Carlsson,
Andreas, Andreas Kling, Andrei Popescu, André E. Veltstra, Andrew Clover, Andrew Gove, Andrew
Grieve, Andrew Oakley, Andrew Sidwell, Andrew Smith, Andrew W. Hagen, Andrey V. Lukyanov, Andy
Heydon, Andy Palay, Anne van Kesteren, Anthony Boyd, Anthony Bryan, Anthony Hickson, Anthony
Ricaud, Antti Koivisto, Arne Thomassen, Aron Spohr, Arphen Lin, Aryeh Gregor, Asbjørn Ulsberg, Ashley
Sheridan, Atsushi Takayama, Aurelien Levy, Ave Wrigley, Ben Boyle, Ben Godfrey, Ben Lerner, Ben Leslie,
Ben Meadowcroft, Ben Millard, Benjamin Carl Wiley Sittler, Benjamin Hawkes-Lewis, Bert Bos, Bijan Parsia,
Bil Corry, Bill Mason, Bill McCoy, Billy Wong, Bjartur Thorlacius, Björn Höhrmann, Blake Frantz, Boris Zbarsky,
Brad Fults, Brad Neuberg, Brad Spencer, Brady Eidson, Brendan Eich, Brenton Simpson, Brett Wilson, Brett
Zamir, Brian Campbell, Brian Korver, Brian Kuhn, Brian Ryner, Brian Smith, Brian Wilson, Bryan Sullivan,
Bruce D’Arcus, Bruce Lawson, Bruce Miller, C. Williams, Cameron McCormack, Cao Yipeng, Carlos
Gabriel Cardona, Carlos Perelló Marín, Chao Cai, Channy Yun, Charl van Niekerk, Charles Iliya
Krempeaux, Charles McCathieNevile, Chris Apers, Chris Cressman, Chris Evans, Chris Morris, Chris
Pearce, Christian Biesinger, Christian Johansen, Christian Schmidt, Christoph Plenio, Christopher Aillon,
Chriswa, Clark Buehler, Cole Robison, Colin Fine, Collin Jackson, Corprew Reed, Craig Cockburn, Csaba
Gabor, Csaba Marton, Cynthia Shelly, Daniel Barclay, Daniel Bratell, Daniel Brooks, Daniel Brumbaugh
Keeney, Daniel Cheng, Daniel Davis, Daniel Glazman, Daniel Peng, Daniel Schattenkirchner, Daniel
Spång, Daniel Steinberg, Danny Sullivan, Darin Adler, Darin Fisher, Darxus, Dave Camp, Dave Hodder,
Dave Lampton, Dave Singer, Dave Townsend, David Baron, David Bloom, David Bruant, David Carlisle,
David E. Cleary, David Egan Evans, David Flanagan, David Gerard, David Håsäther, David Hyatt, David
I. Lehn, David John Burrowes, David Matja, David Remahl, David Smith, David Woolley, DeWitt Clinton,
Dean Edridge, Dean Edwards, Debi Orton, Derek Featherstone, Devdatta, Dimitri Glazkov, Dimitry
Golubovsky, Dirk Pranke, Divya Manian, Dmitry Titov, dolphinling, Dominique Hazaël-Massieux, Don
Brutzman, Doron Rosenberg, Doug Kramer, Doug Simpkinson, Drew Wilson, Edmund Lai, Eduard
Pascual, Eduardo Vela, Edward O’Connor, Edward Welbourne, Edward Z. Yang, Eira Monstad, Eitan
Adler, Eliot Graff, Elizabeth Castro, Elliott Sprehn, Elliotte Harold, Eric Carlson, Eric Law, Eric Rescorla, Eric
Semling, Erik Arvidsson, Erik Rose, Evan Martin, Evan Prodromou, Evert, fantasai, Felix Sasaki, Francesco
Schwarz, Francis Brosnan Blazquez, Franck ‘Shift’ Quélain, Frank Barchard, Fumitoshi Ukai, Futomi
Hatano, Gavin Carothers, Gareth Rees, Garrett Smith, Geoffrey Garen, Geoffrey Sneddon, George
Lund, Gianmarco Armellin, Giovanni Campagna, Graham Klyne, Greg Botten, Greg Houston, Greg
Wilkins, Gregg Tavares, Gregory J. Rosmaita, Grey, Gytis Jakutonis, Håkon Wium Lie, Hallvord Reiar
Michaelsen Steen, Hans S. Tømmerhalt, Hans Stimer, Henri Sivonen, Henrik Lied, Henry Mason, Hugh
Winkler, Ian Bicking, Ian Davis, Ignacio Javier, Ivan Enderlin, Ivo Emanuel Gonçalves, J. King, Jacques
Distler, James Craig, James Graham, James Justin Harrell, James M Snell, James Perrett, James
204
Acknowledgements
Robinson, Jamie Lokier, Jan-Klaas Kollhof, Jason Kersey, Jason Lustig, Jason White, Jasper Bryant-
Greene, Jatinder Mann, Jed Hartman, Jeff Balogh, Jeff Cutsinger, Jeff Schiller, Jeff Walden, Jeffrey
Zeldman, Jennifer Braithwaite, Jens Bannmann, Jens Fendler, Jens Lindström, Jens Meiert, Jeremy Keith,
Jeremy Orlow, Jeroen van der Meer, Jian Li, Jim Jewett, Jim Ley, Jim Meehan, Jjgod Jiang, João Eiras,
Joe Clark, Joe Gregorio, Joel Spolsky, Johan Herland, John Boyer, John Bussjaeger, John Carpenter,
John Fallows, John Foliot, John Harding, John Keiser, John Snyders, John-Mark Bell, Johnny Stenback,
Jon Ferraiolo, Jon Gibbins, Jon Perlow, Jonas Sicking, Jonathan Cook, Jonathan Rees, Jonathan
Worent, Jonny Axelsson, Jorgen Horstink, Jorunn Danielsen Newth, Joseph Kesselman, Joseph Pecoraro,
Josh Aas, Josh Levenberg, Joshua Randall, Jukka K. Korpela, Jules Clément-Ripoche, Julian Reschke,
Jürgen Jeka, Justin Lebar, Justin Sinclair, Kai Hendry, Kartikaya Gupta, Kathy Walton, Kelly Norton, Kevin
Benson, Kornél Pál, Kornel Lesinski, Kristof Zelechovski, Krzysztof Maczyński, Kurosawa Takeshi, Kyle
Hofmann, Léonard Bouchet, Lachlan Hunt, Larry Masinter, Larry Page, Lars Gunther, Lars Solberg, Laura
Carlson, Laura Granka, Laura L. Carlson, Laura Wisewell, Laurens Holst, Lee Kowalkowski, Leif Halvard
Silli, Lenny Domnitser, Leons Petrazickis, Lobotom Dysmon, Logan, Loune, Luke Kenneth Casson
Leighton, Maciej Stachowiak, Magnus Kristiansen, Maik Merten, Malcolm Rowe, Mark Birbeck, Mark
Miller, Mark Nottingham, Mark Pilgrim, Mark Rowe, Mark Schenk, Mark Wilton-Jones, Martijn Wargers,
Martin Atkins, Martin Dürst, Martin Honnen, Martin Kutschker, Martin Nilsson, Martin Thomson, Masataka
Yakura, Mathieu Henri, Matias Larsson, Matt Schmidt, Matt Wright, Matthew Gregan, Matthew
Mastracci, Matthew Raymond, Matthew Thomas, Mattias Waldau, Max Romantschuk, Menno van
Slooten, Micah Dubinko, Michael Engelhardt, Michael ‘Ratt’ Iannarelli, Michael A. Nachbaur, Michael
A. Puls II, Michael Carter, Michael Daskalov, Michael Enright, Michael Gratton, Michael Nordman,
Michael Powers, Michael Rakowski, Michael(tm) Smith, Michal Zalewski, Michel Fortin, Michelangelo De
Simone, Michiel van der Blonk, Mihai Şucan, Mihai Parparita, Mike Brown, Mike Dierken, Mike Dixon, Mike
Schinkel, Mike Shaver, Mikko Rantalainen, Mohamed Zergaoui, Mounir Lamouri, Ms2ger, NARUSE Yui,
Neil Deakin, Neil Rashbrook, Neil Soiffer, Nicholas Shanks, Nicholas Stimpson, Nicholas Zakas, Nickolay
Ponomarev, Nicolas Gallagher, Noah Mendelsohn, Noah Slater, NoozNooz42, Ojan Vafai, Olaf
Hoffmann, Olav Junker Kjær, Oldřich Vetešník, Oli Studholme, Oliver Hunt, Oliver Rigby, Olivier Gendrin,
Olli Pettay, Patrick H. Lauke, Paul Norman, Per-Erik Brodin, Perry Smith, Peter Karlsson, Peter Kasting, Peter
Stark, Peter-Paul Koch, Phil Pickering, Philip Jägenstedt, Philip Taylor, Philip TAYLOR, Prateek Rungta,
Pravir Gupta, Rachid Finge, Rajas Moonka, Ralf Stoltze, Ralph Giles, Raphael Champeimont, Remco,
Remy Sharp, Rene Saarsoo, Rene Stach, Ric Hardacre, Rich Doughty, Richard Ishida, Richard
Williamson, Rigo Wenning, Rikkert Koppes, Rimantas Liubertas, Riona Macnamara, Rob Ennals, Rob
Jellinghaus, Robert Blaut, Robert Collins, Robert Nyman, Robert O’Callahan, Robert Sayre, Robin Berjon,
Rodger Combs, Roland Steiner, Roman Ivanov, Roy Fielding, Ryan King, S. Mike Dierken, Salvatore
Loreto, Sam Dutton, Sam Kuper, Sam Ruby, Sam Weinig, Sander van Lambalgen, Sarven Capadisli,
Scott González, Scott Hess, Sean Fraser, Sean Hayes, Sean Hogan, Sean Knapp, Sebastian Markbåge,
Sebastian Schnitzenbaumer, Seth Call, Shanti Rao, Shaun Inman, Shiki Okasaka, Sierk Bornemann,
Sigbjørn Vik, Silvia Pfeiffer, Simon Montagu, Simon Pieters, Simon Spiegel, skeww, Stanton McCandlish,
Stefan Haustein, Stefan Santesson, Steffen Meschkat, Stephen Ma, Steve Faulkner, Steve Runyon,
Steven Bennett, Steven Garrity, Steven Tate, Stewart Brodie, Stuart Ballard, Stuart Parmenter,
Subramanian Peruvemba, Sunava Dutta, Susan Borgrink, Susan Lesch, Sylvain Pasche, T. J. Crowder,
Tab Atkins, Tantek Çelik, TAMURA Kent, Ted Mielczarek, Terrence Wood, Thomas Broyer, Thomas Koetter,
Thomas O’Connor, Tim Altman, Tim Johansson, Toby Inkster, Todd Moody, Tom Pike, Tommy Thorsen,
Travis Leithead, Tyler Close, Vladimir Katardjiev, Vladimir Vukićević, voracity, Wakaba, Wayne Carr,
Wayne Pollock, Wellington Fernando de Macedo, Weston Ruter, Will Levine, William Swanson, Wladimir
Palant, Wojciech Mach, Wolfram Kriesing, Yang Chen, Ye-Kui Wang, Yehuda Katz, Yi-An Huang, Yngve
Nysaeter Pettersen, Yuzo Fujishima, Zhenbin Xu, Zoltan Herczeg, and Øistein E. Andersen.
205
206
8. Index
A
3D Transforms 121
:lang 142
::after 145
:last-child 144 A4 128
<alphavalue> 108
<length_%> 129 A5 128
<appearance> 96, 139
<length_fixed> 129 abort 184
<article> 21
:link 138 above 136, 171
<aside> 21
<marquee> 50 accesskey 72
<attr> 124
@media 145, 146 addColorStop 187
<audio> 183
@namespace 145, 146 addcontact 162
::before 145
<nav> 21 addElement 167
@character 145
<offset-x> 91 addEventListener 157
:checked 142
<offset-y> 91 Adjacent Sibling 141
<details> 39
:only-child 144 after 135
:disabled 142
:only-of-type 144 after-edge 130
:empty 144
<output 70 age 115
:enabled 142
@page 128, 145, 146 Ajax 193
::first-letter 131, 132, 145
@rules 145 alias 138
::first-line 145
<section> 21 alignment-adjust 129
:first-of-type 144
:target 144 alignment-baseline 130
:focus 142
<template> 92 all 120
@font-face 145, 146
<text_string> 119 all-scrol 138
<footer> 21
207
all-scroll 138 audio/x-ms-wma 19 beginPath() 187
alphabetic 130 aural 145 behind 136
alternate 98, 119 auto 104 Bézier 190
always 108, 127 autofocus 69 bezierCurveTo() 187
an 18 Auto numbering 117 bidi-override 107
animation 118 Auto numbering, and lists 117 bitmap 125, 185
animation-delay 119 autoplay 183 blink 102
animation-direction 119 avoid 108, 127 BlobBuilder 182
animation-duration 119 avoid-colum 108 block 92
animation-iteration-count 119 avoid-column 108 block-line-height 133
animation-name 119 avoid-page 108 bookmark-label 124
animation-play-state 119 bookmark-level 124
animation-timing-function 119 B bookmark-target 124
appearance 137 back 136 Boolean 16
appendChild 173 backface-visibility 121 Boolean attribute 16
Application 19 background 83 Border 83
applicationCache 159 background-attachment 83 border-bottom 89
application/javascript 19 background-clip 84 border-bottom-color 87
application/xhtml+xml 19 background-color 84 border-bottom-left-radius 89
armenian 118 background-image 84 border-bottom-right-radius 89
aside 21 background-origin 85 border-bottom-style 88
aspect value 97 background-position 85 border-bottom-width 88
Asynchronous 193 background-repeat 86 border-box 137
At-rules 145 background-size 86 border-collapse 89, 117
Attribute 16 balance 109 border-color 87
Attribute quotes 22 baseline 130, 134 border-image-outset 90
attr(x) 135 baseline-shift 130 border-image-repeat 91
attr(X,color) 108 Basics border-image-slice 90
Audio 19 elements 15 border-image-source 89
Audio Attributes 184 HTML file 15 border-image-width 90
audio/mpeg 19 HTML tags 15 border-left 89
audio/vnd.rn-realaudio 19 before-edge 130 border-left-color 87
208
border-left-style 88 canplay 184 clearStorage 157
border-left-width 88 Canvas , 11 clearTimeout() 182
border-radius 88 Gradient 189 clearWatch() 171
border-right 89 Lines 188 clone 91
border-right-color 87 Oval 189 closePath() 187
Path: circle 189
border-right-style 88 collapse 96, 117
Path: triangle 189
border-right-width 88 collapsed 89
Raster Image 190
border-spacing 117 color 108
Rectangle 189
border-style 88 col-resize 138
capitalize 106
border-top 89 column 108
caption 96, 139
border-top-color 87 column-count 109, 110
caption-side 117
border-top-left-radius 89 column-fill 109
Capture 173
border-top-right-radius 89 column-gap 110
captureAudio 173
border-top-style 88 column-rule 110
CaptureAudioOptions 173
border-top-width 88 column-rule-color 110
CaptureCB 173
border-width 88 column-rule-style 110
CaptureError 173
both 92 column-rule-width 110
CaptureErrorCB 173
bottom 121, 126, 134 columns 109
captureImage 173
box-align 112 column-span 110
CaptureImageOptions 173
box-decoration-break 91 column-width 110
captureVideo 173
Box Model 83 Common MIME Types 19
CaptureVideoOptions 173
box-ordinal-group 112 compact 92
Cascading 81
box-shadow 91 Case sensitive attributes 21 consider-shifts 133
box-sizing 137 cell 138 Contacts API 163
braille 145 content 137
center 101, 121, 126, 135
break-after 108 content-box 137
central 130, 134
break-all 107 contenteditable 72
Child 141
break-before 108 context-menu 138
class 72
break-inside 109 contextmenu 72
clear 92
controls 183
clear() 158
C clearData 167
coords 171
209
coords.altitude 171 decimal-leading-zero 118 drop-initial-after-align 131
coords.altitudeAccuracy 171 default 138 drop-initial-before-adjust 131
coords.heading 171 Descendant 141 drop-initial-before-align 131
coords.latitude 171 DeviceCapture 172 drop-initial-size 131
coords.longitude 171 dir 72 drop-initial-value 132
coords.speed 171 direction 99 dropzone 166
copy 138 display 92
copyMove 167 displayStorageResults 156 E
createElement 173 disregard-shifts 133 each-line 105
createLinearGradient() 188 distribute 104 ease 119
createPattern 188 distribute-letter 135 ease-in 119
createRadialGradient() 188 distribute-space 135 ease-in-out 119
crop 125 DOCTYPE 21 ease-out 119
crosshair 138 Document 176 East Asian scripts 134
CSS property locations 80 DOM 20 effectAllowed 167
CSS rule 79 dominant-baseline 130 element 15
cubic-bezier 119 DOMStringList 167 Elements and Tags 15
cue 113 dotted 120 ellipsis 95
cue-after 113, 114 double 120 embed 107
cue-before 113, 114 dpi 125 Embedded Content 26
CURIE 152 drag 166 Embedding AV 183
current 136, 139, 170 dragend 166 embeddings 107
cursor 138 dragenter 166 empty-cells 117
DragEvent 166 end 101, 135
210
F G grid-columns 110
grid-height 133
fast 97 generalErrorCB 163
grid-rows 110
File API 174 General Sibling 141
groove 120
FileList 174 Generated content 117
Group 141
FileReader 175 Generated Content 124
H
FileReaderSync 175 Geolocation 11
fill 126 georgian 118
handheld 145
fill() 187 GET 193
handlePositionError 169
fillRect 186 getCurrentPosition 169, 172
hanging 105, 130
fillText 188 getCurrentPosition() 170, 171,
172 hanging-punctuation 99
first-letter 125
getData 167 Headers 123
fit 126
getElementById 166 height 93
fit-position 126
getItem(key) 157, 172 help 138
fixed 117
getPositionUsingMethodName hidden 73, 95, 96, 126
Flash 185
170
hide 117
flat 122
Global Attributes 67, 149
HTML 10
float 93
accesskey 72
HTML5 10, 11
float-offset 124
class 72
HTML5 Forms 67
font 96, 139 contenteditable 72
HTML5 Selectors 146
font-family 96 contextmenu 72
data-yourvalue 72 HTML tags 15
font-size 97, 133
dir 72 HTML versions 10
font-size-adjust 97
draggable 73 HTTP header 18
font-stretch 97
hidden 73 Hyperlink 134
font [ = value ] 188
id 73 hyphenate 107
footer 21
item 73
hyphenate-after 124
footers 123
itemprop 73
hyphenate-before 124
forward 97 lang 73
hyphenate-character 99, 100,
front 136 microdata 73
124
Full boolean attribute 22 spellcheck 73
hyphenate-lines 124
fullwidth 106 style 73
hyphenate-resource 125
function(Position) 170 tabindex 73
hyphens 125
title 73
211
I inline SVG 190
inline-table 92
linear 119
line-edge 135
icon 96, 137, 139
inset 91, 120 line-height 132
id 73
inter-cluster 104 Lines 188
IDBCursor 160
inter-ideograph 104 line-stacking 132
IDBDatabase 159
inter-word 104 line-stacking-ruby 132
IDBIndex 160
INVALID_ARG_ERR 171 line-stacking-shift 132, 133
IDBKeyRange 160
invert 140 line-stacking-strategy 132, 133
IDBObjectStore 160
ISO 8601 68 linkMove 167
IDBRequest 160
item 73 list-item 92
IDBTransaction 160
itemid 151 lists 117
ideographic 130
itemprop 73, 150, 151 list-style 117
Image 19
itemref 151 list-style-image 118
Image cursor 138
items.add 166 list-style-position 118
image/gif 19
items.clear( ) 166 list-style-type 118
image/jpeg 19
itemscope 150, 151 loadeddata 184
image-orientation 126, 128
itemtype 151 loadstart 184
image/png 19
localStorage 156, 157
J
image-resolution 125
location 182
image/svg+xml 19
justify 101, 113 loop 184
importScripts() 181
lower-alpha 118
include-ruby 132
Indexed Database 159 K lowercase 106
lower-greek 118
indexth 166 kashida 104
lower-greek: 118
infinite 97, 119 key(lIndex) 158
lower-latin 118
inherit 82
initial 132 L lower-roman 118
ltr 99
initStorageEvent() 158 landscape 128
M
inline 92, 135 lang 73
inline-block 92 last 132
margin 93
inline-box-align 132 left 92, 93, 101, 108, 121, 126,
127, 135 Margin 83
inline-line-height 133
letter-spacing 100, 101, 108 margin-bottom 93
Inline Semantics 26
212
margin-left 93 MIME type 17, 21 nesw-resize 138
margin-right 93 MIME Type 18 new 136
margin-top 93 MIME Types newValue 158
mark 115 Application 19 no-change 130
mark-after 115 Audio 19 no-content 95
mark-before 115 Image 19 node 20
Message 19
marks 125 no-display 95
Text 19
marquee-direction 97 no-drop 138
Video 19
marquee-line 94 no-limit 124
min 69
marquee-play-count 97 none 136
min-height 93
marquee-speed 97, 98 normal 97, 132
min-width 93
marquee-style 98 not-allowed 138
MISSING_ARG_ERR 171
mathematical 130 NOT_SUPPORTED_ERR 171
modal 136
MathML 11 n-resize 138
model 79
matrix3d 122 ns-resize 138
Model section 82
max-height 93, 133 number 132
moderate 116
max-size 133 number_% 90
Modernizr 26
max-width 93 nw-resize 138
month 68
MediaFileData 173 nwse-resize 138
move 138
medium 114
moveTo(x, y) 187
meet 126 O
menu 96, 139
Message 19
N Object Store 162
oldValue 158
namespace 145
message-bo 96, 139 onabort 77
nav-down 139
message/http 19 onafterprint 74
Navigation Timing 194
metadata 150 onbeforeonload 74
navigator 168, 182
Metadata 25 onbeforeprint 74
nav-index 139
meta tag 18 onblur 74, 75
nav-left 139
methodName 170 oncanplay 77
nav-right 139
microdata 73 oncanplaythrough 77
nav-up 139
Microdata 11 onchange 75
ne-resize 138
middle 130, 134 onclick 76
nesting 15
213
oncontextmenu 75 onmouseup 76 option 24
ondblclick 76 onmousewheel 76 optional & void tags 23
ondrag 76 onoffline 74 orientation 123
ondragend 76 ononline 75 orphans 126
ondragenter 76, 76 onpagehide 75 outline 120, 139
ondragleave 76 onpageshow 75 Outline 120
ondragover 76 onpause 77 outline-color 120, 140
ondragstart , 76, 76 onplay 77 outline-offset 121, 140
ondrop 76 onplaying 77 outline-style 120, 140
ondurationchange 77 onpopstate 75 outline-width 121, 140
onemptied 77 onprogress 77 outset 120
onended 77 onratechange 77 outsides 118
onerror 74, 77, 74 onreadystatechange 77 overflow 94
onError 173 onredo 75 overflow-style 94
onfocus 74, 75 onresize 75 overflow-x 95
onformchange 75 onscroll 76 overflow-y 95
onforminput 75 onseeked 77
onhaschange 74 onseeking 77 P
oninput 75 onselect 75 <p> 24
oninvalid 69, 75 onstalled 77 padding 93
onkeydown 76 onstorage 75 Padding 83
onkeypress 76 onsubmit 75 padding-bottom 94
onkeyup 76 onSuccess 173 padding-left 94
onload 74 onsuspend 77 padding-right 94
onloadeddata 77 ontimeupdate 77 padding-top 94
onloadedmetadata 77 onundo 75 page 108, 127
onloadstart 77 onunload 75 page-break-after 127
onmessage 74 onvolumechange 77 page-break-before 127, 129
onmousedown 76 onwaiting 77 page-break-inside 127
onmousemove 76 opacity 108 Page breaks 123
onmouseout 76 opening tag 16 Paged Media 136
onmouseover 76 optgroup 24 param 23
214
parent 136 Pseudo-Elements 145 responseText 193
pattern 68 rest 115
pause 114, 184 Q rest-after 114
pause-after 114 quadraticCurveTo() 187 rest-before 114
pause-before 114 restore() 188
paused 119
PendingOperation 173
R results 69
reverse 97
range 69
perspective 121 ridge 120
Raphaël 192
perspective(<length>) 123 right 92, 93, 101, 108, 121, 126,
ratechange 184
135
perspective-origin 121
RDF 150
root 136, 139
Pipe character 82
RDFa 152
Root 25
placeholder 69
RDFa attribute
rotate() 188
play 184
about 153
rotate3d 123
pointer 138 content 153
rotateX(<angle>) 123
polyglot 16 datatype 153
rotateY(<angle>) 123
Polyglot document 17 href 153
prefix 153 rotateZ(<angle>) 123
portrait 128
profile 153 rotation 95
PositionError 170, 172
property 153 rotation-point 95
Position object 171
rel 154 round 91
PositionOptions 170
resource 154 row-resiz 138
POST 193
rev 154
row-resize 138
poster 184 src 154
rtl 99
postMessage() 182 typeof 154
ruby 92
preload 184 vocab 154
readyState 193 ruby-align 135
preserve-3d 122
reduced 116 ruby-base 92
preventDefault 166
removeItem(key) 158 ruby-base-group 92
print 145
repeat 91 ruby-overhang 135
progress 138, 184
Replaced Content 128 ruby-position 135
ProgressEvent 174
required 69 ruby-span 135
Pseudo-Classes 141, 146
reset-size 130 ruby-text 92
pseudo element 131
resize 140 ruby-text-group 92
pseudo-element 137
run-in 92
215
running 119 shadowBlur 188 stretch 91
shadowColor 188 string-set 125
Scalable Vector Graphic 190 Shorthand 80, 117, 120 strokeText 188
T
setInterval() 182 spellcheck 73
216
table-column 92 text/html 19 transform-style 122
table-column-group 92 text-indent 104, 105 transition 120
table-header-group 92 text/javascript 19 transition-delay 120
table-layout 117 text-justify 104 transition-duration 120
table-row 92 text-outline 106 transition-property 120
table-row-group 92 text-overflow 95 Transitions 118
Tabular Data 26 text/plain 19 transition-timing-function 119
Tag nesting 15 text-replace 125 translateX 122
target 136 text-shadow 105 transparent 108
target-name 136 text-size 133 triples 152
target-new 136 text-top 134
target-position 136 text-transform 102, 103, 104,
106
U
tbody 24 UndoManager 167
text-wrap 106, 107
td 24 UndoManagerEvent 167
text/xml 19
tel 68 undo object 167
th 24
Terminating slash 22 Unescaped Special
thead 24 Characters 22
text 138
thick 121 unicode-bidi 107
text-after-edge 130
thin 121 uninitialized 167
text-align 100
time 151 Universal Grandchild 141
text-align-last 101
timestamp 171 UNKNOWN_ERROR 171
textAlign [ = value ] 188
title 73 unrestricted 107
textBaseline [ = value ] 188
top 121, 126, 134 upper-alpha 118
text-before-edge 130
Touch 176 uppercase 106
text-bottom 134
TouchEvent 176 upper-latin 118
text/css 19
Touch Events 176 upper-roma 118
text/csv 19
TouchList 176 upper-roman 118
text-decoration 102
transform 121, 188 URI 152
text-decoration-line 102
transform function 121 use-script 130, 134
text-emphasis 103
transform functions 121
text-emphasis-color 103
text-emphasis-style 103
‘Transform’ Functions 122
transform-origin 121
V
text-height 133 value 69
Transforms 121
217
vertical-align 134 Web Messaging 179 XML MIME type 17
vertical-text 138 Web Open Font Format 145 x-strong 114
Video 19 WebSocket() 177 x-weak 114
Video attributes 183 WebSocket events 178
video/mp4 19 Web Sockets 177
video/mpeg 19 Web SQL 162
video/quicktime 19 Web SQL Database 156
video/x-ms-wmv 19 Web Storage 156
visibility 96 Web Workers 181, 193
visible 95, 96 week 68
voice-balance 115 well-formed syntax 17
voice-duration 115 WGS 84 170
voice-family 115 WHATWG 10
voice-pitch 116 white-space 107
voice-rate 116 White space normalization
21
voice-stress 116
widows 126
voice-volume 116
width 93
void elements 22
window 136
Void Elements 16
WOFF 145
volumechange 184
word-break 107
W word-spacing 108
Worker() 181
WAI-ARIA 155
World Geodetic System 170
wait 138
w-resize 138
waiting 184
X
watchId 171
watchPosition 171
XHTML 10, 17
watchPosition() 170
XHTML5 17
weak 114
XML 185
Web Forms 2.0 67
XML declaration 21
WebGL 185
XMLHttpRequest 159, 182
webkit 91
218