html5/css3
DESCRIPTION
TRANSCRIPT
![Page 1: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/1.jpg)
HTML5 & CSS3
A Practical GuideA Practical Guide
![Page 2: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/2.jpg)
HTML5 is more than HTML5HTML5 Spec
CSS3 Spec
Web Fonts
JavaScript to tie it all together
![Page 3: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/3.jpg)
What’s New in HTML5 Spec?Simplified and Loose Syntax
New Elements and Attributes
Embedded Media
Canvas
Offline Storage
Drag and Drop
Geo-Location
![Page 4: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/4.jpg)
What’s New in CSS3 Spec?New Selector
Decorations
New Column Layout
Transformation (Rotate, Resize…etc)
Animation (Fade In/Fade Out)
![Page 5: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/5.jpg)
IN THE REAL WORLDHTML5
![Page 6: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/6.jpg)
Why Use HTML5 Today?Pros
Better semantics
Lean code
Improved user experience
ConsSome work is needed to accommodate older browsers
![Page 7: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/7.jpg)
ApproachesModernizr
Numerous polyfills
![Page 8: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/8.jpg)
Modernizr A minimal JavaScript solution (5k) that detects a browser’s features
![Page 9: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/9.jpg)
html5shivTurns HTML5 structural elements into HTML4 elements for older browsers
<header> becomes <div id=“header”>
![Page 10: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/10.jpg)
Using <video> todayPros
Greater compatibility
Better performance
ConsMore complex preparation
Can be tricky when embedding hosted videos (YouTube, Vimeo, etc.)
![Page 11: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/11.jpg)
Video tag markupVideo 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?&file=mafSept10Welcome.flv”><param name="movie" value="player.swf?&file=mafSept10Welcome.flv&" /></object></video>
![Page 12: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/12.jpg)
VideoJSBuilds 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.
![Page 13: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/13.jpg)
IN THE REAL WORLDCSS3
![Page 14: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/14.jpg)
Why Use CSS3 Today?Pro
Smaller download
Less JavaScript
Better user experience
ConsSome work is needed to accommodate older browsers
![Page 15: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/15.jpg)
Various ApproachesCSS3 + IE Filters
PIE
Selectivzr
Modernizr
eCSStender
![Page 16: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/16.jpg)
CSS3 + IE FiltersPure CSS solution with forksbackground: #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 */
![Page 17: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/17.jpg)
At a Glance
Selector Decoration File Size Notes
CSS3 + IE Filter No Yes ?
![Page 18: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/18.jpg)
PIEA 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.
![Page 19: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/19.jpg)
At a Glance
Selector Decoration File Size Notes
CSS3 + IE Filter No Yes ?
PIE No Limited 11K IE Only
![Page 20: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/20.jpg)
SelectivizrA JavaScript solution that emulates CSS3 pseudo-class and attribute selectors in IE 6-8
![Page 21: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/21.jpg)
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
![Page 22: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/22.jpg)
ModernizrA JavaScript solution that detects user browser’s features
![Page 23: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/23.jpg)
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
![Page 24: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/24.jpg)
eCSStenderA 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.
![Page 25: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/25.jpg)
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+
![Page 26: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/26.jpg)
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!
![Page 27: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/27.jpg)
IN THE REAL WORLD@font-face
![Page 28: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/28.jpg)
Web fontsAllows 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
![Page 29: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/29.jpg)
When to use web fontsGreat 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
![Page 30: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/30.jpg)
Using web fontsPros
Fewer images = lighter pages
More creative typography
Easier to maintain pages
ConsAdded page size
More “creative” typography
Rendering differences make testing a must
![Page 31: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/31.jpg)
Hosted solutionsTypekit, 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
![Page 32: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/32.jpg)
Serving locallyGood 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
![Page 33: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/33.jpg)
How to use @font-faceHosted services require a script tag and configuration via their websiteLocal 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;}
![Page 34: Html5/CSS3](https://reader033.vdocuments.site/reader033/viewer/2022061110/545251d6af795985248b54f5/html5/thumbnails/34.jpg)
Take AwayDon’t be afraid to provide the HTML5 experience today
HTML5
CSS3
Web fonts
JS