HTML5: State of the Union

Monday, November 29, 2010

HTML5*: State of the Union*(Including satellites and CSS3)

MICHAEL MULLANY, SENCHA


HTML5?

localStorage

WebSQL

gradient

-webkit

CSS Text

GeoLocation

canvastype=camera

Editor Draft

Working Draft

@page

@mediamanifest

ProposedRecommendation

last call

accelerometer

keyframe

transform

text-align

<video>


HTML5 Core Spec

HTML5 Spinouts

CSS3 Modules

STANDARDS

IMPLEMENTATIONSTrident: Microsoft

Webkit: Apple, Google, RIM ++Gecko: Firefox

Presto: Opera

“HTML5”HTML5 Satellites


Unleashing HTML5...

Worker Parallel

Processing

File SystemsDBs

App Cache

Javascript

Semantic HTML

CSS Styling & Layout

WebFonts Video Audio Graphics

x-AppMessaging

Device Access

Camera

Location

Contacts

SMS

Orientation

Gyro

Server & Services

HTTP

AJAX

Events

Sockets

SSL

More...

Unpopular CSS3Text

Text Layout Grid Positioning

@PageVariables

Aural style sheetsruby...

Popular CSS3Borders

BackgrdsColor

GradientsTransformsAnimations

...

FlexBoxSelectors@Media

WebFontsMulti-Col

...


Rich Media & Styling Full Resource Access

Parallel ProcessingInter-App Communication

Full O!ine Capability COMPLETE MODERN APP PLATFORM


Three Questions To AskWhat does it do?

What browsers support it?

Is it a standard?


1. What Does It Do?


HTML5 & Satellites


HTML5 Semantic Tags

<nav> <article>

<section>

<section>

<H1>

<H1>

<aside>

<footer>

<header> New Content Model1.Meta Data2.Flow3.Sections4.Headings5.Phrasing6.Embedded 7.Interactive

Revision Control Primitives<ins> & <del>

and much much more...<time>


HTML5 CanvasCreate a drawing area

Draw & write in itlines, boxes, gradients, arcs ..

TransformsComposites

ShadowsTweak pixels

Img <-> Canvas <-> Img

Low-Level Bit-Map Format


HTML5 <Video> (& <Audio>)

<object width="425" height="344">

<param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Before After<video src=pudding.ogv width=320 height=240 controls poster=pudding.jpg></video>

http://dev.opera.com/articles/view/introduction-html5-video/


http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&












Cross Document Messaging

post message to bar.com/receiver.html

foo.com/sender.html

iframeadd event listener

receive message check origin is bar.com

bar.com/receiver.html


O!ine Operation

sessionStoragelocalStorage

AppCacheList of o!ine assets- img, mov, css, js...

WebSQL & IndexDBo!ine databases

FileAPIfiles & directories

key:value

Sandboxed By Origin

w/ BrowserOver-rides

Not general native file access


Device APIMedia Capture- Extends <input> to new types- Sound, image, video

Contacts API- Search & extract contacts info- CRUD operations

And More..- Gallery, SMS- Based on Nokia & BONDI APIs

<input type="file" accept="image/*" id="capture">

Prompts user to take a photo


Cascading Style SheetsLevel 3


Selectors Color & ImagesNamespace

Relationship

Attribute

Pseudo-Classes

Pseudo-Elements

Rounded Borders

Border Images

Multiple Bckgrnds

Clip

Size

Backgrounds & Borders

Fonts@font-face

font-size adjust

font-stretch

Clip

Size

Transforms & Animations

Animation

2D Transform

3D Transform

Transitions

@keyframe

align

direction

flex

pack

orientMedia Queries

Width/Height

Device Dimensions

Resolution

Orientation

Multi-ColumnCount

Width

Gap

Break, fill, span

Flex Box

SVG Colors

HSLa

RGBa

Gradients

CSS3 Unpacked


HSLa and RBGa


Borders and Backgrounds

Plain

border-radius

border-image

padding boxcontent box

border box

multiple backgrounds, stretch, tile, round, scroll, attach-points...


RBGA Magic

GradientsLinear (with angles)RadialColor-StopsCombine with RBGA

Usable everywhere as image replacements


Gradients & Clipping

slight background gradientbackground-clip: text

2 radial gradients: multiple color stops radial gradient: multiple color stops

box-reflect on underlay DIV with a pure alpha gradient overlay


Web Fonts • Fonts.com (biggest)• Typekit.com (coolest)• Many others...• Free Google samples


2. Who Supports It?


Sources of DataModernizr: Detects basic supportWikipedia: Detailed support e.g. backface-visibility

...mostly up to date


IE 9 PR Chrome 7 Safari 5 Firefox 4b iPhone 4 BB Torch Android 2.2@font-faceCanvasHTML5 Audio & Videorgba(), hsla()border-image:border-radius:box-shadow:text-shadow:opacity:Multiple backgroundsFlexible Box ModelCSS AnimationsCSS ColumnsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS TransitionsGeolocation APIlocal/sessionStorageSVG/SVG ClippingSMILInline SVGDrag and DrophashchangeX-window MessagingHistory ManagementapplicationCacheWeb SocketsWeb WorkersWeb SQL DatabaseWebGLIndexedDB

MODERNIZR


Wikipedia HeatmapHundreds of individual properties across HTML5 and CSS2 & 3

Color code each property support per browser

Put it on a single page!

Supported

No Support

Beta Support

Incorrect Support

Unknown

Partial Support


SemanticElements

HTML5 Forms

Media PlaybackEvents

Canvas

HTML5& Satellites


@page

Speech

CSS2


Element Selectors

AdvancedBorder Images

Advanced Text

Speech CSS

Animations, Flexbox, Marquee

CSS3 Values (vh, dpi)

CSS3


About That Salt...3D transforms- Performance limited

Mobile Performance- Canvas, SVG, Animations

Video Codecs

Box-Shadow-Blur- Not combinable with border radius

Border-images- Image o"sets & gradients still getting shaken out


3. Is It A Standard?


20 Years of the Web

MicrosoftWeb Strategy

Memo

Tim Berners LeePublishes

MosaicDemo

CERN puts Web foundations into the

public domain

NetscapeIPO

MicrosoftCancels

Blackbird

Apple/Microsoft O!ce/IE

Deal

InternetExplorer

96%ShareIE 3.0 Ships

AOL/Netscape

Apple Safari1.0 Ships

WHATWG Schism

Google Maps“Web 2.0”

Google Chrome1.0 Ships

Firefox1.0 Ships

iPhoneShips

Google Android 1.0

Released

iPadShips

1990 1995 2000 2005 2010


HTML & CSS Standards Evolution

Tim Berners LeePublishes

MosaicDemo

NetscapeIPO

InternetExplorer

96%ShareIE 3.0 Ships

AOL/Netscape

Apple Safari1.0 Ships

Google Maps“Web 2.0”

Chrome1.0 Ships

Firefox1.0 Ships

iPhoneShips

Google Android 1.0

Released iPadShips

1990 1995 2000 2005 2010

1 2 3HTML 4 (XHTML) 5

CSS 1 2 32.1

WHATWG Schism


4 Eras of Web Standards

<Title><NextID><?> Base Address<A> <IsIndex><Plaintext><Listing><p>, <h1>...<Address><HP1> (Highlights)<DL> <DT> (Glossary)<LI> (UL, Menu, Dir)

<FRAMESET><FONT><CENTER><MARQUEE><LAYER><BLINK>

XpathXQueryXSLTXForms...

HTML5&

CSS3

Birth ... Chaos ... Crisis ... Maturity


XHMTL & CSS2“Standardize

andIgnore”


HTML5“Implement

thenStandardize”


Standards Making?


Standards Making

Good Ideas

Working Draft

Candidate Recommendation

Proposed Recommendation

STANDARD

Legacy

CompatibilityPersonal

Relationships

International

Vendor

Strategies

Astronauts

Facts on The

Ground

Personalities

And more...Browser

Team Priorities


Lies, Damn Lies, Statistics.

And... Claims About Standards


There Are Only 3 O"cial Full Standards for CSS

Document Object Model Level 2 Style Specification 2000

Cascading Style Sheets Level 1 Specification 2008

Associating Style Sheets with XML documents 1.0 (Second Edition) 2010


http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113

http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113

http://www.w3.org/TR/2008/REC-CSS1-20080411/

http://www.w3.org/TR/2008/REC-CSS1-20080411/

http://www.w3.org/TR/2010/REC-xml-stylesheet-20101028




XMLHttpRequest (aka AJAX)

Candidate Recommendation

August 2010


HTML5 StatusCore Spec WD LC CR LC PR 10/10

Geolocation API WD LC CR LC PR 09/10Web Workers WD LC CR LC PR 12/09Web Sockets WD LC CR LC PR 12/09

IndexedDB WD LC CR LC PR 08/10Web SQL SUSPENDED 12/09

Server-Sent Events WD LC CR LC PR 12/09DeviceOrientation Editor’s Draft 08/10

Contacts API WD LC CR LC PR 08/10SMS API WD LC CR LC PR 08/10

Media Capture WD LC CR LC PR 09/10File API WD LC CR LC PR 10/10


Module StatusCSS 2.1 WD LC CR LC PR 09/09

Bcks & Borders WD LC CR LC PR 06/10Color WD LC CR LC PR 10/10

Image Values WD LC CR LC PR 09/10Media Queries WD LC CR LC PR 07/10

Selectors WD LC CR LC PR 12/09Animations WD LC CR LC PR 03/09

Flex Box WD LC CR LC PR 07/09Fonts WD LC CR LC PR 06/09

Generated Content WD LC CR LC PR 05/03Multi-Column WD LC CR LC PR 12/092D Transforms WD LC CR LC PR 12/093D Transforms WD LC CR LC PR 03/09

Transitions WD LC CR LC PR 12/09Monday, November 29, 2010

CSS Module StatusPaged Media ED WD LC CR LC PR 10/06

Variables ED WD LC CR LC PR 04/08Mobile Prof 2.0 ED WD LC CR LC PR 12/08

Box Model ED WD LC CR LC PR 08/07GC for Paged Media ED WD LC CR LC PR 06/10

Grid Positioning ED WD LC CR LC PR 09/07Lists ED WD LC CR LC PR 11/02

Object Model ED WD LC CR LC PR 08/10Obj Model - View ED WD LC CR LC PR 08/09

Namespaces ED WD LC CR LC PR 05/08ruby ED WD LC CR LC PR 05/03

Template Layout ED WD LC CR LC PR 04/10Text ED WD LC CR LC PR 10/10

Text Layout ED WD LC CR LC PR 05/03Basic UI ED WD LC CR LC PR 05/04

Values & Units ED WD LC CR LC PR 09/06

Significant Non-Implementation


STATE OF THE UNION


HTML5: State of the Union

Worker Parallel

Processing

Javascript

Semantic HTML

CSS Styling & Layout

WebFonts Video Audio Graphics

x-AppMessaging

Device Access

Camera

Location

Contacts

SMS

Orientation

Gyro

Server & Services

HTTP

AJAX

Events

Sockets

SSL

App Cache

Storage

DBs/Files


Thanks!


• High Priority Modules◦ CSS Backgrounds and Borders Level 3◦ CSS Color Level 3◦ CSS Namespaces◦ CSS Object Model View Module◦ CSS Paged Media Level 3◦ CSS Variables◦ Media Queries◦ Selectors Level 3

• Medium Priority Modules◦ CSS Animations◦ CSS Basic Box Model Level 3◦ CSS Fonts Level 3◦ CSS Generated and Replaced Content Level 3◦ CSS Grid Positioning◦ CSS Marquee Level 3◦ CSS Multi-column Layout◦ CSS Object Model Level 3◦ CSS Ruby◦ CSS Template Layout◦ CSS Transformations◦ CSS Transitions◦ CSS Values and Units Level 3

• Low Priority Modules◦ CSS Extended Box Model Level 3◦ CSS Flexible Box◦ CSS Generated Content for Paged Media◦ CSS Lists Level 3◦ CSS Tables Level 3◦ CSS Text Layout Level 3

CSS Working

Group Priorities

2010


Technology

HTML5: State of the Union