HTML5CSS3 Ilin Final

7/29/2019 HTML5CSS3 Ilin Final

1/34

HTML5 & CSS3

A Practical Guide


2/34

HTML5 is more than HTML5

HTML5 Spec

CSS3 Spec

Web FontsJavaScript to tie it all together


3/34

Whats New in HTML5 Spec?

Simplified and Loose Syntax

New Elements and Attributes

Embedded MediaCanvas

Offline Storage

Drag and DropGeo-Location


4/34

Whats New in CSS3 Spec?

New Selector

Decorations

New Column LayoutTransformation (Rotate, Resizeetc)

Animation (Fade In/Fade Out)


5/34

IN THE REAL WORLD

HTML5


6/34

Why Use HTML5 Today?

Pros

Better semantics

Lean code

Improved user experience

Cons

Some work is needed to accommodate older

browsers


7/34

Approaches

Modernizr

Numerous polyfills


8/34

Modernizr

A minimal JavaScript solution (5k) that

detects a browsers features


9/34

html5shiv

Turns HTML5 structural elements into

HTML4 elements for older browsers

becomes


10/34

Using today

Pros

Greater compatibility

Better performance

ConsMore complex preparation

Can be tricky when embedding hosted videos

(YouTube, Vimeo, etc.)


11/34

Video tag markup

Video for Everybody code by Kroc Camen


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/


13/34

IN THE REAL WORLD

CSS3


14/34

Why Use CSS3 Today?

Pro

Smaller download

Less JavaScript

Better user experience

Cons

Some work is needed to accommodate older

browsers


15/34

Various Approaches

CSS3 + IE Filters

PIE

Selectivzr

Modernizr

eCSStender


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 */


17/34

At a Glance

Selector Decoration File Size Notes

CSS3 + IE Filter No Yes ?


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.


19/34

At a Glance



PIE No Limited 11K IE Only


20/34

Selectivizr

A JavaScript solution that emulates CSS3

pseudo-class and attribute selectors in IE 6-8


21/34

At a Glance




Selectivzr Yes No 4K IE Only


22/34

Modernizr

A JavaScript solution that detects user

browsers features


23/34

At a Glance


CSS3 + IE Filter No Yes N/A


Selectivzr Yes No 4K IE OnlyModernizr No No 5K


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.


25/34

At a Glance


CSS3 + IE Filter No Yes N/A Pure CSS


Selectivzr Yes No 4K IE OnlyModernizr No No 5K

eCSStender Yes Limited 20K+


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!


27/34

IN THE REAL WORLD

@font-face


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


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


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


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


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


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;

}


34/34

Take Away

Dont be afraid to provide the HTML5

experience today

HTML5

CSS3Web fonts

JS

Documents

HTML5CSS3 Ilin Final