Date post: | 19-Jan-2016 |
Category: |
Documents |
Upload: | archibald-price |
View: | 244 times |
Download: | 3 times |
HTML5 & CSS3
A Practical GuideA Practical Guide
HTML5 is more than HTML5HTML5 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 WORLDHTML5
Why Use HTML5 Today?Pros
Better semantics
Lean code
Improved user experience
ConsSome work is needed to accommodate older browsers
ApproachesModernizr
Numerous polyfills
Modernizr A minimal JavaScript solution (5k) that detects a browser’s features
html5shivTurns HTML5 structural elements into HTML4 elements for older browsers
<header> becomes <div id=“header”>
Using <video> todayPros
Greater compatibility
Better performance
ConsMore complex preparation
Can be tricky when embedding hosted videos (YouTube, Vimeo, etc.)
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>
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.
IN THE REAL WORLDCSS3
Why Use CSS3 Today?Pro
Smaller download
Less JavaScript
Better user experience
ConsSome work is needed to accommodate older browsers
Various ApproachesCSS3 + IE Filters
PIE
Selectivzr
Modernizr
eCSStender
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 */
At a Glance
Selector Decoration File Size Notes
CSS3 + IE Filter No Yes ?
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.
At a Glance
Selector Decoration File Size Notes
CSS3 + IE Filter No Yes ?
PIE No Limited 11K IE Only
SelectivizrA 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
ModernizrA 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
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.
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 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
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
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
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
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
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;}
Take AwayDon’t be afraid to provide the HTML5 experience today
HTML5
CSS3
Web fonts
JS