1 / 34

HTML5 & CSS3

HTML5 & CSS3. A Practical Guide. HTML5 is more than HTML5. HTML5 Spec CSS3 Spec Web Fonts JavaScript to tie it all together. What’s New in HTML5 Spec?. Simplified and Loose Syntax New Elements and Attributes Embedded Media Canvas Offline Storage Drag and Drop Geo-Location.

avak
Télécharger la présentation

HTML5 & CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related