HTML5 & CSS3 Workshop [FoWD NYC 2011]

Aaron Gustafson
@aarongustafson

FUTURE OF WEB DESIGN NYC 2011

HTML 4.01
html
meta head link style
title base body dl dt dd
bdo script noscript map dfn b
object param p div ul ol li cite
iframe address area img br a i small
pre code abbr kbd var q samp hr menu
textarea ins del sub sup span strong
select option optgroup label input
form fieldset legend button u em
blockquote h1 h2 h3 h4 h5 h6
table caption col colgroup
thead tbody tfoot tr
th td


HTML5
html
title base body dl dt dd section article
bdo script noscript map dfn b aside details summary
object param p div ul ol li cite canvas audio video
iframe address area img br a i small nav figure figcaption
pre code abbr kbd var q samp hr menu header footer command
textarea ins del sub sup span strong time source datalist
select option optgroup label input output ruby progress
form fieldset legend button u em mark hgroup meter
blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed
table caption col colgroup rt rp
th td


Our focus today
html
title base body dl dt dd section article
bdo script noscript map dfn b aside details summary
object param p div ul ol li cite canvas audio video
iframe address area img br a i small nav figure figcaption
pre code abbr kbd var q samp hr menu header footer command
textarea ins del sub sup span strong time source datalist
select option optgroup label input output ruby progress
form fieldset legend button u em mark hgroup meter
blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed
table caption col colgroup rt rp
th td

What’s the
easiest way to
“switch” a site to
HTML5?


Fault tolerance
<!DOCTYPE html>


Simpli cation
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en">

<html lang="en">


Simpli cation
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">

<meta charset="utf-8" />


Simpli cation
<link rel="stylesheet" href="style-original.css" type="text/css" />
<style type=”text/css”>
/* … */
</style>
<script type=”text/javascript” src=”myscript.js”></script>

<link rel="stylesheet" href="style-original.css" />
<style>
/* … */
</style>
<script src=”myscript.js”></script>

Organization
9+ 4+ 6+ 5+ 11.1+

Organization
<section>

</section>

<article>

</article>

HTML5 & CSS3 Workshop [FoWD NYC 2011]

Organization
<header>

</header>

<footer>

</footer>


Organization
<nav>
<ol>
<li><a href="#details">Details</a></li>
<li><a href="#lodging">Lodging</a></li>
<li><a href="#location">Location</a></li>
<li><a href="#topics">Topics</a></li>
<li><a href="#contact">Contact Us</a></li>
</ol>
<p><a href="register">Register Now</a>
<b>Only 5 spaces left</b></p>
</nav>

Organization
<article>



<aside>

</aside>

</article>


Implicit sections (HTML 4)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...

<h2> W3C standardization process
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...

<h2> Markup
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...

1 HTML5
1.1 W3C standardization process
1.2 Markup


Explicit sections (HTML5)
<h1> HTML5

section


<h2> Markup
section


1 HTML5
1.2 Markup


<h1> HTML5

section


<h1> Markup
section


1 HTML5
1.2 Markup


<h1> HTML5

section


<h6> Markup
section


1 HTML5
1.2 Markup


Sections
๏ section
๏ article
๏ aside
๏ footer
๏ header
๏ nav

49


Outline limitations in HTML4
<h1> Title
<h2> Subtitle
<p> Text content continues...

1 Title
1.1 Subtitle


Heading groups (HTML5)

hgroup
<h1> Title
<h2> Subtitle

1 Title


Aside: rooted sections
<h1> Title

<h2> Section heading
<blockquote>
<h2> Rooted heading

1 Title
1.1 Section heading


Sectioning roots
๏ body
๏ blockquote
๏ details
๏ fieldset
๏ figure
๏ td

53


Rede nition
The em element
Represents a span of text text with emphatic stress.

<p>HTML5 introduces several <em>really</em> useful elements and
a ton of new APIs.</p>

The strong element
Represents a span of text of great importance.

<p>Please fill out the form below. <strong>Note: all
fields are required.</strong></p>


Rede nition
The b element
Represents a span of text oﬀset from its surrounding content, but of no extra
importance.

<p>This presentation is about <b>HTML5</b>.</p>

The i element
Represents a span of text in an alternate voice or mood.

<p>The <code>b</code> and <code>i</code> elements
have been legitimized in HTML5. <i>Go figure.</i></p>

<p>I like to work with markup languages because
<strong>they are simple and easy to read</strong>.
They also have that certain <i lang="fr" title="I
don’t know what">je ne sais quoi</i>.</p>


Rede nition
The cite element
The title of a cited work (e.g. a book, magazine, or journal).

<p>In <cite>Web Form Design</cite>, Luke Wroblewski draws on
original research, his considerable experience at Yahoo! and eBay,
and the perspectives of many of the field’s leading designers to
show you everything you need to know about designing effective
and engaging Web forms.</p>


Rede nition
The small element
Represents so-called “ ne print”
(e.g. disclaimers, caveats, etc.).


Rede nition
The hr element
Represents a paragraph-level thematic break.


Expansion 9+ 4+ 6+ 5+ 11.1+

<time>October 25, 2010 8:11 PM</time>


Expansion 9+ 4+ 6+ 5+ 11.1+

<time datetime="2010-10-25T20:11:00-05:00">
October 25, 2010 8:11 PM</time>


Expansion 9+ 4+ 6+ 5+ 11.1+

<time datetime="2010-10-25T20:11:00-05:00"
pubdate="pubdate">October 25, 2010 8:11 PM</time>


Expansion 9+ 4+ 6+ 5+ 11.1+

<ol id="search-results">
<li>
<h3><a href="...">Web Upgrade <mark>HTML5</mark>
May Weaken Privacy</a></h3>
<p>The new language, <mark>HTML5</mark>, could give
marketers access to many more details about users'
online activities.</p>
</li>
</ol>


Expansion 6+ soon

<details>
<summary>This is the visible description</summary>
<p>This content would be hidden by default.</p>
</details>

Expansion 9+ 4+ 6+ 5+ 11.1+

<figure id="fig-1">
<img src="photo.jpeg" alt=""/>
<figcaption>Photo of Albert Einstein</figcaption>
</figure>

<figure id="fig-2">
<table>
<caption>2011 Forecast Earnings</caption>

</table>
</figure>

Forms
10+ ~4+ ~4+ ~4+ ~9+


Forms

<input type="email" …/> <input type="url" …/>


Forms
<input type="date" name="dob"/>


Forms
<input type="number" name="foo"/>

<input type="range" min="1" max="11" step=”1” name="foo"/>


Forms
<input type="color" name="foo"/>

#ff0000


Forms
<input type="text"
pattern="d{6}w{3}"
placeholder="6 digits followed by 3 letters"
.../>


Forms
<input type="text"
autocomplete
autofocus
form=”contact-form”
required
.../>

Forms
<input type="text" list="countries" name="country"/>
<datalist id="countries">
<option>Afghanistan</option>
<option>Åland Islands</option>

</datalist>

Accessibility
8+ 3+ ~4+ ~4+ ~9.5+


What is it?


What is it?

<button>Tweet</button>

<a class=”button”>Tweet</a>


What is it?

<button>Search Mail</button>

<div>Search Mail</div>


ARIA maps the OS to the web

All the web’s a play…
<section id="main" role="main">

</section>


Semantic comparison
Ad-hoc ARIA Role HTML5

#header, #top banner header (kind of)

#main, #content main none

#extra, .sidebar complementary, note aside

#footer, #bottom contentinfo footer

#nav navigation nav

.hentry article article


These are the droids you seek
<span role="button">OK</span>

<div role="alert">
<p>Something went wrong.</p>
</div>

<div role="alertdialog">
<p>Something went wrong.</p>
<img src="x.png" alt="dismiss" role="button" />
</div>


What is it?

<a role=”button”>Tweet</a>
class=”button”>Tweet</a>


What is it?

<a role=”button”>Tweet</a>


102


103


What’s happening?

B B
(off) (on)

<span>
<img src="bold-off.png" alt="bold" />
</span>
<span>
<img src="bold-on.png" alt="bold" />
</span>


What’s happening?

B B
(off) (on)

<span>
<img src="bold-off.png" alt="not bold" />
</span>
<span>
</span>


What’s happening?

B B
(off) (on)

<span role="button" aria-pressed="false">
<img src="bold-off.png" alt="not bold" />
</span>
<span role="button" aria-pressed="true">
</span>


Hey! Over here!


Hey! Over here!

<input class="tweet-counter" value="140" disabled="disabled">


Hey! Over here!

<span id="chars_left_notice" class="numeric">
<strong id="status-field-char-counter"
class="char-counter">140</strong>
</span>


Hey! Over here!

<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>

.hidden {
position: absolute;
left: −999em;
}


Hey! Over here!

<span class="tweet-counter">maximum of 140 characters</span>

<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>


Hey! Over here!

<span aria-live="polite" aria-atomic="true"
class="tweet-counter">140<b class="hidden">
characters remaining</b></span>


Microdata
<img src="nasty.png" data-nsfw="true"/>


Microdata
<img src="low-res-photo.png" data-hi-res="high-res-photo.png"/>


Microdata
<section id="comments">
<a id="comment-loader"
data-replace="/comments-only-for-url-title/"
href="/article-with-comments">
View comments on this entry and add your own
</a>
</section>


Microdata
(function( $ ){
$.fn.ajaxInclude = function(){
return this.each(function(){
var $el = $( this ),
target = $el.data( 'target' ),
$targetEl = target && $( target ) || $el,
methods = [ 'append', 'replace', 'before', 'after' ],
ml = methods.length,
method, url;
while ( ml-- ) {
method = methods[ ml ];
if ( $el.is( '[data-' + method + ']' ) ) {
url = $el.data( method ); break;
}
}
if ( method == 'replace' ){ method += 'With'; }
if ( url && method ) {
$.get( url, function( data ){
$el.trigger( 'ajaxInclude', [$targetEl, data] );
$targetEl[ method ]( data );
});
}
});
};
})( jQuery );


Audio
<audio src="my.oga" controls="controls"></audio>


Audio
Browser .aac .mp3 .oga .wav

Chrome 6+ YES YES YES NO

Firefox 3.6+ NO NO YES YES

Internet Explorer 9+ YES YES NO YES

Opera 10.5+ NO NO YES YES

Safari 5+ YES YES NO YES

Audio
<audio controls="controls">
<source src="my.mp3"/>
<source src="my.oga"/>

</audio>

Audio
<audio controls="controls" autobuffer="autobuffer"
preload="auto">

</audio>


Audio
preload="auto">
<ul>
<li><a href="my.mp3">Download MP3</a></li>
<li><a href="my.oga">Download Ogg</a></li>
</ul>
</audio>

Audio
preload="auto">
<object …>

<ul>
<li><a href="my.mp3">Download MP3</a></li>
<li><a href="my.oga">Download Ogg</a></li>
</ul>
</object>
</audio>


Audio
$('audio').each(function(){
var $audio = $(this), media = {}, formats = [];
$audio.find('source').each(function(){
var src = $(this).attr('src'),
ext = src.split('.').pop();
media[ext] = src;
formats.push(ext);
});
$audio.jPlayer({
swfPath: '/vendors/jPlayer',
ready: function(){
$audio.jPlayer('setMedia', media);
},
supplied: formats.join(', ')
});
});
Using jQuery & jPlayer


Audio
$('audio').each(function(){
var audio = this,
$button = $('<button>Play</button>')
.click(function(){
audio.play();
});
$(this)
.removeAttr('controls')
.after($button);
});
Using jQuery


Video
<video src="my.ogv" controls="controls"></video>


Video
Video le = container le (like ZIP)
๏ 1 video track
๏ 1 (or more) audio tracks
๏ metadata

๏ subtitle/caption tracks (optional)

141


Video formats
๏ Flash Video (. v)
Prior to 2008, the only video format supported in Adobe Flash.
๏ MPEG 4 (.m4v or .mp4)
Based on QuickTime; iTunes uses this format.
๏ Ogg (.ogv)
Open source container format.

๏ WebM (.webm)
New format announced in May 2010.

142


Video codecs
๏ H.264
Used primarily in MPEG 4. Only video codec natively supported on iOS.
Patented.
๏ Theora
Used primarily in Ogg. Royalty free. Supported in Firefox 3.5+ (in Ogg).
๏ VP8
Used primarily in WebM. Owned by Google, but licensed royalty-free.

143


Audio codecs
๏ MP3
Nearly universal in usage, but was part of FLV. Patented.
๏ AAC (Advanced Audio Coding)
Used primarily in MP4. Patented.
๏ Vorbis
Used in Ogg audio & video as well as WebM. Royalty-free.

144


Video
Browser .m4v .ogv .webm
(AAC + H.264) (Vorbis + Theora) (Vorbis + VP8)

Chrome 4-16 4+ 6+

Firefox NO 3.5+ 4+

Internet Explorer 9+ NO MAYBE

Opera NO 10.5+ 10.6+

Safari 3.2+ MAYBE MAYBE


No MIME, no service
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Video
<video controls="controls" width="640" height="480">
<source src="my.m4v"/>
<source src="my.webm"/>
<source src="my.ogv"/>

</video>

Video
<video controls="controls" width="640" height="480"
poster="my.png">
<source src="my.m4v"/>
<source src="my.webm"/>
<source src="my.ogv"/>

</video>

Video
<video controls="controls" width="640" height="480"
poster="my.png">
<source src="my.m4v"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="my.webm"
type='video/webm; codecs="vp8, vorbis"'/>
<source src="my.ogv"
type='video/ogg; codecs="theora, vorbis"'/>

</video>

Note: The MPEG 4 codec will depend on the encoding “profiles” you use.


Video
<video width="600" height="400" poster="/r/2-5.png"
controls="controls" preload="none">
<source src="/r/2-5.m4v" type="video/mp4"/>
<source src="/r/2-5.webm" type="video/webm"/>
<source src="/r/2-5.ogv" type="video/ogg"/>
<img src="/r/2-5.png" width="600" height="400" alt=""/>
<ul>
<li><a href="/r/2-5.m4v">Download as video/mp4</a></li>
<li><a href="/r/2-5.webm">Download as video/webm</a></li>
<li><a href="/r/2-5.ogv">Download as video/ogg</a></li>
</ul>
</video>

Video
<video width="600" height="400" poster="/r/2-5.png"
controls="controls" preload="none">
<source src="/r/2-5.m4v" type="video/mp4"/>
<source src="/r/2-5.webm" type="video/webm"/>
<source src="/r/2-5.ogv" type="video/ogg"/>
<object width="600" height="400"
type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf"/>
<param name="allowfullscreen" value="true"/>
<param name="flashvars" value='config={"clip": {"url":
"/r/2-5.m4v", "autoPlay":false,
"autoBuffering":true}}'/>
<img src="/r/2-5.png" width="600" height="400" alt=""/>
<ul></ul>
</object>
</video>


Tools

RoadMovie
Firefogg


RoadMovie


Subtitle formats
๏ SubRip (.srt)
๏ SubViewer (.sub)
๏ SubStation Alpha (.ssa/.ass)
๏ MicroDVD

157


Subtitle formats
๏ SubRip (.srt)

1
00:01:31,041 --> 00:01:32,000
Hello?

2
00:02:10,164 --> 00:02:12,082
Good morning, is your mother in?

158


Subtitle formats
๏ SubViewer (.sub)

00:01:31.04,00:01:32.00
Hello?

00:02:10.16,00:02:12.08
Good morning, is your mother in?

159


FireFogg


Services

http://www.annodex.net/~silvia/itext/elephant_no_skin_v2.html


localStorage
if ( window.localStorage )
{
// Sweet!
}


localStorage
{
var cache = window.localStorage;
cache.setItem( 'test', 'I am storing nuts for the winter.' );
}


localStorage


localStorage
{
console.log( cache.getItem('test') );
}


localStorage
{
cache.clear();
}


localStorage
๏ is restricted by domain
๏ persists until deleted
(programmatically or by the user)

๏ is limited in size (usually 5MB)
๏ is (currently) limited to strings

175


sessionStorage
๏ is like localStorage
๏ disappears when the browser is closed

176


localStorage


177


Cue the sad trombone
{
var
cache = window.localStorage,
obj = {
one: 1,
two: 2
};
cache.setItem( 'nums', obj );
console.log( cache.getItem( 'nums' ) );
}


Huzzah!
{
var
cache = window.localStorage,
obj = {
one: 1,
two: 2
};
cache.setItem( 'nums', JSON.stringify( obj ) );
console.log( JSON.parse( cache.getItem( 'nums' ) ) );
}


localStorage

๏ mutable

180


Yikes!
window.localStorage.setItem( ‘important’, ‘My locker combo is…’ );

// …

window.localStorage.setItem( ‘test’, ‘Just playing around’ );

// …

window.localStorage.clear();


Play nicely in the sandbox
// create a Squirrel instance with your unique key
var $S = new Squirrel( 'scale-song' );

// write a value to the cache
$S.write( 'doe', 'ray' );

// read it back
$S.read( 'doe' ); // 'ray'

// write a value to a sub-cache
$S.write( 'song', 'doe', 'a dear, a female dear' );

// read back the original value

// read back the sub-cached value
$S.read( 'song', 'doe' ); // 'a dear, a female dear'
Using Squirrel.js (http://github.com/easy-designs/Squirrel.js)


// removing a single property from the sub-cache
$S.remove( 'song', 'doe' );

// try to read the sub-cached value
$S.read( 'song', 'doe' ); // null

// read the root value


// add some more content to the sub-cache
$S.write( 'song', 'ray', 'a drop of golden sun' );

// clear the whole sub-cache
$S.clear( 'song' );

// check that it's been cleared
$S.read( 'song', 'ray' ); // null

// check that the root value's still intact


// remove a property form the main cache
$S.remove( 'doe' );

// check it's value
$S.read( 'doe' ); // null

// write a bit more data in the root and in a sub-cache
$S.write( 'doe', 'ray' );
$S.write( 'song', 'ray', 'a drop of golden sun' );

// clear the whole cache
$S.clear();

// check it's all gone
$S.read( 'song', 'ray' ); // null
$S.read( 'doe' ); // null


indexedDB support
if ( “indexedDB” in window ) {
// Spec is final & implemented!
}
else if ( “mozIndexedDB” in window ) {
// Mozilla is experimenting
}
else if ( “msIndexedDB” in window ) {
// Microsoft is experimenting
}
else if ( “webkitIndexedDB” in window ) {
// Chrome is experimenting
}
else {
// no dice
}


indexedDB

Kids Candy

Candy Sales


indexedDB
var request = window.indexedDB.open(
"CandyDB", "My candy store database"
);


indexedDB: initialization
request.onsuccess = function(event) {
var db = event.result;
if ( db.version != "1" )
{
// Initialize database
var createdObjectStoreCount = 0,
objectStores = [ { name: "kids", keyPath: "id", autoIncrement: true },
{ name: "candy", keyPath: "id", autoIncrement: true },
{ name: "candySales", keyPath: "", autoIncrement: true } ],
len = objectStores.length, params;

while ( len-- ) {
var params = objectStores[len];
request = db.createObjectStore(
params.name, params.keyPath, params.autoIncrement
);
request.onsuccess = objectStoreCreated;
}
}
else {
// User has been here before, no initialization required.
loadData(db);
}
};


indexedDB: initialization
function objectStoreCreated(event) {
if ( ++createdObjectStoreCount == objectStores.length )
{
db.setVersion("1").onsuccess = function(event) {
loadData(db);
};
}
}


indexedDB: create
var kids = [ { name: "Anna" }, { name: "Betty" },
{ name: "Christine" } ];

var request = window.indexedDB.open(
"CandyDB", "My candy store database"
);
request.onsuccess = function(e) {
var objectStore = e.result.objectStore("kids"),
var i=0, len=kids.length;
while ( i < len ) {
var kid = kids[i++];
objectStore.add(kid).onsuccess = function(e) {
console.log( "Saved record for " + kid.name +
" with id " + e.result );
};
}
};


indexedDB: read
request.onsuccess = function(e) {
// Enumerate the entire object store.
request = e.result.objectStore("kids").openCursor();
request.onsuccess = function( event )
{
var cursor = event.result;
// If cursor is null … done
if (!cursor) { return; }
console.log( cursor.value.name );
cursor.continue();
};
};


indexedDB: read w/ join
var candyEaters = [];
request.onsuccess = function(event) {
var db = event.result,
transaction = db.transaction(["kids", "candySales"]);
transaction.oncomplete = function(){ console.log(candyEaters); },
kidCursor, saleCursor, salesLoaded=false, count;

var kidsStore = transaction.objectStore("kids");
kidsStore.openCursor().onsuccess = function(event) {
kidCursor = event.result;
count = 0;
attemptWalk();
}

var salesStore = transaction.objectStore("candySales");
var kidIndex = salesStore.index("kidId");
kidIndex.openObjectCursor().onsuccess = function(event) {
saleCursor = event.result;
salesLoaded = true;
attemptWalk();
}

//…


indexedDB: read w/ join
// …

function attemptWalk() {
if (!kidCursor || !salesLoaded) return;

if ( saleCursor && kidCursor.value.id == saleCursor.kidId )
{
count++;
saleCursor.continue();
}
else
{
candyEaters.push({ name: kidCursor.value.name, count: count });
kidCursor.continue();
}
}

} // end request.onsuccess


DB Alternatives
๏ LocalStorageDB
https://github.com/easy-designs/LocalStorageDB.js
๏ localStorageDB
https://github.com/knadh/localStorageDB

198


LocalStorageDB example
// init
var DB = new LocalStorageDB('my_first_database');

// Table Creation
DB.CREATE( 'my_first_table', { id: 0, foo: 'bar', test: 'ing' } );

// Insert
DB.INSERT_INTO( 'my_first_table', [{test:'ed'},{foo:'bat'}] );

// Read
DB.SELECT( 'my_first_table' ); // [{id:0,foo:'bar',test:'ed'}, {id:1,foo:'bat',test:'ing'}]
DB.SELECT( 'my_first_table', {foo:'bar'} ); // [{id:0,foo:'bar',test:'ed'}]

// Update
DB.UPDATE( 'my_first_table', {test:'nada'}, {foo:'bar'} );
DB.SELECT( 'my_first_table', {foo:'bar'} ); // [{id:0,foo:'bar',test:'nada'}]

// Delete
DB.DELETE( 'my_first_table', {foo:'bar'} );
DB.SELECT( 'my_first_table', {foo:'bar'} ); // []


LocalStorageDB example
this.searchArticles = function( q, callback ) {
var cat_ids = [], categories = [],
articles = _DB.SELECT( 'articles', function( row ){
var $div = $('<div/>').html( row.html );
if ( row.title.indexOf( q ) > -1 ||
$div.text().indexOf( q ) > -1 ) {
row.type = 'article';
cat_ids.push( row.category_id );
return true;
}
return false;
}).LIMIT(6),
i = articles.length;
_DB.SELECT( 'categories', function( row ){
var i = $.inArray( row.id, cat_ids );
if ( i > -1 ) {
categories[cat_ids[i]] = row.slug;
}
return false;
});
while ( i-- ) {
articles[i].category_slug = categories[articles[i].category_id];
}
if ( callback instanceof Function ) { callback( articles ); }
};


localStorageDB example
// Initialise. If the database doesn't exist, it is created
var lib = new localStorageDB( "library" );

// Check if the database was just created. Useful for initial database setup
if ( lib.isNew() ) {

// create the "books" table
lib.createTable( "books", ["id", "title", "author", "year", "copies"] );

// insert some data
lib.insert( "books",
{ id: "B001", title: "Phantoms in the brain",
author: "Ramachandran", year: 1999, copies: 10 } );

// commit the database to localStorage
// all create/drop/insert/update/delete operations should be committed
lib.commit();

}

Geolocation
9+ 3.5+ 5+ 5+ 10.6+


Geolocation
if ( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition(
function(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
},
function(error){
alert('ouch');
}
);
}


Geolocation
function getPlaceFromFlickr( lat, lon, callback )
{
// the YQL statement
var yql = 'select * from flickr.places where lat=' +
lat + ' and lon=' + lon;

// assembling the YQL webservice API
var url = 'http://query.yahooapis.com/v1/public/yql?q=' +
encodeURIComponent(yql) +
'&format=json&diagnostics=false&callback=' + callback;

// create a new script node and add it to the document
var s = document.createElement('script');
s.setAttribute( 'src', url );
document.getElementsByTagName('head')[0].appendChild(s);
};

// …


Geolocation
// callback in case there is a place found
function output(o){
if ( typeof(o.query.results.places.place) != 'undefined' )
{
console.log( o.query.results.places.place.name );
}
}


Geolocation
if ( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition(
function(position){
getPlaceFromFlickr(
position.coords.latitude,
position.coords.longitude,
'output'
);
},
function(error){
alert('ouch');
}
);
}

Oﬄine
10+ 3.5+ 4+ 4+ 10.6+


Oﬄine
<html manifest="manifest.appcache">


Oﬄine
CACHE MANIFEST
# Cache manifest version 1.0
# Change the version number to trigger an update

CACHE:
index.php
c/main.css
j/main.js
i/logo.png

# when offline, change content
FALLBACK:
/ /offline.html

# never cached
NETWORK:
signup.html
manifest.appcache served with MIME of text/cache-manifest


Oﬄine
navigator.onLine // true or false


Limits
๏ Safari (desktop): ∞

๏ Safari (iOS): 10MB

๏ Chrome: 5MB*

๏ Android: ∞

๏ Firefox: ∞**

๏ Opera: 50MB***

* Installed “Apps” get more
** Permission required
*** User-adjustable

211


Parsing errors

p{
color: red;
}


Parsing errors

p{
color: red;
font-weight: bold;
}


Parsing errors
p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}


Parsing errors
html[lang] p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}


Parsing errors
@-moz-document url-prefix() {
html[lang] p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}
}

#intro {
/* Basic Layout */
}

/* ... */

body[id=css-zen-garden] #intro {
/* Advanced Layout */
}

#intro {
/* Basic Layout */
}

/* ... */

[foo], #intro {
/* Advanced Layout */
}


Parsing errors
@import 'not-for-IE7-or-below.css' screen;

@media screen, print, refrigerator {
/* IE will get these rules */
}


Organization

design


Organization


Organization

type color

layout


Organization
/* =Typography */
img {
display: block;
}

/* =Layout */
@media screen {
.frame .inner {
border: 10px solid;
}
}

/* =Color */
.frame .inner {
background-color: rgb(227, 222, 215);
border-color: rgb(227, 222, 215);
}


Organization

type.css

layout.css

color.css


Organization

type.css

layout.css main.css

color.css


Organization
{embed="styles/typography"}

@media screen {
{embed="styles/layout-screen"}
}

{embed="styles/color"}


Organization
{embed="styles/reset"}

{embed="styles/typography"}

@media screen {
{embed="styles/layout-screen"}
}

@media print {
{embed="styles/layout-print"}
}

{embed="styles/color"}

{embed="styles/effects"}

Monkey-patching
<link rel="stylesheet" href="main.css"/>


Monkey-patching
@-moz-document url-prefix() {

/* GENERATED CONTENT - FF3 doesn't allow positioning */
#extra-mile:before {
content: '';
}
#extra-mile:first-of-type:before {
content: url(extra-mile-sign.png);
}

}

Selectors
9+ 3.5+ 4+ 3.2+ 9.5+


Selectors: attribute
/* Basic */
[lang] { outline: 1px solid red; }

/* Value */
[title=Search] { outline: 1px solid blue; }

/* Space-separated */
[title ~=go] { outline: 1px solid green; }

/* starts hyphenated */
[id|=fb] { height:200px; background: red; }


Selectors: attribute
/* Starts */
[title^=Click] { outline: 10px solid purple; }

/* Ends */
[title$=article] { outline: 1px solid orange; }

/* Contains */
[title*=g] { color: red; }


Selectors: pseudo class
/* First or last */
p:first-child
p:last-child

/* First or last of a specific type */
p:first-of-type
p:last-of-type

/* One is the loneliest number */
p:only-child
p:only-of-type

/* Nature abhors a vacuum */
p:empty


/* Specific elements */
p:nth-child(1)
p:nth-child(5)

/* All paragraphs */
p:nth-child(1n+0)
p:nth-child(n+0)
p:nth-child(n)
/* Same as a simple element selector, but more specific */


/* Stripey! */
:nth-child(odd) { background: white; }
:nth-child(even) { background: grey; }

/* Stripey! */
:nth-child(2n+1) { background: white; }
:nth-child(2n+0) { background: grey; }

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

/* 9th, 19th, 29th… */
p:nth-child(10n-1) { color: navy; }


/* Only paragraph elements considered */
p:nth-of-type(odd) { background: white; }
p:nth-of-type(even) { background: grey; }

/* Every paragraph but first and last */
p:nth-of-type(n+2):nth-last-of-type(n+2) { background: white; }


/* Negatory good buddy */
p:not(:empty) { outline: 10px solid red; }
p:not(:visited) { color: blue; }


:enabled
:disabled

:checked

:required
:optional

:valid
:invalid

:in-range
:out-of-range

:read-only
:read-write


Selectors: pseudo element
/* Dynamics */
p::first-letter {
font-size: 2.8em;
float: left;
line-height: 1;
margin-right: .1em;
}
p::first-line { font-weight: bold; }


Selectors: pseudo element
/* Generated content */
p::before { content: ‘hello from CSS’; }
p::after { content: ‘goodbye from CSS’; }

a::after { content: url(http://graphics8.nytimes.com/images/
multimedia/icons/document_icon.gif); }

Media Queries
9+ 3.5+ 4+ 4+ 9.5+


@media blocks
@media screen {
/* Styles for screen media only */
}


@media blocks+
@media screen and (max-width:450px) {
/* Styles for screen media when browser
is 450px wide or below */
}


Getting granular
@media
screen and (min-device-width:1024px)
and (max-width:989px),
screen and (max-device-width:480px),
screen and (max-device-width:480px)
and (orientation:landscape),
screen and (min-device-width:481px)
and (orientation:portrait) {
/* Layout for narrower desktop (below 990px)
or
iPhone running iOS 3 (or equivalent)
or
iPhone running iOS 4 (or equivalent) in “landscape” view
or
iPad (or equivalent) in “portrait” view */
}


Mobile First w/ media queries
/* Universal Layout */

@media screen {
/* Styles for all screens */
}

@media screen and (min-width:481px) {
/* Styles for all screens 480px+ width */
}

/* Styles for all screens 754px+ width */
}


Patching IE8-
/* styles for 480px and up go here */
}
main.css

<link rel=”stylesheet” href=”main.css”/>
<script src=”respond.min.js”></script>
index.html

https://github.com/scottjehl/Respond

Colors
9+ 3+ 4+ 3.1+ 10+


Colors: keywords
p {
color: red;
}


Colors: hexadecimal
p {
color: #f00;
}


Colors: RGB
p {
color: rgb( 255, 0, 0 );
}


Colors: HSL
p {
color: #f00;
color: hsl( 0, 100%, 50% );
}


Colors: HSLa
p {
color: #F99;
color: hsla( 0, 100%, 50%, .5 );
}


Colors: RGBa
p {
color: #F99;
color: rgba( 255, 0, 0, .5 );
}

Backgrounds
9+ 4+ 4+ 5+ 10.5+


Backgrounds 9+ 3.6+ 4+ 5+ 10+

p {
background: url(first.png),
url(second.png),
url(third.png);
background-position: top left;
background-repeat: no-repeat;
}


Backgrounds 9+ 3.6+ 4+ 5+ 10+

p {
background: url(first.png) right bottom,
url(second.png) center center,
#fff url(third.png) bottom right;
background-repeat: no-repeat;
}


Backgrounds 9+ 4+ 4+ 5+ 11+

p {
background: red;
background-clip: border-box; /* or padding|content-box */
border: 10px dashed;
padding: 10px;
}

FF 1-3.6 requires -moz- and doesn’t accept the “-box” portion



p {
background: url(image-1.png), red url(image-2.png);
background-clip: border-box, content-box;
padding: 10px;
}



p {
background: url(image-1.png);
background-origin: border-box; /* or padding|content-box */
padding: 10px;
}

FF 3.6 requires -moz- and doesn’t accept the “-box” portion


Backgrounds 9+ 4+ 4+ 5+ 10.5+

p {
background: url(image-1.png), url(image-2.png);
background-size: 100px 50px, auto;
padding: 10px;
}

FF 3.6 requires -moz-


Backgrounds 9+ 4+ 4+ 5+ 10.5+

p {
background-size: cover;
padding: 10px;
}



Backgrounds 9+ 4+ 4+ 5+ 10.5+

p {
background-size: contain;
padding: 10px;
}



Backgrounds 9+ 10.5+

p {
background-repeat: space;
padding: 10px;
}



Backgrounds 9+ 10.5+

p {
background-repeat: round;
padding: 10px;
}


Gradients
10+ 3.6+ 4+ 4+ 11+


Gradients
p {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient( top, #1e5799 0%, #2989d8 50%,
#207cca 51%, #7db9e8 100% ); /* FF3.6+ */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,#1e5799),
color-stop(50%,#2989d8), color-stop(51%,#207cca),
color-stop(100%,#7db9e8) ); /* Chrome,Safari4+ */
background: -webkit-linear-gradient( top, #1e5799 0%, #2989d8 50%, #207cca 51%,
#7db9e8 100% ); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient( top, #1e5799 0%, #2989d8 50%, #207cca 51%,
#7db9e8 100% ); /* Opera 11.10+ */
background: -ms-linear-gradient( top, #1e5799 0%,#2989d8 50%,#207cca 51%,
#7db9e8 100%); /* IE10+ */
background: linear-gradient( top, #1e5799 0%, #2989d8 50%, #207cca 51%,
#7db9e8 100% ); /* W3C */
}

http://www.colorzilla.com/gradient-editor/

Box Shadow
9+ ~3.5+ ~4+ ~3.1+ 10.5+


Box shadow
p {
box-shadow: -5px /* Horizontal offset */
5px /* Vertical offset */
15px /* Blur radius (optional) */
7px /* Spread distance (optional) */
#fff; /* Color */
}


Box shadow
p {
box-shadow: inset /* Horizontal offset (optional) */
-5px /* Horizontal offset */
7px /* Spread distance (optional) */
#000; /* Color */
}

http://webstandardssherpa.com/


Box shadow
p {
box-shadow: -5px 5px 15px 7px #fff,
5px -5px 15px 7px #f00;
}

Text Shadow
10+ ~3.5+ ~4+ ~4+ 9.5+


Text shadow
p {
text-shadow: -5px /* Horizontal offset */
#fff; /* Color */
}


Text shadow
p {
text-shadow: 5px 0px 0px #F5602A,
10px 0px 0px #EDB037,
15px 0px 0px #EBF21F,
20px 0px 0px #71F723,
25px 0px 0px #20EEF5,
30px 0px 0px #3019FF,
35px 0px 0px #DB20E8;
}

Border Images
10? ~3.5+ ~4+ ~3.21+ ~10.5+


Border images
p {
border-image: url(border.png) /* Horizontal offset */
27 / /* Vertical offset */
round /* Blur radius (optional) */
stretch; /* Color */
}

Blah blah blah blah. Blah
blah blah blah. Blah blah
blah blah blah.

http://border-image.com/

Box Sizing
8+ ~2+ ~4+ ~3.1+ ~9.5+


Box sizing
p.one {
box-sizing: content-box; /* Standards Mode */
}

p.two {
box-sizing: border-box; /* Like Quirks Mode */
}

Content Box

5px

Border Box

200px

Transitions
~10+ ~4+ ~4+ ~3.1+ ~10.5+


Transitions
a {
transition: color /* Property */
2s /* Duration */
linear /* Function (optional) */
0.5s; /* Delay (optional) */
}


Transitions
a {
transition-property: color,
font-size;
transition-duration: .5s;
transition-timing-function: ease-in-out,
linear;
}

2D Transformations
~9+ ~3.5+ ~4+ ~3.1+ ~10.5+


Transformations
p {
transform: rotate(45deg);
transform-origin: 50% 50%
}

t
es
at
is
is
Th


Transformations
p {
transform: rotate(15deg)
scale(.5)
translateX(20px)
translateY(-20px);
}


Transformation functions
๏ scale, scaleX, scaleY
๏ skew, skewX, skewY
๏ translate, translateX, translateY

288

Animations
~10+ ~5+ ~4+ ~4+ 12?


Animations
@keyframes thisIsMyAnimation {
0% { top: 0px; }
33% {
top: 50px;
animation-timing-function: ease-out
}
100% { top: 100px; left: 10px; }
}

p {
animation: thisIsMyAnimation /* Animation Function */
4s /* Duration */
linear /* Timing Function */
1.5s /* Delay */
infinite /* Iterations */
alternate /* Reverse? */
none; /* Fill mode */
}


Animations
p {
animation: grow 4s linear,
shimmy 2s ease-in-out;
}

HTML5 & CSS3 Workshop [FoWD NYC 2011]

More Related Content

What's hot (19)

Similar to HTML5 & CSS3 Workshop [FoWD NYC 2011] (20)

More from Aaron Gustafson (20)

Recently uploaded (20)

HTML5 & CSS3 Workshop [FoWD NYC 2011]