Transcript HTML5CSS3-ilin

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)
HTML5
IN THE REAL WORLD
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="mafSept10Welcome.mp4" type="video/mp4" />
<source src="mafSept10Welcome.ogv" type="video/ogg" />
<object width="480" height="289" type="application/xshockwave-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.
CSS3
IN THE REAL WORLD
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), colorstop(51%,#207cca), color-stop(100%,#7db9e8)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1E5799',
endColorstr='#7db9e8',GradientType=0 ); /* ie */
At a Glance
CSS3 + IE Filter
Selector
Decoration
File Size
No
Yes
?
Notes
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
CSS3 + IE Filter
No
Yes
?
PIE
No
Limited
11K
Notes
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!
@font-face
IN THE REAL WORLD
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('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 Away
Don’t be afraid to provide the HTML5
experience today
HTML5
CSS3
Web fonts
JS