Scribd
Upload
27 views

Up To Speed On: HTML 5

The document provides an overview of new HTML5 and CSS3 features including new semantic HTML5 elements, forms, multimedia, drag and drop APIs. It also covers CSS3 features like opacity, color, backgrounds, borders, and box shadows. The document is intended to help readers get up to speed on latest web standards.

Uploaded by

SMaahrukkh Anwer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

Up To Speed On: HTML 5

The document provides an overview of new HTML5 and CSS3 features including new semantic HTML5 elements, forms, multimedia, drag and drop APIs. It also covers CSS3 features like opacity, color, backgrounds, borders, and box shadows. The document is intended to help readers get up to speed on latest web standards.

Uploaded by

SMaahrukkh Anwer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 67

UP TO SPEED ON

HTML 5 & CSS 3


</TITLE>

REFRESH DC | M. JACKSON WILKINSON & JASON GARBER | JULY 16, 2009


Sunday, July 19, 2009

THE INTRO
Sunday, July 19, 2009

Thats
Michael

M. JACKSON WILKINSON
Your Humble Refresh DC Organizer

Sunday, July 19, 2009

Sunday, July 19, 2009

Sunday, July 19, 2009

JASON GARBER
Refresh DC Organizer Emeritus

Sunday, July 19, 2009

Sunday, July 19, 2009

A Very Brief History of

WEB STANDARDS
Sunday, July 19, 2009

XHTML 1

CSS 2.1

Content

Presentation

2001-2006
Sunday, July 19, 2009

WHAT WG
Web Hypertext Application
Technology Working Group

2004-2007
Sunday, July 19, 2009

W3C
World Wide Web
Consortium

2007 - PRESENT
Sunday, July 19, 2009

HTML 5

CSS 3

Content

Presentation

2007 - PRESENT
Sunday, July 19, 2009

The Content Layer:

HTML 5
Sunday, July 19, 2009

NEW ELEMENTS

Sunday, July 19, 2009

structural elements
Provides new semantic vocabulary
for parts of a page previously
served by DIVs with ID and Class
attributes.

HEADER
NAV
ARTICLE

IE requires some workarounds


using JavaScript to make these
elements work.

ASIDE
SECTION
FOOTER

structural elements
Sunday, July 19, 2009

Browser Support:

figure
Allows for associating captions
with embedded content, including
videos, audio, pullquotes, or
images.

FIGURE

CONTENT (IMG, Q, VIDEO, ETC.)

LEGEND

figure
Sunday, July 19, 2009

Browser Support:

audio & video


Allows for associating captions
with embedded content, including
videos, audio, or images.

<video src="test.ogg" autoplay="autoplay"


controls="controls">
Your browser does not support the video
element. This could also include object and
embed codes for legacy browsers.
</video>

Opera, Chrome, and Firefox all


support the Ogg Theora video
format natively, while Safari and
Chrome support H.264.

audio & video


Sunday, July 19, 2009

Browser Support:

OTHER ELEMENTS
METER

Contained content is a measurement, like length.

PROGRESS

Contains current process toward a goal, like a percentage.

TIME

Time

COMMAND

Represents something a command a user may execute.

DATAGRID

Represents data. Non-tabular or otherwise.

OUTPUT

Displays the output of a program or process.

RUBY

Allows input of rubi/ruby annotations for Asian languages.

Sunday, July 19, 2009

NEW FORM
CONTROLS

Sunday, July 19, 2009

FORM CONTROLS
DATETIME

Allows input of a date and a time.

DATETIME-LOCAL

Allows input of a date and a time, in local time.

NUMBER

Allows input of a number.

RANGE

Input is verified to be within a range.

EMAIL

Confirms the input to be a valid email.

URL

Ensures input is a valid URL.

COLOR

Provides a mechanism for the user to input an RGB color.

Sunday, July 19, 2009

DOC STRUCTURE

Sunday, July 19, 2009

HTML 5 doctype
The HTML 5 doctype is way
easier than any other doctype.
Evar.

<!DOCTYPE html>

Just type the parts you remember,


and youll probably be right.

HTML 5 doctype
Sunday, July 19, 2009

Browser Support:

HTML5 & XHTML5


HTML 5 supports the standard
HTML syntax (formerly SGML),
but also allows for an XML-based
variant XHTML5.
Since its XML, XHTML should
be served as application/xml or
application/xhtml+xml. Warning:
this means browsers freak if theres
an error.

HTML 5 doctype
Sunday, July 19, 2009

<html>

vs.
<html xmlns="http://
www.w3.org/1999/xhtml">

Browser Support:

Block-Level Links
You can now wrap links around
block-level elements, rather than
having to create links around
every element inside the block
element.
This is useful for lists of articles
that include multiple elements,
callouts with a single action, etc.

Block-level Links
Sunday, July 19, 2009

<li>
<a href="page.html">
<img src="pic.jpg">
<h3>Title</h3>
<p>Text</p>
</a>
</li>

Browser Support:

NEW APIs

Sunday, July 19, 2009

Drag & Drop API


Allows objects (images and links,
by default) to be dragged and then
dropped onto a target.
The target is enabled by canceling
the dragover (for sane browsers)
or dragenter (for IE) events for
the drop target. Then listen for a
drop event which contains a
dataTransfer object with info.

Drag and Drop API


Sunday, July 19, 2009

Browser Support:

getElementsByClassName
Works just like getElementsById,
but selects an array of all elements
based on a shared class name.
No more varied custom functions
to make this happen, and
performance is significantly better.

getElementsByClassName
Sunday, July 19, 2009

Browser Support:

Cross-Document Messaging
This allows non-hostile documents
on different domains to simply
communicate with each other.

MAIN DOCUMENT

The sending document can call


postMessage() on the window
object of the receiving document,
while the receiving document listens
for a message event.

Cross-Doc Messaging
Sunday, July 19, 2009

FOREIGN
IFRAME

Browser Support:

Simple Client Storage


The sessionStorage DOM attribute
stores session data for a single
window, like cookies on crack.
The localStorage DOM attribute
allows each site to store megabytes
of data across sessions to improve
performance.

<input
type="checkbox"
onchange="
localStorage.insurance=checked
"
/>

Both methods store only strings.

Simple Client Storage


Sunday, July 19, 2009

Browser Support:

Structured Client Storage


HTML 5s Web Storage module
provides an SQL server within the
client, accessible using Javascript. It
uses fairly standard SQL queries
for both reading and writing.
Theres a lot to be explained about
the built-in SQL server, so go
check out the docs for more
information.

Structured Client Storage


Sunday, July 19, 2009

tx.executeSql(
SELECT * FROM Notes,
[],
function(tx, rs) {
for(var i = 0;
i < rs.rows.length; i++) {
renderNote(rs.rows[i]);
}

Browser Support:

Offline Application Caching


Allow the client to refer directly to
its cache, authoritatively, for
certain resources, even if the
browser is offline.
Resources listed in the network
section are never cached.

<html manifest=/cache.manifest>

CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png
NETWORK:
server.cgi

Offline Application Caching


Sunday, July 19, 2009

Browser Support:

Canvas
Provides an API for drawing
directly in the browser window,
using instructions that define
vector-based shapes and lines.
This allows SVG-like graphics to be
created on the fly in the browser,
with fallback content (like Flash?)
provided to legacy browsers.

<canvas id="canvas" width="150" height="150">


fallback content
</canvas>
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}

canvas
Sunday, July 19, 2009

Browser Support:

The Presentation Layer:

CSS 3
Sunday, July 19, 2009

COLOR

Sunday, July 19, 2009

opacity
Adjusts the opacity of the selected
elements presentation on screen.
Takes values between 0.0 (fully
transparent) and 1.0 (fully
opaque)

opacity
Sunday, July 19, 2009

div { color: #f00; opacity: 1.0; }

div { color: #f00; opacity: 0.5; }

Browser Support:

RGBA Color
Like RGB color definitions, but
allows a fourth field, defining the
alpha value of the color being
applied.

div { color: rgb(0,255,0); }

div { color: rgba(0,255,0,0.5); }

Like opacity, the alpha value is


between 0.0 (fully transparent)
and 1.0 (fully opaque).

RGBA color
Sunday, July 19, 2009

Browser Support:

HSL/A Color
HSL color definitions accept three
arguments: hue is a degree on a
color wheel (0-360), saturation
is a percentage, and lightness is a
percentage.

div { color: hsl(240,50%,50%); }

div { color: hsla(240,50%,50%,0.5); }

HSLA is like HSL color, but


allows a fourth field, defining the
alpha value of the color being
applied. See RGBA.

HSL/A color
Sunday, July 19, 2009

Browser Support:

BACKGROUNDS

Sunday, July 19, 2009

background-size
Defines the size at which the
browser should display the specified
background image. Accepts all
normal size definitions as width
followed by height.

div { background-size: 100px 65px; }

div { background-size: 400px 65px; }

In shorthand, this appears after


background-position values.

background-size
Sunday, July 19, 2009

Browser Support:

background-image
Allows for multiple images to be
specified. The first image specified
is layered closest to the top of the
screen, and subsequent images are
layered beneath.

background-image
Sunday, July 19, 2009

background: url(body-top.png) top left no-repeat,


url(body-bottom.png) bottom left no-repeat,
url(body-middle.png) left repeat-y;

Browser Support:

BORDERS

Sunday, July 19, 2009

border-color
Allows for multiple border colors
to be specified, one pixel at a time.
The last specified color is repeated
if necessary.

border: 5px solid #000;


border-color: #000 transparent transparent #000;

This cannot be used in the border


shorthand syntax.

border-color
Sunday, July 19, 2009

Browser Support:

border-image
Allows the border to be represented
by an image, by defining which
parts of the image should be used
for the edges, and which should be
repeated in the main part of the
element.

border-image: url(button.png) 0 12 0 12 stretch


stretch;

border-image: url(border.png) 27 27 27 27 round


round;

This is difficult to represent


completely, so go look it up.

border-image
Sunday, July 19, 2009

Browser Support:

border-radius
Curves the corners of the border
using the radius given, often in
pixels. This can be given to all
corners, or only to individual
corners as specified.

border-radius: 10px;

border-top-right-radius: 10px;

Firefox refers to individual corners


like border-radius-topright
while Safari (correctly) refers to it
as border-top-right-radius.

border-radius
Sunday, July 19, 2009

Browser Support:

box-shadow
Creates a drop shadow beneath the
selected element.

box-shadow: 10px 10px 10px #333;

The first argument is the horizontal


offset, the second is the vertical
offset, the third is the blur radius,
and the final argument is the color
to be used as the shadow.

box-shadow
Sunday, July 19, 2009

Browser Support:

TEXT

Sunday, July 19, 2009

text-overflow
If text overflows the available
space, the text-overflow property
defines what happens.
The value ellipsis appends an
ellipsis character at the overflow
point.

text-overflow
Sunday, July 19, 2009

text-overflow: ellipsis;
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nam purus nunc, auctor et accumsan ut, aliquam
vel leo. Quisque dignissim tincidunt rhoncus. Duis
sed velit rutrum lorem rutrum faucibus. Nam tincidunt
eros at arcu vestibulum egestas. Donec fringilla,
turpis in auctor luctus, orci orci vestibulum lacus,
a tristique felis erat non diam. Morbi dolor massa,
elementum ac iaculis quis, iaculis sed neque. Aliquam
erat volutpat. Aliquam porttitor auctor massa sit
amet ultrices. Maecenas quis nunc nibh, sit amet
hendrerit leo. Donec a massa eget velit consectetur
fermentum aliquet et eros. Vestibulum volutpat, est
vitae dapibus congue, nibh augue vehicula lacutus es

Browser Support:

text-shadow
Creates a drop shadow beneath the
selected text.

text-shadow: 10px 10px 10px #333;

This is sample text.

The first argument is the horizontal


offset, the second is the vertical
offset, the third is the blur radius,
and the final argument is the color
to be used as the shadow. Multiple
shadow definitions may be
separated using commas.

text-shadow
Sunday, July 19, 2009

Browser Support:

column-width & column-gap


Breaks flowing text into multiple
columns, based on the width of the
container. Column width defines
the width of each column, and
column-gap defines the gap
between columns.
Column-count can be specified in
lieu of column-width.

column-width/column-gap
Sunday, July 19, 2009

column-width: 200px;
column-gap: 20px;
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam purus nunc, auctor et
accumsan ut, aliquam vel leo. Quisque
dignissim tincidunt rhoncus. Duis sed velit
rutrum lorem rutrum faucibus. Nam tincidunt
eros at arcu vestibulum egestas. Donec
fringilla, turpis in auctor luctus, orci orci
vestibulum lacus, a tristique felis erat non
diam. Morbi dolor massa, elementum ac
iaculis quis, iaculis sed neque. Aliquam erat
volutpat. Aliquam porttitor auctor massa sit
amet ultrices. Maecenas quis nunc nibh, sit
amet hendrerit leo. Donec a massa eget velit
consectetur fermentum aliquet et eros.
Vestibulum volutpat, est vitae dapibus
congue, nibh augue vehicula lacus, vel
semper dolor odio in libero. Curabitur vitae
sem consequat purus fermentum tincidunt.
Donec vestibulum felis ut metus ultrices a
vulputate felis rhoncus eum ivolonortis

Browser Support:

quisque dignissim tincidunt rhoncus. Duis sed


velit rutrum lorem rutrum faucibus. Nam
tincidunt eros at arcu vestibulum egestas.
Donec fringilla, turpis in auctor luctus, orci
orci vestibulum lacus, a tristique felis erat non
diam. Morbi dolor massa, elementum ac
iaculis quis, iaculis sed neque. Aliquam erat
volutpat. Aliquam porttitor auctor massa sit
amet ultrices. Maecenas quis nunc nibh, sit
amet hendrerit leo. Donec a massa eget velit
consectetur fermentum aliquet et eros.
Vestibulum volutpat, est vitae dapibus
congue, nibh augue vehicula lacus, vel
semper dolor odio in libero. Curabitur vitae
sem consequat purus fermentum tincidunt.
Donec vestibulum felis ut metus ultrices a
vulputate felis rhoncus eum ivolonortis

@font-face
Allows a font file to be associated
with a font name for later use in
font-family declarations.
IE supports only .eot Embedded
OpenType files, while the other
browsers support any TTF and
OTF font files.

column-width/column-gap
Sunday, July 19, 2009

@font-face {
font-family: Helvy;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
p.specialFont { font-family: Helvy, sans-serif; }

Browser Support:

TRANSFORMATION

Sunday, July 19, 2009

rotate
Rotates the selected element at the
defined angle, defined in degrees.
The rotation doesnt affect layout,
and elements that are transformed
are treated similarly to
position:relative.

rotate
Sunday, July 19, 2009

transform: rotate(30deg);

Browser Support:

scale
Scales the element in question
based on the specified unit-less
numbers given for the X and Y
axes. If only one number is given, it
is applied to both axes.

scale
Sunday, July 19, 2009

transform: scale(0.5,2.0);

Browser Support:

skew
Skews the element around the X
and Y axes by the specified angles,
in degrees. If its only one number,
the Y axis is assumed to be zero.

scale
Sunday, July 19, 2009

transform: skew(-30deg);

Browser Support:

translate
Moves the object along each axis by
the length specified. The unit can
be anything accepted as a length in
CSS, such as px, em, percentages,
etc.

translate
Sunday, July 19, 2009

transform: translate(30px, 0);

Browser Support:

3D TRANSFORMATIONS
PERSPECTIVE

The distance, in pixels, of the z=0 plane from the viewer.

MATRIX3D

Allows creation of a 3d transformation matrix.

ROTATE3D

Rotate the matched element in three dimensions.

SCALE3D

Performs a three-dimensional scale operation.

TRANSLATE3D

Allows the matched element to be moved along three axes.

Sunday, July 19, 2009

BROWSER PREFIXES

Sunday, July 19, 2009

FIREFOX:

-moz-box-shadow:

SAFARI:

-webkit-box-shadow:

OPERA:

-o-box-shadow:

IE:

-ms-box-shadow:

Sunday, July 19, 2009

READY YET?
When is it Time to Use These?

Sunday, July 19, 2009

THE FUTURE

Sunday, July 19, 2009

IMPLEMENTATION
trumps
SPECIFICATION
Sunday, July 19, 2009

PROGRESSFUL

DEGRAHANCEMENT

Sunday, July 19, 2009

In the end, be mindful of

BUSINESS AND
USER GOALS

Sunday, July 19, 2009

A Healthy Dose of

CRITICISM

Sunday, July 19, 2009

MORE RESOURCES
HTML 5 Doctor

http://html5doctor.com/

HTML 5 Spec

http://dev.w3.org/html5/spec/Overview.html

ALA Article

http://www.alistapart.com/articles/previewofhtml5

Bruce Lawson

http://www.brucelawson.co.uk/category/
accessibility-web-standards/html5/

Your Presenters

Feel free to follow up with Jackson & Jason

Sunday, July 19, 2009

FIN
Sunday, July 19, 2009

Get in Touch!

SpeakerRate: spkr8.com/t/1250
Twitter: @whafro & @jgarber

Sunday, July 19, 2009

You might also like