HTML5 and CSS3 Techniques You Can Use Today

HTML5 and CSS3 Techniques You Can Use Today

Todd AnglinChief EvangelistTelerik

DEV334

Introductions

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

@toddanglinTelerikWatch.com

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

Gradients

Emerging CSS standardBut 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?

Related Content

(DEV348) Debugging Pesky HTML5 Websites with F12 in Windows Internet Explorer 9(DEV347) Using JavaScript to Build HTML5 Applications

Web Platforms booth in Microsoft TLC

WebPlaforms TLCTelerik Booth in Expo Hall

Web Track Resources

http://www.asp.net/http://www.silverlight.net/http://www.microsoft.com/web/gallery/http://www.iis.net/http://weblogs.asp.net/Scottgu/http://www.hanselman.com/blog/

http://www.iis.net/

http://www.iis.net/

http://www.iis.net/

http://www.iis.net/

http://weblogs.asp.net/Scottgu/

http://www.hanselman.com/blog/

Resources

www.microsoft.com/teched

Sessions On-Demand & Community Microsoft Certification & Training Resources

Resources for IT Professionals Resources for Developers

www.microsoft.com/learning

http://microsoft.com/technet http://microsoft.com/msdn

Learning

http://northamerica.msteched.com

Connect. Share. Discuss.

http://www.microsoft.com/teched

http://www.microsoft.com/learning

http://microsoft.com/technet

http://microsoft.com/msdn

http://northamerica.msteched.com/

Complete an evaluation on CommNet and enter to win!

Scan the Tag to evaluate this session now on myTech•Ed Mobile

Documents

HTML5 and CSS3 Techniques You Can Use Today