HTML5 & CSS3

A Practical GuideA Practical Guide

HTML5 is more than HTML5HTML5 Spec

CSS3 Spec

Web Fonts

JavaScript to tie it all together

What’s New in HTML5 Spec?Simplified and Loose Syntax

New Elements and Attributes

Embedded Media

Canvas

Offline Storage

Drag and Drop

Geo-Location

What’s New in CSS3 Spec?New Selector

Decorations

New Column Layout

Transformation (Rotate, Resize…etc)

Animation (Fade In/Fade Out)

IN THE REAL WORLDHTML5

Why Use HTML5 Today?Pros

Better semantics

Lean code

Improved user experience

ConsSome work is needed to accommodate older browsers

ApproachesModernizr

Numerous polyfills

Modernizr A minimal JavaScript solution (5k) that detects a browser’s features

html5shivTurns HTML5 structural elements into HTML4 elements for older browsers

<header> becomes <div id=“header”>

Using <video> todayPros

Greater compatibility

Better performance

ConsMore complex preparation

Can be tricky when embedding hosted videos (YouTube, Vimeo, etc.)

Video tag markupVideo for Everybody code by Kroc Camen<video width="480" height="270" controls><source src="mafSept10Welcome.mp4" type="video/mp4" /><source src="mafSept10Welcome.ogv" type="video/ogg" /><object width="480" height="289" type="application/x-shockwave-flash" data="player.swf?&amp;file=mafSept10Welcome.flv”><param name="movie" value="player.swf?&amp;file=mafSept10Welcome.flv&amp" /></object></video>

VideoJSBuilds on VFE

Uses JavaScript for a more consistent experience

Falls back gracefully if JavaScript is disabled

FREE!

See http://videojs.com for details and downloads.

IN THE REAL WORLDCSS3

Why Use CSS3 Today?Pro

Smaller download

Less JavaScript

Better user experience

ConsSome work is needed to accommodate older browsers

Various ApproachesCSS3 + IE Filters

PIE

Selectivzr

Modernizr

eCSStender

CSS3 + IE FiltersPure CSS solution with forksbackground: #1E5799; /* old browsers */background: -moz-linear-gradient(top, #1E5799 0%,

#2989D8 50%, #207cca 51%, #7db9e8 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 ); /* ie */

At a Glance

Selector Decoration File Size Notes

CSS3 + IE Filter No Yes ?

PIEA JavaScript solution that uses IE specific behavior that is applied via HTML Components (HTC).

Limited feature support:border-radius

box-shadow

linear-gradient

HTC file is 11kb.

At a Glance

Selector Decoration File Size Notes

CSS3 + IE Filter No Yes ?

PIE No Limited 11K IE Only

SelectivizrA JavaScript solution that emulates CSS3 pseudo-class and attribute selectors in IE 6-8

At a Glance

Selector Decoration File Size Notes

CSS3 + IE Filter No Yes ?

PIE No Limited 11K IE Only

Selectivzr Yes No 4K IE Only

ModernizrA JavaScript solution that detects user browser’s features

At a Glance

Selector Decoration File Size Notes

CSS3 + IE Filter No Yes N/A

PIE No Limited 11K IE Only

Selectivzr Yes No 4K IE Only

Modernizr No No 5K

eCSStenderA JavaScript solution that dynamically writes CSS to support older browsers.

Core is (20k), Extensions are additional (tiny)files to download. Only download the extensions that you want.

At a Glance

Selector Decoration File Size Notes

CSS3 + IE Filter No Yes N/A Pure CSS

PIE No Limited 11K IE Only

Selectivzr Yes No 4K IE Only

Modernizr No No 5K

eCSStender Yes Limited 20K+

Which Approach To Take?Depends…

How much CSS3 are you leveraging

Download size and performance

Who’s your client

No JS support and fall back strategies

Test, Test, Test!

IN THE REAL WORLD@font-face

Web fontsAllows a page to use fonts not installed on a users computer

@font-face first spec’d in CSS2

Resistance from font designers made it unworkable

Designers and services now working together to make fonts available

When to use web fontsGreat for headlines, pull quotes, etc., especially when limiting font styles to limit file size

Be careful with body copy. Not all fonts are readable at body copy size

Keep in mind that different browsers will render differently, so avoid line-breaks and accommodate re-flow of text

Using web fontsPros

Fewer images = lighter pages

More creative typography

Easier to maintain pages

ConsAdded page size

More “creative” typography

Rendering differences make testing a must

Hosted solutionsTypekit, Monotype, etc.

Low set up difficulty

Excellent compatibility: IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+, Chrome 4+

Great selection, no licensing issues

Javascript file required, dependence on 3rd party

Recurring payments required upper tiers

Serving locallyGood selection from Font Squirrel, League of Moveable Type, etc.

Moderate set up difficulty

Excellent compatibility: IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+, Chrome 4+, iOS

No JavaScript required

Using your own desktop fonts probably violates the license

How to use @font-faceHosted services require a script tag and configuration via their websiteLocal code (generated by Font Squirrel):@font-face {font-family: 'LeagueGothicReg';src: url('League_Gothic-webfont.eot');src: local('☺'),url('League_Gothic-webfont.woff') format('woff'),url('League_Gothic-webfont.ttf') format('truetype'), url('League_Gothic-webfont.svg#webfontOTINA1xY') format('svg');font-weight: normal;font-style: normal;}

Take AwayDon’t be afraid to provide the HTML5 experience today

HTML5

CSS3

Web fonts

JS