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
