HTML5 and CSS3 Techniques You Can Use Today

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