HTML5 & CSS3

1. HTML5 & CSS3 A Practical Guide

2. HTML5 is more than HTML5 • HTML5 Spec • CSS3 Spec • Web Fonts • JavaScript to tie it all together

3. What’s New in HTML5 Spec? • Simplified and Loose Syntax • New Elements and Attributes • Embedded Media • Canvas • Offline Storage • Drag and Drop • Geo-Location

4. What’s New in CSS3 Spec? • New Selector • Decorations • New Column Layout • Transformation (Rotate, Resize…etc) • Animation (Fade In/Fade Out)

5. HTML5 In the real world

6. Why Use HTML5 Today? • Pros • Better semantics • Lean code • Improved user experience • Cons • Some work is needed to accommodate older browsers

7. Approaches • Modernizr • Numerous polyfills

8. Modernizr • A minimal JavaScript solution (5k) that detects a browser’s features

9. html5shiv • Turns HTML5 structural elements into HTML4 elements for older browsers • <header> becomes <div id=“header”>

10. Using <video> today • Pros • Greater compatibility • Better performance • Cons • More complex preparation • Can be tricky when embedding hosted videos (YouTube, Vimeo, etc.)

11. Video tag markup • Video for Everybody code by Kroc Camen<video width="480" height="270" controls><source src="mafSept10Welcome.mp4" type="video/mp4" /><source src="mafSept10Welcome.ogv" type="video/ogg" /><object width="480" height="289" type="application/x-shockwave-flash" data="player.swf?&amp;file=mafSept10Welcome.flv”><param name="movie" value="player.swf?&amp;file=mafSept10Welcome.flv&amp" /></object></video>

12. VideoJS • Builds on VFE • Uses JavaScript for a more consistent experience • Falls back gracefully if JavaScript is disabled • FREE! See http://videojs.comfor details and downloads.

13. CSS3 In the real world

14. Why Use CSS3 Today? • Pro • Smaller download • Less JavaScript • Better user experience • Cons • Some work is needed to accommodate older browsers

15. Various Approaches • CSS3 + IE Filters • PIE • Selectivzr • Modernizr • eCSStender

16. CSS3 + IE Filters • Pure CSS solution with forks background: #1E5799; /* old browsers */ background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 ); /* ie */

17. At a Glance

18. PIE • A JavaScript solution that uses IE specific behavior that is applied via HTML Components (HTC). • Limited feature support: • border-radius • box-shadow • linear-gradient • HTC file is 11kb.

19. At a Glance

20. Selectivizr • A JavaScript solution that emulates CSS3 pseudo-class and attribute selectors in IE 6-8

21. At a Glance

22. Modernizr • A JavaScript solution that detects user browser’s features

23. At a Glance

24. eCSStender • A JavaScript solution that dynamically writes CSS to support older browsers. • Core is (20k), Extensions are additional (tiny)files to download. Only download the extensions that you want.

25. At a Glance

26. Which Approach To Take? • Depends… • How much CSS3 are you leveraging • Download size and performance • Who’s your client • No JS support and fall back strategies • Test, Test, Test!

27. @font-face In the real world

28. Web fonts • Allows a page to use fonts not installed on a users computer • @font-face first spec’d in CSS2 • Resistance from font designers made it unworkable • Designers and services now working together to make fonts available

29. When to use web fonts • Great for headlines, pull quotes, etc., especially when limiting font styles to limit file size • Be careful with body copy. Not all fonts are readable at body copy size • Keep in mind that different browsers will render differently, so avoid line-breaks and accommodate re-flow of text

30. Using web fonts • Pros • Fewer images = lighter pages • More creative typography • Easier to maintain pages • Cons • Added page size • More “creative” typography • Rendering differences make testing a must

31. Hosted solutions • Typekit, Monotype, etc. • Low set up difficulty • Excellent compatibility: IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+, Chrome 4+ • Great selection, no licensing issues • Javascript file required, dependence on 3rd party • Recurring payments required upper tiers

32. Serving locally • Good selection from Font Squirrel, League of Moveable Type, etc. • Moderate set up difficulty • Excellent compatibility: IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+, Chrome 4+, iOS • No JavaScript required • Using your own desktop fonts probably violates the license

33. How to use @font-face • Hosted services require a script tag and configuration via their website • Local code (generated by Font Squirrel):@font-face {font-family: 'LeagueGothicReg';src: url('League_Gothic-webfont.eot');src: local('☺'),url('League_Gothic-webfont.woff') format('woff'),url('League_Gothic-webfont.ttf') format('truetype'), url('League_Gothic-webfont.svg#webfontOTINA1xY') format('svg');font-weight: normal;font-style: normal;}

34. Take Away • Don’t be afraid to provide the HTML5 experience today • HTML5 • CSS3 • Web fonts • JS