html5 and css3 techniques you can use today
DESCRIPTION
DEV334. HTML5 and CSS3 Techniques You Can Use Today. Todd Anglin Chief Evangelist Telerik. Introductions. Todd Anglin Chief Evangelist, Telerik Microsoft MVP ASP Insider President NHDNUG & O’Reilly Author. TelerikWatch.com. @ toddanglin. Session Road Map. - PowerPoint PPT PresentationTRANSCRIPT
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
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>
<!--Technique to support older browsers--> <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
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/
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.
Complete an evaluation on CommNet and enter to win!
Scan the Tag to evaluate this session now on myTech•Ed Mobile