Downloaded 127 times
![[Source: Aaron Olaf, Flickr]](https://image.slidesharecdn.com/dev334anglin-v3-110711132822-phpapp01/75/HTML5-and-CSS3-Techniques-You-Can-Use-Today-27-2048.jpg)
![[Source: Mercedes USA, http://mbusa.com/]](https://image.slidesharecdn.com/dev334anglin-v3-110711132822-phpapp01/75/HTML5-and-CSS3-Techniques-You-Can-Use-Today-28-2048.jpg)
Uploaded byTodd Anglin
HTML5 and CSS3 Techniques You Can Use Today
This document provides an overview of HTML5 and CSS3 techniques that can be used today, beginning with a brief history of HTML and CSS. It then discusses adoption strategies for new techniques, including using polyfills to enable support in older browsers. Specific techniques demonstrated include semantic HTML5 tags, video and audio, geolocation, local storage, HTML5 forms, and microdata. CSS3 techniques covered are selectors, color, fonts, borders and backgrounds, gradients, media queries, and animations. The document emphasizes that many new techniques can be used now across browsers with polyfills or alternate implementations for older browsers.
HTML5 and CSS3 Techniques You Can Use Today
- 1. HTML5 and CSS3Techniques You Can Use TodayDEV334Todd AnglinChief EvangelistTelerik
- 2. IntroductionsTodd AnglinChief Evangelist,TelerikMicrosoft MVPASP InsiderPresident NHDNUG & O’Reilly AuthorTelerikWatch.com@toddanglin
- 3.
- 4. Session Road MapGoal:Leave with at least 1 HTML5/CSS3 technique you can use today
- 5. “While it continuesto 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
- 6. HTML4 = RoughGuideUnpredictable Browser Support
- 7. HTML & CSSHistoryHTML5Addressing modern web applications & pains of the past
- 8. HTML & CSSHistoryCSS: Plagued by implementation bugs & inconsistenciesCSS3Improve consistency & power of styling language
- 9. How is theweb evolving?
- 10.
- 11. “Living Standard” Offline Canvas Video AudioWebSocketsFileAPIWebGL HTML5 FormsGeolocationWHATWG | W3C | IETF
- 12. StableCanvas | LocalStorage |Microdata| Document Editing |Geolocation| Semantic Tags | Video/Audio | SelectorsIn ProgressWebGL | WebSockets | File API | Drag-Drop API | IndexDB | Offline API | Web Workers | HTML5 Forms
- 14. IE9 offers supportfor 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
- 15.
- 16. CSS 2.1SelectorsCSS ColorCSS2Backgrounds &BordersMedia QueriesMulti-column25+ DraftsTransitionsTransformationsAnimationsGradientsCSS3 Text
- 17. -moz-border-radius: 5px 5px5px5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 2px 2px2px #333;-webkit-box-shadow: 2px 2px2px #333;box-shadow: 2px 2px2px #333;-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;
- 18. Browser Prefixes-webkit-moz-o-ms“standard” waybrowsers implement experimental features
- 19.
- 20.
- 21. What is usabletoday?
- 22. Adoption StrategiesLowest CommonDominatorOnly use features natively available in all target browsers
- 23. Adoption StrategiesPolyfillEnrichedOnly usefeatures either natively available OR available via JavaScript polyfillX X
- 24. polyfill(n) poly •fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support
- 25. Adoption StrategiesAlternate ExperiencesOnlyuse features available in target browsers AND design alternate experience for other browsersX XX X XX X
- 26.
- 27. [Source: Aaron Olaf,Flickr]
- 28. [Source: Mercedes USA,http://mbusa.com/]
- 29. Adoption StrategiesVertical TargetCreateexperiences targeted at specific browsers (or classes of browsers)X XX X XX X
- 30. Real World BrowserSupportBetter, but not perfectKnow your users. Know your browsers.
- 31. HTML5 TechniquesYou canuse today
- 32. W3C on HTML5Definesa single language called HTML5 which can be written in HTML syntax and in XML syntax.Defines detailed processing models to foster interoperable implementations.Improves markup for documents.Introduces markup and APIs for emerging idioms, such as Web applications.
- 33. Enriching VS ExperienceAddIntelliSense & Schema Validation to Visual Studio 2008/2010 (pre SP1) editorhttp://bit.ly/vsHTML5http://bit.ly/vsSVG
- 34.
- 35. ModernizrShiv’r + InspectorSimpleway 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.
- 36. DEMOPolyfilling & OlderBrowserswith Modernizr
- 37. Semantic TagsTags withmeaning<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.*Need polyfill to trigger styling in old IESafe to use today!
- 38. Video & AudioSemanticrich mediaReach more people on more devicesContainerMP4H.264CodecSafe to use today!
- 39. GeolocationUsable on modernbrowsers + mobileRequires plug-in for older browsersnavigator.geolocation.getCurrentPosition(callback);function callback(position){varlat = position.coords.latitude;varlng = position.coords.longitude;varacc = position.coords.accuracy;}Safe to use today!
- 40. Local StorageUsable inmodern browserssessionStorage.setItem('value', this.value);localStorage.setItem('value', this.value);sessionStorage.getItem(‘value’);sessionStorage.clear();localStorage.clear();sessionStorage = per windowlocalStorage = per browser5 MB limit
- 41. HTML5 FormsImproved usabilityUnevensupport 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!
- 42. Rich Snippets (*microdata)Contentwith meaningMachines understand more of your content<div itemscopeitemtype="http://data-vocabulary.org/Event"> <time itemprop="startDate" datetime="2015-10-15T19:00-08:00"> Oct 15, 7:00PM </time>— <time itemprop="endDate"datetime="2015-10-15T19:00-08:00"> Oct 15, 9:00PM </time> <span itemprop="geo" itemscopeitemtype="http://data-vocabulary.org/Geo"><meta itemprop="latitude" content="37.774929" /><meta itemprop="longitude" content="-122.419416" /> </span>...</div>Safe to use today!
- 43. SVG & CanvasSafeto use today!
- 44. Canvas for IE6/7/8Manypolyfills for older browsersJavaScript or Flash basedBetter Perf
- 45. Custom Attributesdata-*Valid approachto storing data in HTML<!--Store values in data-* attributes--><div id="mydiv" data-key="26" data-name="My product name">This product is an extremely popular choice.</div><!--Access values with JavaScript-->varmydiv=document.getElementById('mydiv')//Using DOM's getAttribute() propertyvarkey = mydiv.getAttribute("data-key") //returns "26" //OR Using JavaScript's dataset property**var key = mydiv.dataset.key //returns "26"Safe to use today!
- 46. CSS3 TechniquesYou canuse today
- 47. Leveling the PlayingFieldCSS ResetBrowsers ship with built-in styles – zero them out!Enable newer features in older browsershttp://html5reset.orghttp://html5boilerplate.com
- 48. CSS3 SelectorsPowerful newselector 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
- 49. CSS3 ColorHSL andRGBSupport for new color models + alpha channels//HSLbackground:hsl(320,100%,25%);//HSLabackground:hsla(165, 100%, 50%, 1.0);//RGBbackground:rgb(155,100,100);//RGBabackground:rgba(153, 134, 117, 0.2);
- 50. Custom FontsBiggest Problem?Licensing!@font-face{ font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”); } //Usageh3 { font-family: Delicious, sans-serif; }
- 51. Web Font ProvidersSolvethe licensing problemHost the WOFF/TTF/OTF font files Provide easy-to-use codehttp://www.fontsquirrel.com/http://webfonts.fonts.comhttp://typekit.com/librarieshttp://code.google.com/webfonts
- 52. Borders & BackgroundsRoundedcorners, 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
- 53. Drop ShadowsExactly likeit soundsbox-shadow: <hShift> <vShift> <size> <color>;-moz-box-shadow: 2px 2px2px #333;-webkit-box-shadow: 2px 2px2px #333;box-shadow: 2px 2px2px #333;Safe to use today!
- 54. Text ShadowsUniform acrosssupported browsers!text-shadow: <h offest> <v offset> <blur size> <color>;text-shadow: 2px 2px2px #333;//You can apply multiple shadowstext-shadow: 2px 2px2px #333, 2px 2px 3px #CCC;Safe to use today!
- 55. BackgroundsMore options, morepowermultiple backgroundsresize backgroundsbackground clipping/*Background size*/-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;/*Multiple Backgrounds*/background: url(top.gif) top left no-repeat,url(bottom.gif) bottom left no-repeat,url(middle.gif) left repeat-y;/*Background origin*/background-origin: border;/*Other options: padding or content*/Safe to use today!
- 56. GradientsEmerging CSS standardButuseful and desirableCan be “shived” to support all browsers
- 57. Media QueriesTarget stylesto 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; }}
- 58. LESS for CSSUseLESS to write less CSSVariables, operations, mix-ins, nested rules<link rel="stylesheet/less" href="style.less" type="text/css" /><script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>/*Variables*/@primaryColor: #383939;background-color: @primaryColor;/*Mix-ins!!*/.roundedCorners (@radius: 12px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius;}#page { background-color: @primaryColor; .roundedCorners; }Safe to use today!
- 59. Animating with CSSAnimateby setting CSS propertiesWorks when JS is disabled#id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }Safe to use today!
- 60. Tomorrow Land (akaMobile)
- 61. which HTML5/CSS3 techniquewill you try?
- 62.
Editor's Notes
- #2 As more browsers deliver rich support for the next generation of standards-based web development, new techniques are enabling web developers to design with unprecedented levels of control. In this session, learn practical HTML5 and CSS3 techniques that you can use in any web project today. Learn how to easily add drop shadows to HTML objects, how to quickly create rounded corners, how to use custom fonts, and even how to animate with CSS. All techniques are demonstrated with special attention to cross-browser support and tips for supporting older browsers
- #6 http://dev.w3.org/html5/html4-differences/Goes on to say:The same goes for XHTML1, which defines an XML serialization for HTML4, and DOM Level 2 HTML, which defines JavaScript APIs for both HTML and XHTML. HTML5 will replace these documents.
- #8 http://en.wikipedia.org/wiki/HTML
- #9 http://en.wikipedia.org/wiki/Cascading_Style_SheetsIE Mac: Shipped in March 2000First browser to 100% support CSS: IE on Mac!9 style sheet languages proposed in early 90sLanguages:1996:JavaScript Style Sheets (JSSS) – Netscape1994: Cascading HTML Style Sheets (CHSS)1994: Stream-based Style Sheet Proposal (SSP)
- #12 WHATWG FAQs on Living Standard: http://wiki.whatwg.org/wiki/FAQ#What_does_.22Living_Standard.22_mean.3F
- #14 What is the IE strategy for HTML5/CSS3?
- #15 On Microsoft’s strategy/approach to HTML5:http://blogs.msdn.com/b/ie/archive/2010/12/20/html5-site-ready-and-experimental.aspxhttp://blogs.msdn.com/b/interoperability/archive/2010/12/21/prototyping-early-w3c-html5-specifications.aspx
- #16 http://html5labs.interoperabilitybridges.com/http://www.beautyoftheweb.com
- #17 CSS3’s evolutionary approachMicrosoft is focusing primarily on adding product support at the Candidate Recommendation stageReview status of various CSS3 proposed specs: http://www.w3.org/Style/CSS/current-work
- #19 Microsoft Extensions: http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspxVendor specific prefixes: http://reference.sitepoint.com/css/vendorspecific
- #20 -Show example of browser prefixes in actionhttp://www.w3.org/TR/CSS21/syndata.html#vendor-keywords
- #21 CSS3’s evolutionary approachMicrosoft is focusing primarily on adding product support at the Candidate Recommendation stageReview status of various CSS3 proposed specs: http://www.w3.org/Style/CSS/current-work
- #22 This is not a question with a single correct answer. It all depends on your audience and strategy.There are several general strategies for defining what is “usable” today.
- #25 Useful for adding HTML5 to both older browsers + new browsers that do not have a specific HTML5 featurehttp://remysharp.com/2010/10/08/what-is-a-polyfill/https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
- #28 Strategy: Design for lowest common denominator, Enrich/Enhance as more capabilities are availableImage Source: http://www.flickr.com/photos/aaronolaf/833342657/
- #29 Strategy: Design for best case scenario (premium features), and gracefully remove features as resources are not availableImage Source: http://www.mbusa.com/mercedes/index
- #33 http://dev.w3.org/html5/html4-differences/
- #34 HTML5 & CSS3 in VS2010 SP1: http://madskristensen.net/post/HTML5-CSS3-in-Visual-Studio-2010-SP1.aspxHTML5 in VS2008: http://stackoverflow.com/questions/1682180/will-visual-studio-2010-support-html-5
- #35 http://code.google.com/p/ie7-js/Testing IE:http://spoon.net/browsers/Three choices: Hack it – Force features with JS shivsSupport it – Provide gracefully degraded experienceKill it – Provide message indicating no or limited support
- #36 http://www.modernizr.comhttp://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/Modernizr now ships with ASP.NET MVC 3
- #40 http://diveintohtml5.org/geolocation.htmlSpec: http://dev.w3.org/geo/api/spec-source.htmlOnly lat, long, acc are guranteed. Other values might be available, including altitude, altitudeAccuracy, heading, speedCan force maximum age for cached geolocation objectsCan handle errors and make repeat location calls using navigatior.geolocation.watchPosition(successCallback, errorCallback, {maximumAge:time})Google Maps API v3 Reference: http://code.google.com/apis/maps/documentation/javascript/basics.html(Free to use on all apps that are free to consumers – no API keys needed)
- #41 http://html5demos.com/storageTutorial:http://html5tutorial.net/tutorials/working-with-html5-localstorage.htmlFallback for older browsers: http://amplifyjs.com/api/store/
- #42 http://diveintohtml5.org/forms.htmlPolyfills for other HTML5 features:http://ericleads.com/h5validate/
- #43 http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=164506Google tool for testing Rich Snippets: http://www.google.com/webmasters/tools/richsnippetsGoogle will not show content from hidden div's in Rich Snippets.Currently, review sites and social networking/people profile sites are eligible. We plan to expand Rich Snippets to other types of content in the future. (Sept 2010)http://knol.google.com/k/google-rich-snippets-tips-and-tricksImprove video discovery: http://googlewebmastercentral.blogspot.com/2009/09/supporting-facebook-share-and-rdfa-for.htmlAnother very popular emerging microformat: Open Graph (by Facebook)http://developers.facebook.com/tools/linthttp://ogp.me/
- #44 http://upload.wikimedia.org/wikipedia/en/d/d0/Chrome_Logo.svgComparison articles:Great comparison: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/http://blogs.sitepoint.com/2010/07/06/canvas-vs-svg-how-to-choose/ (IDEA: progressive enhancement techniques — for example, IE8 and earlier versions show a table of data whereas supported browsers show an animated pie chart.)SVG Bridge for all browsers:http://raphaeljs.com/CANVAS Bridge for IE: http://code.google.com/p/explorercanvas/(Pointless canvas example: http://paulirish.com/2010/high-res-browser-icons/)SVG is DOM-based. All elements exist in DOM. Thus, you can attach event handlers. CON: Many objects can hurt perf.CANVAS is PIXEL-based. All elements rendered quickly, but not part of DOM. CON: Harder to interact.
- #45 http://flashcanvas.net/http://code.google.com/p/explorercanvas/
- #46 http://www.javascriptkit.com/dhtmltutors/customattributes.shtmlhttp://html5doctor.com/html5-custom-data-attributes/Two methods of access:- Via Attributes (http://api.jquery.com/category/attributes/)Via “dataset” (plug-in required today: http://www.orangesoda.net/jquery.dataset.html)
- #47 http://www.impressivewebs.com/css3-click-chart/
- #48 http://html5reset.org/http://meyerweb.com/eric/tools/css/reset/http://html5doctor.com/html-5-reset-stylesheet/http://html5boilerplate.com/
- #51 @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5IE relied on proprietary Embedded Open Type (.eot)Old school solutions involved things like sIFR (http://www.mikeindustries.com/blog/sifr/)Modern browsers finally support TTF and OTF + Most support new WOFF (exception is Safari)Resources:http://www.css3.info/preview/web-fonts-with-font-face/http://www.alistapart.com/articles/cssatten
- #52 Making fonts compatible with IE requires some work-around:http://randsco.com/index.php/2009/07/04/p680\\Discussion of WOFF:http://en.wikipedia.org/wiki/Web_Open_Font_Format
- #53 Fix “bleeding” in Webkit with: -webkit-background-clip: padding-box;http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleedhttp://css3pie.com/
- #55 Not supported in IE9
- #56 http://designshack.co.uk/articles/introduction-to-css3-part-6-backgroundshttp://www.css3.info/preview/background-origin-and-background-clip/
- #57 Relatively new CSS standard defining Gradients: http://www.w3.org/TR/css3-images/IMAGES FROM: http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/Great visual CSS gradient generator: http://www.display-inline.fr/projects/css-gradient/#startType=hex&startValue=aaeeff&endType=hex&endValue=3399ccSimple Visual gradient creator: http://gradients.glrzad.com/Good explanation:http://www.dynamicdrive.com/style/csslibrary/item/css3_linear_gradients/background: black;background: -moz-linear-gradient(top, black, white);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white)); /*You can also make gradient stops*/-moz-linear-gradient( top,rgb(214,24,166) 0%,rgb(255,51,200) 50%,rgb(255,77,240) 87%)
- #58 http://www.webdesignerwall.com/tutorials/css3-media-queries/http://www.w3.org/TR/css3-mediaqueries/http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/
- #59 Great tutorial:http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3LESS site: http://lesscss.org/
- #60 Not currently supported in IE9CSS3 Animation Examples:http://webdeveloperjuice.com/demos/css/css3effects.html#secondhttp://anthonycalzadilla.com/css3-ATAT/index.htmlhttp://www.optimum7.com/css3-man/animation.html
- #61 Great resourcefor checking mobile support: http://caniuse.com