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
![Page 1: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/1.jpg)
HTML5 and CSS3 Techniques You Can Use Today
Todd AnglinChief EvangelistTelerik
DEV334
![Page 2: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/2.jpg)
Introductions
Todd AnglinChief Evangelist, TelerikMicrosoft MVPASP InsiderPresident NHDNUG & O’Reilly Author
@toddanglinTelerikWatch.com
![Page 3: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/3.jpg)
Session Road Map
Understanding the Evolution
HTML5 Techniques
CSS3 Techniques
Goal: Leave with at least 1 HTML5/CSS3 technique you can use today
![Page 4: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/4.jpg)
“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
![Page 5: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/5.jpg)
HTML4 = Rough Guide
Unpredictable Browser Support
![Page 6: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/6.jpg)
How is the web evolving?
![Page 7: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/7.jpg)
<HTML>CSS:3;
EMCAScript();{ }“HTML5”
![Page 8: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/8.jpg)
“Living Standard”
WebSockets FileAPI WebGL
HTML5 FormsGeolocation
Offline
Canvas Video
Audio
Canvas
Video
Geolocation
Semantic Tags
SVGWHATWG | W3C | IETF
![Page 9: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/9.jpg)
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
![Page 10: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/10.jpg)
![Page 11: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/11.jpg)
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
![Page 12: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/12.jpg)
html5labs.interoperabilitybridges.com
ie.microsoft.com/testdrive
+Platform Previews
![Page 13: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/13.jpg)
WD LC CR PR REC
CSS 2.1SelectorsCSS Color CSS 2
Backgrounds &BordersMedia QueriesMulti-column
25+ DraftsTransitionsTransformationsAnimationsGradientsCSS3 Text
![Page 14: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/14.jpg)
-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;
![Page 15: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/15.jpg)
Browser Prefixes
-webkit-moz-o-ms
“standard” way browsers implement experimental
features
![Page 16: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/16.jpg)
WD LC CR PR RE
![Page 17: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/17.jpg)
What is usable today?
![Page 18: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/18.jpg)
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
![Page 19: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/19.jpg)
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
![Page 20: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/20.jpg)
polyfill(n) poly • fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support
![Page 21: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/21.jpg)
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
![Page 22: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/22.jpg)
progressiveenhancementgracefuldegradation
![Page 23: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/23.jpg)
[Source: Aaron Olaf, Flickr]
![Page 24: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/24.jpg)
[Source: Mercedes USA, http://mbusa.com/]
![Page 25: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/25.jpg)
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
![Page 26: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/26.jpg)
HTML5 Techniques
You can use today
![Page 27: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/27.jpg)
Enriching VS Experience
http://bit.ly/vsHTML5http://bit.ly/vsSVG
Add IntelliSense & Schema Validation to Visual Studio 2008/2010 (pre SP1) editor
![Page 28: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/28.jpg)
Older Browsers
Shiv it
• Transparent to users
• Parity
Kill it
• Full stop, force upgrade
Target it
• Down-level experience
![Page 29: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/29.jpg)
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.
![Page 30: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/30.jpg)
DEMO
Polyfilling & Older Browsers
with Modernizr
![Page 31: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/31.jpg)
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
![Page 32: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/32.jpg)
Video & Audio
Semantic rich mediaReach more people on more devices
Safe to use today!
Container
Codec
Silverlight
FlashHTML5
MP4H.264
![Page 33: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/33.jpg)
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!
![Page 34: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/34.jpg)
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
![Page 35: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/35.jpg)
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!
![Page 36: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/36.jpg)
SVG & Canvas
Scalable Vector
GraphicsCanvas
Bitmap-output
Good for animation
JavaScript-based
Vector-output
Good for interaction
XML-based
Safe to use today!
![Page 37: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/37.jpg)
Canvas for IE6/7/8
Many polyfills for older browsersJavaScript or Flash based
ExCanvas FlashCanvas
Better Perf
![Page 38: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/38.jpg)
CSS3 Techniques
You can use today
![Page 39: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/39.jpg)
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
![Page 40: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/40.jpg)
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);
![Page 41: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/41.jpg)
Custom Fonts
Biggest Problem?Licensing!
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”);
}
//Usageh3 { font-family: Delicious, sans-serif; }
![Page 42: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/42.jpg)
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
![Page 43: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/43.jpg)
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
![Page 44: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/44.jpg)
Gradients
Emerging CSS standardBut useful and desirableCan be “shived” to support all browsers
![Page 45: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/45.jpg)
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; }}
![Page 46: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/46.jpg)
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
![Page 47: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/47.jpg)
which HTML5/CSS3 technique will you try?
![Page 48: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/48.jpg)
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
![Page 49: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/49.jpg)
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/
![Page 50: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/50.jpg)
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.
![Page 51: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/51.jpg)
Complete an evaluation on CommNet and enter to win!
![Page 52: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/52.jpg)
Scan the Tag to evaluate this session now on myTech•Ed Mobile
![Page 53: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/53.jpg)
![Page 54: HTML5 and CSS3 Techniques You Can Use Today](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816241550346895dd27b36/html5/thumbnails/54.jpg)