The document discusses HTML5 and CSS3, including new features and browser support. It notes that while both technologies are available in current browsers, support varies between browsers and no single browser supports all features. Usage statistics are provided for Firefox, Internet Explorer, Opera and Safari. New HTML5 features like form input types, canvas, audio/video, and CSS3 features like border radius, gradients and shadows are explained alongside browser compatibility info. The conclusion recommends a progressive enhancement approach to take advantage of new features where supported while maintaining compatibility.

1. HTML 5 and CSS 2.1 / 3
The Juicy Bits

2. Both of these technologies appear in currently
available browsers.
Some browsers support more features than
others, but no browser has 100% support.

3. What is a ‘Current Browser’?

4. What is a ‘Current Browser’?
Firefox 3.5
Worldwide usage is roughly 16%.
Statcounter.com, from 07/2009 to 01/2010.

5. What is a ‘Current Browser’?
Internet Explorer 7 / 8
Worldwide usage is roughly 41%.
Statcounter.com, from 07/2009 to 01/2010.

6. What is a ‘Current Browser’?
Opera 10
Worldwide usage is roughly 1%.
Statcounter.com, from 07/2009 to 01/2010.

7. What is a ‘Current Browser’?
Safari 4.0
Worldwide usage is roughly 3%.
Statcounter.com, from 07/2009 to 01/2010.

8. What’s new in HTML 5?
Aside from ...
A nicer DOCTYPE, more attributes and block
level elements, choice of HTML or XHTML
syntax, support for block level <A> tags ...

9. Date / Date & Time
Allows the selection/input of dates via a widget
Number
Allows the input of float/integers with minimum/maximum validation, via a spinner widget
Range
Allows the input of float/integers with minimum/maximum validation, via a slider widget
Email, Telephone & URL
Adds automatic validation to the INPUT contents based on the specified type
Colour
Allows the selection/input of colours via a widget
Browser Compatibility-O-Meter

10. Date / Date & Time
Allows the selection/input of dates via a widget
Number
Allows the input of float/integers with minimum/maximum validation, via a spinner widget
Range
Allows the input of float/integers with minimum/maximum validation, via a slider widget
Email, Telephone & URL
Adds automatic validation to the INPUT contents based on the specified type
Colour
Allows the selection/input of colours via a widget
Browser Compatibility-O-Meter

11. Date / Date & Time
Allows the selection/input of dates via a widget
Number
Allows the input of float/integers with minimum/maximum validation, via a spinner widget
Range
Allows the input of float/integers with minimum/maximum validation, via a slider widget
Email, Telephone & URL
Adds automatic validation to the INPUT contents based on the specified type
Colour
Allows the selection/input of colours via a widget
Browser Compatibility-O-Meter

12. Date / Date & Time
Allows the selection/input of dates via a widget
Number
Allows the input of float/integers with minimum/maximum validation, via a spinner widget
Range
Allows the input of float/integers with minimum/maximum validation, via a slider widget
Email, Telephone & URL
Adds automatic validation to the INPUT contents based on the specified type
Colour
Allows the selection/input of colours via a widget
Browser Compatibility-O-Meter

13. Date / Date & Time
Allows the selection/input of dates via a widget
Number
Allows the input of float/integers with minimum/maximum validation, via a spinner widget
Range
Allows the input of float/integers with minimum/maximum validation, via a slider widget
Email, Telephone & URL
Adds automatic validation to the INPUT contents based on the specified type
Colour
Allows the selection/input of colours via a widget
Browser Compatibility-O-Meter

15. Native audio and video
Embedding of multimedia objects without third party plugins, (no more Flash!).
Canvas
Display bitmap information on a canvas, (think MS Paint via Javascript/HTML). Easily used for
charting or other infographics.
Client-side storage
Store/retrieve information in a client side database until you want to pass it to the server.
Browser Compatibility-O-Meter

16. Native audio and video
Embedding of multimedia objects without third party plugins, (no more Flash!).
Canvas
Display bitmap information on a canvas, (think MS Paint via Javascript/HTML). Easily used for
charting or other infographics.
Client-side storage
Store/retrieve information in a client side database until you want to pass it to the server.
Browser Compatibility-O-Meter

17. Native audio and video
Embedding of multimedia objects without third party plugins, (no more Flash!).
Canvas
Display bitmap information on a canvas, (think MS Paint via Javascript/HTML). Easily used for
charting or other infographics.
Client-side storage
Store/retrieve information in a client side database until you want to pass it to the server.
Browser Compatibility-O-Meter

18. What’s new in CSS 2.1 and 3?
Aside from ...
Support for animations, column and table style
positioning, lots of selectors, (first-child,
last-child, nth-child, nth-of-type),
generated content ...

19. Border Radius
Create rounded corners on any block level element, without additional images
Multiple Background Images
Add more than one background image per element, and individually place each one
Background Gradients
Apply a linear or radial gradient to any block element
Full Colour Transparency
Apply full or partial transparency to any element’s colour or background colour
Box & Text Shadow
Apply a fully configurable shadow to any block level element, and any text element
Use Any Font
Use any number of fonts without resorting to Javascript, image or Flash replacement
Browser Compatibility-O-Meter

20. Border Radius
Create rounded corners on any block level element, without additional images
Multiple Background Images
Add more than one background image per element, and individually place each one
Background Gradients
Apply a linear or radial gradient to any block element
Full Colour Transparency
Apply full or partial transparency to any element’s colour or background colour
Box & Text Shadow
Apply a fully configurable shadow to any block level element, and any text element
Use Any Font
Use any number of fonts without resorting to Javascript, image or Flash replacement
Browser Compatibility-O-Meter

21. Border Radius
Create rounded corners on any block level element, without additional images
Multiple Background Images
Add more than one background image per element, and individually place each one
Background Gradients
Apply a linear or radial gradient to any block element
Full Colour Transparency
Apply full or partial transparency to any element’s colour or background colour
Box & Text Shadow
Apply a fully configurable shadow to any block level element, and any text element
Use Any Font
Use any number of fonts without resorting to Javascript, image or Flash replacement
Browser Compatibility-O-Meter

22. Border Radius
Create rounded corners on any block level element, without additional images
Multiple Background Images
Add more than one background image per element, and individually place each one
Background Gradients
Apply a linear or radial gradient to any block element
Full Colour Transparency
Apply full or partial transparency to any element’s colour or background colour
Box & Text Shadow
Apply a fully configurable shadow to any block level element, and any text element
Use Any Font
Use any number of fonts without resorting to Javascript, image or Flash replacement
Browser Compatibility-O-Meter

23. Border Radius
Create rounded corners on any block level element, without additional images
Multiple Background Images
Add more than one background image per element, and individually place each one
Background Gradients
Apply a linear or radial gradient to any block element
Full Colour Transparency
Apply full or partial transparency to any element’s colour or background colour
Box & Text Shadow
Apply a fully configurable shadow to any block level element, and any text element
Use Any Font
Use any number of fonts without resorting to Javascript, image or Flash replacement
Browser Compatibility-O-Meter

24. Border Radius
Create rounded corners on any block level element, without additional images
Multiple Background Images
Add more than one background image per element, and individually place each one
Background Gradients
Apply a linear or radial gradient to any block element
Full Colour Transparency
Apply full or partial transparency to any element’s colour or background colour
Box & Text Shadow
Apply a fully configurable shadow to any block level element, and any text element
Use Any Font
Use any number of fonts without resorting to Javascript, image or Flash replacement
Browser Compatibility-O-Meter

25. AdLocal Lite, rendered in Safari 4.0. This page contains four images.

26. But ... Compatibility!

31. Modernizr + JQuery =

32. How does this help Cirius?
Only implement what we need, in the browsers
that need it
Use the strengths of these new technologies
Phase out each widget as our supported
browsers implement them

33. How does this help Cirius?
Only implement what we need, in the browsers
that need it
Use the strengths of these new technologies
Phase out each widget as our supported
browsers implement them

34. How does this help Cirius?
Only implement what we need, in the browsers
that need it
Use the strengths of these new technologies
Phase out each widget as our supported
browsers implement them

35. ?