8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

1/28

Akiva Levy, SixThirteen DesignAkiva Levy, SixThirteen Design

WebTech 2010, Beit Heil HaavirWebTech 2010, Beit Heil Haavir

HTML5HTML5&&CSS3CSS3

in ain aNutshellNutshell

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

2/28

HTML5 in a NutshellHTML5 in a Nutshell

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

3/28

A Brief History of HTMLA Brief History of HTML

1995:1995:HTML 2.0

1997:1997:HTML 3.2

1997:1997:HTML 4.01999:1999:HTML 4.01

2000:2000:XHTML 1.0

2001:2001:XHTML 1.1

2008:2008:HTML5

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

4/28

Can we use it now?Can we use it now?

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

5/28

Can we use it now?Can we use it now?

There wont be a single point in time at which weThere wont be a single point in time at which we

can declare that the language [HTML5] is ready tocan declare that the language [HTML5] is ready to

use. Instead, we can start using parts of theuse. Instead, we can start using parts of the

specification as web browsers support thosespecification as web browsers support thosefeatures.features.

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

6/28

Some Welcome ChangesSome Welcome Changes

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

7/28

Some Welcome Changes:Some Welcome Changes:DoctypesDoctypes

HTML 4:HTML 4:XHTML 1.0:XHTML 1.0:

XHTML 1.0:XHTML 1.0:

http://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://www.w3.org/TR/html4/strict.dtd

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

8/28

Some Welcome Changes:Some Welcome Changes:MiscellanyMiscellany

HTML 4:HTML 4:

HTML5:HTML5:

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

9/28

Some Welcome Changes:Some Welcome Changes:MiscellanyMiscellany

HTML 4:HTML 4:

HTML5:HTML5:

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

10/28

Some Welcome Changes:Some Welcome Changes:MiscellanyMiscellany

HTML 4:HTML 4:

HTML5:HTML5:

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

11/28

Obsolete ElementsObsolete Elements

frameframe,framesetframeset,noframesnoframes,acronymacronym,

fontfont,bigbig,centercenter,strikestrike,bgcolorbgcolor,

cellspacingcellspacing,cellpaddingcellpadding,valignvalign

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

12/28

Re-defined ElementsRe-defined Elements

smallsmall,bb,ii,aa,citecite

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

13/28

New ElementsNew Elements

canvascanvas,audioaudio,videovideo,navnav,sectionsection,

menumenu,asideaside,headerheader,hgrouphgroup,

footerfooter,articlearticle,metermeter,markmark,timetime,progressprogress

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

14/28

CSS3 in a NutshellCSS3 in a Nutshell

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

15/28

The path to CSS3The path to CSS3

1996:1996:CSS1 recommended by the W3C in December

1998:1998:CSS2 in May

2000:2000:CSS3 became a working draft in April2002:2002:CSS2.1 became a working draft in August

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

16/28

CSS3 Developed as ModulesCSS3 Developed as Modules

Pros:Pros:

Quicker development involving multiple partiesQuicker development involving multiple parties

Modules developed independently to preventModules developed independently to preventdelaysdelays

Modules can be developed for targeted needs, suchModules can be developed for targeted needs, such

as aural browsers, etc.as aural browsers, etc.

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

17/28

CSS3 Developed as ModulesCSS3 Developed as Modules

Cons:Cons:

Various modules may lead to fuzzy progress /Various modules may lead to fuzzy progress /

fragmentation as a wholefragmentation as a whole

Outstanding problems with CSS may be ignoredOutstanding problems with CSS may be ignored

(ie. poor selector and vertical control,(ie. poor selector and vertical control,

math/expressions, etc.)math/expressions, etc.)

Very few modules have yet reached officiallyVery few modules have yet reached officially

recommended statusrecommended status

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

18/28

Can we use it now?Can we use it now?

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

19/28

Yes!Yes!

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

20/28

CSS3 Browser PrefixesCSS3 Browser Prefixes

Mozilla & Camino:Mozilla & Camino:-moz-

Opera:Opera:-o-

Safari & Chrome:Safari & Chrome:-webkit-Microsoft:Microsoft:-ms-

Konqueror:Konqueror:-khtml-

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

21/28

Fragmentation, anyone?Fragmentation, anyone?Read why this is aRead why this is aBad ThingBad Thing::

http://quirksmode.org/blog/archives/2010/03/css_vendor_pref.htmlhttp://quirksmode.org/blog/archives/2010/03/css_vendor_pref.html

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

22/28

CSS3 Modules:CSS3 Modules:ColourColour

RGBaRGBa

rgba(25,55,120,.5)rgba(25,55,120,.5)

HSL, HSLaHSL, HSLahsla(120, 75%, 75%, 50%)hsla(120, 75%, 75%, 50%)

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

23/28

CSS3 Modules:CSS3 Modules:BackgroundsBackgrounds

Multiple BackgroundsMultiple Backgrounds

Background GradientsBackground Gradients

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

24/28

CSS3 Modules:CSS3 Modules:BordersBorders

RadiusRadius

Border ImageBorder Image

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

25/28

CSS3 Modules:CSS3 Modules:TextText

Text ShadowText Shadow

Font FaceFont Face

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

26/28

But wait! There's more!But wait! There's more!

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

27/28

Box Shadow,Box Shadow,Opacity,Opacity,

Advanced Selectors,Advanced Selectors,Transformers.Transformers.Oh, my!Oh, my!

8/8/2019 Web +++++++ ++ HTML 5 +- CSS3 G +++++ +++

28/28

Thank you.Thank you.

Akiva Levy, SixThirteen DesignAkiva Levy, SixThirteen Design

http://sixthirteendesign.comhttp://sixthirteendesign.com