ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Html5/CSS3

?Download as PPT, PDF?
?
S
Simratpreet Singh

This document discusses HTML5, CSS3, and web fonts. It provides an overview of new features in the HTML5 and CSS3 specifications like new elements, attributes, media embedding, and animation. It also discusses different approaches for using these new technologies in older browsers, such as Modernizr, polyfills, and IE filters. Web fonts allow using non-system fonts and the document discusses hosted and local solutions as well as how to implement @font-face.

1 of 34
Download to read offline
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
What¡¯s New in CSS3 Spec? New Selector Decorations New Column Layout Transformation (Rotate, Resize¡­etc) Animation (Fade In/Fade Out)
IN THE REAL WORLD HTML5
Why Use HTML5 Today? Pros Better semantics Lean code Improved user experience Cons Some work is needed to accommodate older browsers
Approaches Modernizr Numerous polyfills
Modernizr A minimal JavaScript solution (5k) that detects a browser¡¯s features
html5shiv Turns HTML5 structural elements into HTML4 elements for older browsers <header> becomes <div id=¡°header¡±>
Using <video> today Pros Greater compatibility Better performance Cons More complex preparation Can be tricky when embedding hosted videos (YouTube, Vimeo, etc.)
Video tag markup Video for Everybody code by Kroc Camen <video width="480" height="270" controls> <source src=/slideshow/html5css3-32745851/32745851/"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>
VideoJS Builds on VFE Uses JavaScript for a more consistent experience Falls back gracefully if JavaScript is disabled FREE! See http://videojs.com for details and downloads.
IN THE REAL WORLD CSS3
Why Use CSS3 Today? Pro Smaller download Less JavaScript Better user experience Cons Some work is needed to accommodate older browsers
Various Approaches CSS3 + IE Filters PIE Selectivzr Modernizr eCSStender
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 */
At a Glance Selector Decoration File Size Notes CSS3 + IE Filter No Yes ?
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.
At a Glance Selector Decoration File Size Notes CSS3 + IE Filter No Yes ? PIE No Limited 11K IE Only
Selectivizr A JavaScript solution that emulates CSS3 pseudo-class and attribute selectors in IE 6-8
At a Glance Selector Decoration File Size Notes CSS3 + IE Filter No Yes ? PIE No Limited 11K IE Only Selectivzr Yes No 4K IE Only
Modernizr A JavaScript solution that detects user browser¡¯s features
At a Glance Selector Decoration File Size Notes CSS3 + IE Filter No Yes N/A PIE No Limited 11K IE Only Selectivzr Yes No 4K IE Only Modernizr No No 5K
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.
At a Glance Selector Decoration File Size Notes CSS3 + IE Filter No Yes N/A Pure CSS PIE No Limited 11K IE Only Selectivzr Yes No 4K IE Only Modernizr No No 5K eCSStender Yes Limited 20K+
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!
IN THE REAL WORLD @font-face
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
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
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
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
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
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(/slideshow/html5css3-32745851/32745851/&); src: local('?'), url(/slideshow/html5css3-32745851/32745851/&) format('woff'), url(/slideshow/html5css3-32745851/32745851/&) format('truetype'), url(/slideshow/html5css3-32745851/32745851/&) format('svg'); font-weight: normal; font-style: normal; }
Take Away Don¡¯t be afraid to provide the HTML5 experience today HTML5 CSS3 Web fonts JS

More Related Content

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. IN THE REAL WORLD HTML5
  • 6. Why Use HTML5 Today? Pros Better semantics Lean code Improved user experience Cons Some work is needed to accommodate older browsers
  • 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=/slideshow/html5css3-32745851/32745851/"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.com for details and downloads.
  • 13. IN THE REAL WORLD CSS3
  • 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 Selector Decoration File Size Notes CSS3 + IE Filter No Yes ?
  • 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 Selector Decoration File Size Notes CSS3 + IE Filter No Yes ? PIE No Limited 11K IE Only
  • 20. Selectivizr A JavaScript solution that emulates CSS3 pseudo-class and attribute selectors in IE 6-8
  • 21. At a Glance Selector Decoration File Size Notes CSS3 + IE Filter No Yes ? PIE No Limited 11K IE Only Selectivzr Yes No 4K IE Only
  • 22. Modernizr A JavaScript solution that detects user browser¡¯s features
  • 23. At a Glance Selector Decoration File Size Notes CSS3 + IE Filter No Yes N/A PIE No Limited 11K IE Only Selectivzr Yes No 4K IE Only Modernizr No No 5K
  • 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 Selector Decoration File Size Notes CSS3 + IE Filter No Yes N/A Pure CSS PIE No Limited 11K IE Only Selectivzr Yes No 4K IE Only Modernizr No No 5K eCSStender Yes Limited 20K+
  • 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. IN THE REAL WORLD @font-face
  • 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(/slideshow/html5css3-32745851/32745851/&); src: local('?'), url(/slideshow/html5css3-32745851/32745851/&) format('woff'), url(/slideshow/html5css3-32745851/32745851/&) format('truetype'), url(/slideshow/html5css3-32745851/32745851/&) 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