Scribd
Upload
57 views

Html5 & Css3: A Practical Guide

This document discusses HTML5, CSS3, and web fonts. It provides overviews of new features in HTML5 and CSS3 specifications. It also examines approaches for using new features in older browsers, such as Modernizr, polyfills, and vendor prefixes. The document discusses using video, CSS3 properties, and web fonts today despite lack of support in some older browsers. It analyzes techniques like HTML5 shiv and various CSS3 polyfills. Overall, the document advocates testing and providing the best experience possible with new features, while maintaining compatibility with older browsers.

Uploaded by

nareshbunny57607734
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
57 views

Html5 & Css3: A Practical Guide

This document discusses HTML5, CSS3, and web fonts. It provides overviews of new features in HTML5 and CSS3 specifications. It also examines approaches for using new features in older browsers, such as Modernizr, polyfills, and vendor prefixes. The document discusses using video, CSS3 properties, and web fonts today despite lack of support in some older browsers. It analyzes techniques like HTML5 shiv and various CSS3 polyfills. Overall, the document advocates testing and providing the best experience possible with new features, while maintaining compatibility with older browsers.

Uploaded by

nareshbunny57607734
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 34

HTML5 & CSS3

A Practical Guide

HTML5 is more than HTML5


HTML5 Spec CSS3 Spec Web Fonts JavaScript to tie it all together

Whats New in HTML5 Spec?


Simplified and Loose Syntax New Elements and Attributes Embedded Media Canvas Offline Storage Drag and Drop Geo-Location

Whats New in CSS3 Spec?


New Selector Decorations New Column Layout Transformation (Rotate, Resizeetc) 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 browsers 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
Selector
CSS3 + IE Filter No

Decoration
Yes

File Size
?

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
CSS3 + IE Filter PIE No No

Decoration
Yes Limited

File Size
? 11K

Notes
IE Only

Selectivizr
A JavaScript solution that emulates CSS3 pseudo-class and attribute selectors in IE 6-8

At a Glance
Selector
CSS3 + IE Filter PIE Selectivzr No No Yes

Decoration
Yes Limited No

File Size
? 11K 4K

Notes
IE Only IE Only

Modernizr
A JavaScript solution that detects user browsers features

At a Glance
Selector
CSS3 + IE Filter PIE Selectivzr No No Yes

Decoration
Yes Limited No

File Size
N/A 11K 4K

Notes
IE Only 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
CSS3 + IE Filter PIE Selectivzr No No Yes

Decoration
Yes Limited No

File Size
N/A 11K 4K

Notes
Pure CSS IE Only IE Only

Modernizr
eCSStender

No
Yes

No
Limited

5K
20K+

Which Approach To Take?


Depends
How much CSS3 are you leveraging Download size and performance Whos 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 specd 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
Dont be afraid to provide the HTML5 experience today
HTML5 CSS3 Web fonts JS

You might also like