7/29/2019 HTML5CSS3 Ilin Final
1/34
HTML5 & CSS3
A Practical Guide
7/29/2019 HTML5CSS3 Ilin Final
2/34
HTML5 is more than HTML5
HTML5 Spec
CSS3 Spec
Web FontsJavaScript to tie it all together
7/29/2019 HTML5CSS3 Ilin Final
3/34
Whats New in HTML5 Spec?
Simplified and Loose Syntax
New Elements and Attributes
Embedded MediaCanvas
Offline Storage
Drag and DropGeo-Location
7/29/2019 HTML5CSS3 Ilin Final
4/34
Whats New in CSS3 Spec?
New Selector
Decorations
New Column LayoutTransformation (Rotate, Resizeetc)
Animation (Fade In/Fade Out)
7/29/2019 HTML5CSS3 Ilin Final
5/34
IN THE REAL WORLD
HTML5
7/29/2019 HTML5CSS3 Ilin Final
6/34
Why Use HTML5 Today?
Pros
Better semantics
Lean code
Improved user experience
Cons
Some work is needed to accommodate older
browsers
7/29/2019 HTML5CSS3 Ilin Final
7/34
Approaches
Modernizr
Numerous polyfills
7/29/2019 HTML5CSS3 Ilin Final
8/34
Modernizr
A minimal JavaScript solution (5k) that
detects a browsers features
7/29/2019 HTML5CSS3 Ilin Final
9/34
html5shiv
Turns HTML5 structural elements into
HTML4 elements for older browsers
becomes
7/29/2019 HTML5CSS3 Ilin Final
10/34
Using today
Pros
Greater compatibility
Better performance
ConsMore complex preparation
Can be tricky when embedding hosted videos
(YouTube, Vimeo, etc.)
7/29/2019 HTML5CSS3 Ilin Final
11/34
Video tag markup
Video for Everybody code by Kroc Camen
7/29/2019 HTML5CSS3 Ilin Final
12/34
VideoJS
Builds on VFE
Uses JavaScript for a more consistent
experienceFalls back gracefully if JavaScript is
disabled
FREE!
See http://videojs.com for details and downloads.
http://camendesign.com/http://camendesign.com/http://camendesign.com/7/29/2019 HTML5CSS3 Ilin Final
13/34
IN THE REAL WORLD
CSS3
7/29/2019 HTML5CSS3 Ilin Final
14/34
Why Use CSS3 Today?
Pro
Smaller download
Less JavaScript
Better user experience
Cons
Some work is needed to accommodate older
browsers
7/29/2019 HTML5CSS3 Ilin Final
15/34
Various Approaches
CSS3 + IE Filters
PIE
Selectivzr
Modernizr
eCSStender
7/29/2019 HTML5CSS3 Ilin Final
16/34
CSS3 + IE Filters
Pure 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 */
7/29/2019 HTML5CSS3 Ilin Final
17/34
At a Glance
Selector Decoration File Size Notes
CSS3 + IE Filter No Yes ?
7/29/2019 HTML5CSS3 Ilin Final
18/34
PIE
A JavaScript solution that uses IE specificbehavior that is applied via HTML
Components (HTC).
Limited feature support:border-radius
box-shadow
linear-gradientHTC file is 11kb.
7/29/2019 HTML5CSS3 Ilin Final
19/34
At a Glance
Selector Decoration File Size Notes
CSS3 + IE Filter No Yes ?
PIE No Limited 11K IE Only
7/29/2019 HTML5CSS3 Ilin Final
20/34
Selectivizr
A JavaScript solution that emulates CSS3
pseudo-class and attribute selectors in IE 6-8
7/29/2019 HTML5CSS3 Ilin Final
21/34
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
7/29/2019 HTML5CSS3 Ilin Final
22/34
Modernizr
A JavaScript solution that detects user
browsers features
7/29/2019 HTML5CSS3 Ilin Final
23/34
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 OnlyModernizr No No 5K
7/29/2019 HTML5CSS3 Ilin Final
24/34
eCSStender
A JavaScript solution that dynamically writes
CSS to support older browsers.
Core is (20k), Extensions are additional
(tiny)files to download. Only download theextensions that you want.
7/29/2019 HTML5CSS3 Ilin Final
25/34
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 OnlyModernizr No No 5K
eCSStender Yes Limited 20K+
7/29/2019 HTML5CSS3 Ilin Final
26/34
Which Approach To Take?
Depends
How much CSS3 are you leveraging
Download size and performance
Whos your clientNo JS support and fall back strategies
Test, Test, Test!
7/29/2019 HTML5CSS3 Ilin Final
27/34
IN THE REAL WORLD
@font-face
7/29/2019 HTML5CSS3 Ilin Final
28/34
Web fonts
Allows a page to use fonts not installed on a
users computer
@font-face first specd in CSS2
Resistance from font designers made itunworkable
Designers and services now working together
to make fonts available
7/29/2019 HTML5CSS3 Ilin Final
29/34
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 arereadable at body copy size
Keep in mind that different browsers will
render differently, so avoid line-breaks andaccommodate re-flow of text
7/29/2019 HTML5CSS3 Ilin Final
30/34
Using web fonts
Pros
Fewer images = lighter pages
More creative typography
Easier to maintain pages
Cons
Added page size
More creative typographyRendering differences make testing a must
7/29/2019 HTML5CSS3 Ilin Final
31/34
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
partyRecurring payments required upper tiers
7/29/2019 HTML5CSS3 Ilin Final
32/34
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 probablyviolates the license
7/29/2019 HTML5CSS3 Ilin Final
33/34
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;
}
7/29/2019 HTML5CSS3 Ilin Final
34/34
Take Away
Dont be afraid to provide the HTML5
experience today
HTML5
CSS3Web fonts
JS
Top Related