HTML5 & CSS3

tomatogilamonsterInternet and Web Development

Jun 24, 2012 (5 years and 1 month ago)

382 views

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)

IN THE REAL WORLD

HTML5

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/x
-
shockwave
-
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.



IN THE REAL WORLD

CSS3

Why Use CSS3 Today?

Pro

Smaller
d
ownload

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), 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

?

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

Notes

CSS3 + IE Filter

No

Yes

?

PIE

No

Limited

11K

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!

IN THE REAL WORLD

@font
-
face

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