HTML5 and CSS3 Techniques You Can Use Today

HTML5 and CSS3 Techniques You Can Use TodayDEV334

Todd AnglinChief EvangelistTelerik

Introductions

Todd AnglinChief Evangelist, TelerikMicrosoft MVPASP InsiderPresident NHDNUG & O’Reilly Author

@toddanglin

TelerikWatch.com

Agile Planning

Development Tools

Testing

Session Road Map

Understanding the Evolution

HTML5 Techniques

CSS3 Techniques

Goal: Leave with at least 1 HTML5/CSS3 technique you can use today

“While it continues to serve as a rough guide to many of the core features of HTML, it does not provide enough information to build implementations that interoperate with each other and, more importantly, with a critical mass of deployed content.”

-W3C on HTML4

HTML4 = Rough Guide

Unpredictable Browser Support

How is the web evolving?

<HTML>CSS:3;

EMCAScript();{ }“HTML5”

“Living Standard”

WebSockets FileAPI WebGL

HTML5 FormsGeolocation

Offline

Canvas Video

Audio

Canvas

Video

Geolocation

Semantic Tags

SVGWHATWG | W3C | IETF

Sta

ble Canvas | Local Storage | Microdata |

Document Editing | Geolocation | Semantic Tags | Video/Audio | Selectors

In P

rogr

ess

WebGL | WebSockets | File API | Drag-Drop API | IndexDB | Offline API | Web Workers | HTML5 Forms

IE9 offers support for the most relevant, real-world web patterns that developers are using today as well as the HTML5 patterns we expect to become more mainstream.”

“

-Dean HachamovitchCorporate VP, IE

html5labs.interoperabilitybridges.com

ie.microsoft.com/testdrive

+Platform Previews

WD LC CR PR REC

CSS 2.1SelectorsCSS Color CSS 2

Backgrounds &BordersMedia QueriesMulti-column

25+ DraftsTransitionsTransformationsAnimationsGradientsCSS3 Text

-moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px;border-radius: 5px;

-moz-box-shadow: 2px 2px 2px #333;-webkit-box-shadow: 2px 2px 2px #333;box-shadow: 2px 2px 2px #333;

-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;

Browser Prefixes

-webkit-moz-o-ms

“standard” way browsers implement experimental

features

WD LC CR PR RE

What is usable today?

X X X X X

X X X

X X

X X X

X X

Adoption Strategies

Lowest Common DominatorOnly use features natively available in all target browsers

X X X X X

X X X

X X

X X X

X X

Adoption Strategies

Polyfill EnrichedOnly use features either natively available OR available via JavaScript polyfill

X X

polyfill(n) poly • fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support

X X X X X

X X X

X X

X X X

X X

Adoption Strategies

Alternate ExperiencesOnly use features available in target browsers AND design alternate experience for other browsers

X X

X X X

X X

progressiveenhancementgracefuldegradation

[Source: Aaron Olaf, Flickr]

[Source: Mercedes USA, http://mbusa.com/]

X X X X X

X X X

X X

X X X

X X

Adoption Strategies

Vertical TargetCreate experiences targeted at specific browsers (or classes of browsers)

X X

X X X

X X

HTML5 Techniques

You can use today

Enriching VS Experience

http://bit.ly/vsHTML5http://bit.ly/vsSVG

Add IntelliSense & Schema Validation to Visual Studio 2008/2010 (pre SP1) editor

http://bit.ly/vsHTML5

http://bit.ly/vsHTML5

http://bit.ly/vsSVG

http://bit.ly/vsSVG

Older Browsers

Shiv it

• Transparent to users

• Parity

Kill it

• Full stop, force upgrade

Target it

• Down-level experience

Modernizr

Shiv’r + InspectorSimple way to check feature supportConditional JS and CSS

.multiplebgs div p { /* properties for browsers that support multiple backgrounds */}.no-multiplebgs div p { /* optional fallback properties for browsers that don't */}

if (Modernizr.canvas) { //Canvas supported}

if (Modernizer.cssColumns){ //Columns supported}

//Etc...

*Don’t use with IE HTML5shiv. One or the other.

DEMO

Polyfilling & Older Browsers

with Modernizr

Semantic Tags

Tags with meaning<body> <div id=“header”> </div> <div id=“content”> <div id=“nav”></div> </div> <div id=“footer”> </div></body>

<body> <header> </header> <section> <nav></nav> </section> <footer></footer></body>

VS.

Safe to use

today!

*Need polyfill to trigger styling in old IE

Video & Audio

Semantic rich mediaReach more people on more devices

Safe to use

today!

Container

Codec

Silverlight

FlashHTML5

MP4H.264

Geolocation

Usable on modern browsers + mobileRequires plug-in for older browsers

navigator.geolocation.getCurrentPosition(callback);

function callback(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var acc = position.coords.accuracy;}

Safe to use

today!

Local Storage

Usable in modern browsers

sessionStorage.setItem('value', this.value);localStorage.setItem('value', this.value);

sessionStorage.getItem(‘value’);

sessionStorage.clear();localStorage.clear();

sessionStorage = per windowlocalStorage = per browser

5 MB limit

HTML5 Forms

Improved usabilityUneven support across browsers

<form name="f"> <input id="q" autofocus>

 <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Go"></form>

Safe to use

today!

SVG & Canvas

Scalable Vector

GraphicsCanvas

Bitmap-output

Good for animation

JavaScript-based

Vector-output

Good for interaction

XML-based

Safe to use

today!

Canvas for IE6/7/8

Many polyfills for older browsersJavaScript or Flash based

ExCanvas FlashCanvas

Better Perf

CSS3 Techniques

You can use today

CSS3 Selectors

Powerful new selector options

//Alternating Itemsli:nth-child(odd) { color: blue; }li:nth-child(even) { color: green; }li:nth-child(3n) { color: red; } //Every 3rd item

//First/Last Itemsli:first-of-type { color: blue; }li:not(:first-of-type):not(:last-of-type) { color: orange; } //All *but* first/last

//Enabled/Disabledinput:enabled { border: 2px solid green; }input:disabled { background-color: #BBB; }

*Use jQuery to support legacy browsers

CSS3 Color

HSL and RGBSupport for new color models + alpha channels

//RGBbackground:rgb(155,100,100);

//RGBabackground:rgba(153, 134, 117, 0.2);

//HSLbackground:hsl(320,100%,25%);

//HSLabackground:hsla(165, 100%, 50%, 1.0);

Custom Fonts

Biggest Problem?Licensing!

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”);

}

//Usageh3 { font-family: Delicious, sans-serif; }

Web Font Providers

Solve the licensing problemHost the WOFF/TTF/OTF font files Provide easy-to-use code

http://www.fontsquirrel.com/http://webfonts.fonts.comhttp://typekit.com/libraries

http://code.google.com/webfonts

http://www.fontsquirrel.com/

http://webfonts.fonts.com/

http://webfonts.fonts.com/

http://typekit.com/libraries





Borders & Backgrounds

Rounded corners, drop shadows, multi-backgroundsExpect GD for older browsers

//Rounded Corners (Size)border-radius: 5px;

//Drop shadow (hShift vShift Size Color)box-shadow: 2px 2px 5px #333;

//Background controlbackground: url(top.gif) top left no-repeat,url(bottom.gif) bottom left no-repeat;background-size: 150px 50px;

*Use CSS3 PIE to support legacy IE browsers

GradientsEmerging CSS standard

But useful and desirableCan be “shived” to support all browsers

Media Queries

Target styles to specific devices…And features!

/*These two rules do the same thing*/@media all and (min-width:500px) { … } @media (min-width:500px) { … }

/*Multiple conditions*/@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}

Tomorrow Land (aka Mobile)

iOS Android Windows Phone (IE9)

Geolocation

Offline

Local Storage

Video/Audio

Canvas

SVG

WebSQL

Gradients*

CSS3 Animations*

Text Shadows

CSS3 Transforms

which HTML5/CSS3 technique will you try?

[email protected]@toddanglin + @htmlui

Technology

HTML5 and CSS3 Techniques You Can Use Today