You are on page 1of 22

HTML5 & CSS3

Graceful Degradation and Progressive Enhancement
(Or: Say “Good Bye!” to Flash and Photoshop)

Wednesday, August 26, 2009
Problems with HTML4

• No guidelines left uncertainty.
• Loose structure leads to “Divitus”
• Also, Class Hell / ID Hell
• Not flexible for web applications
• Tables for Layouts (evil but still reliable)

Wednesday, August 26, 2009
Problems with CSS

• Very powerful, yet still limited
• Few ways to select elements
• As with HTML: No Structure == Mess!

Wednesday, August 26, 2009
So What’s New?

Wednesday, August 26, 2009
HTML5 : Semantic Tags
• SECTION
• HEADER
• NAV HTML 5 provides tags which
aim to use the DOM to define
• ARTICLE
the functionality and structure
• FIGURE of the site.
• FOOTER Through this, markup is
dramatically cleaned up and
• HGROUP clarity is provided... Mostly.
• MENU
• ASIDE

Wednesday, August 26, 2009
Nice, tidy markup
HTML 4 HTML 5

Wednesday, August 26, 2009
Nice, tidy markup
HTML 4 HTML 5

Wednesday, August 26, 2009
Nice, tidy markup
HTML 4 HTML 5

<!DOCTYPE html>

<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>

Wednesday, August 26, 2009
<video> & <audio>

• Full play controls
without Flash

• JS Events and JS API

• CSS3 Hooks

Wednesday, August 26, 2009
Other Really Cool Stuff
• XDMSG - Cross
Domain Messages
• Datagrid* (new
table)
• contentEditable with
UndoManager
• Major update to
CANVAS *
• “Required” <input>s

Wednesday, August 26, 2009
Other Really Cool Stuff
• Drag and Drop!
• Offline Storage!
• Formally removes
center, font, strike, u
(and <b> is next)
• Removes formatting
attributes (align,
nowrap, cellpadding,
border) in leu of CSS
• * Evolving!!!

Wednesday, August 26, 2009
Speaking of CSS
• Border: color, image, radius
• Box Shadow
• multiple backgrounds, with
sizing and clipping
• HSL, HSLA, RGBA colors
(no longer limited to hex)
• Text shadow, overflow, and
word-wrap
• Box Model (box-sizing)
• Powerful Selectors
• Web Fonts, Multi-column

Wednesday, August 26, 2009
border-radius
<style>
div.round{
-moz-border-radius:1em;
-webkit-border-radius: 1em;
border-radius:1em;
}
</style>

// -moz for FireFox
// -webkit for safari
// border-radius for IE 8 (soon)

Wednesday, August 26, 2009
text-shadow
Finally replacing the need for Photoshop
for simple drop shadow effects.

text-shadow: 2px 2px 2px #000;
text-shadow: right, bottom, blur, color;

Also here, is the box-shadow property.

box-shadow: 10px 10px 5px #888;
box-shadow: right, bottom, blur, color;

Wednesday, August 26, 2009
New Selectors
/^Patterns$/
E[foo=‘bar’] an E element whose "foo" attribute value is exactly equal to "bar"

an E element whose "foo" attribute value is a list of whitespace-separated values,
E[foo~=‘bar’] one of which is exactly equal to "bar"

E[foo^=‘bar’] an E element whose "foo" attribute value begins exactly with the string "bar"

E[foo$=‘bar’] an E element whose "foo" attribute value ends exactly with the string "bar"

E[foo*=‘bar’] an E element whose "foo" attribute value contains the substring "bar"

an E element whose "foo" attribute has a hyphen-separated list of values
E[hfool=’en’] beginning (from the left) with "en"

Wednesday, August 26, 2009
New Selectors
By Position
The :nth-child() pseudo-class allows you to target one or more specific children of a
E:nth-child(n) parent element. Can also be specified as “even” or “odd”

The :nth-last-child pseudo-class works basically as the :nth-child pseudo-class, but it
E:nth-last-child(n) starts counting the elements from the last one.

The :nth-of-type pseudo-class works just like the :nth-child, with the difference that it
E:nth-of-type(n) only counts children that match the element in the selector.

You guessed it! The :nth-last-of-type pseudo-class can be used exactly like the
E:nth-last-of-type(n) aforementioned :nth-last-child, but this time, it will only target the elements
that match our selector:

http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

Wednesday, August 26, 2009
nth-child(n)
:nth-child(N) matches elements that are proceded by N-1 siblings in the document
tree.

tr:nth-child(2n+1) {...}
Match Odd number rows
tr:nth-child(odd) {...}

tr:nth-child(2n-1) {...}
Match Even number rows
tr:nth-child(even) {...}

tr:nth-child(-n+3) {...} Selects the first 3 rows of any table.

Wednesday, August 26, 2009
Position Selectors
Useful For
ul li:nth-child(odd) {color: yellow;}

• Zebra Striping Tables

• Removing borders from
the bottom row of
floated <LI>s

• Styling nested menus

Wednesday, August 26, 2009
Wait a Damn Minute!
What about IE?!

Wednesday, August 26, 2009
IE 6 & 7 FAIL!!!
• No Shadows

• Square corners

• Many new selectors will
fail

• Multi backgrounds...
nope..

Wednesday, August 26, 2009
Fixing IE 6, 7, & 8
• CurvyCorners.net for rounded
corners
• filter:DropShadow for drop
shadows
• IE8.js to add many selectors & fix
PNGs.
http://code.google.com/p/ie7-js/

Wednesday, August 26, 2009
http://html5doctor.com/how-to-get-html5-working-in-ie-
FF2 re-render bug
and-firefox-2/

CSS3 News and Updates http://www.css3.info

CSS3 Selectors http://www.w3.org/TR/css3-selectors/

IE7.js http://code.google.com/p/ie7-js/

MWD Blog http://www.masterwebdesign.net/blog

Wednesday, August 26, 2009