HTML5 and CSS3 Techniques You Can Use Today
49
HTML5 and CSS3 Techniques You Can Use Today DEV334 Todd Anglin Chief Evangelist Telerik
-
Upload
todd-anglin -
Category
Technology
-
view
8.084 -
download
1
description
Transcript of 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
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
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
