HTML 5 & CSS3

1,288 views

Published on

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,288
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

HTML 5 & CSS3

  1. 1. HTML 5 and CSS 2.1 / 3 The Juicy Bits
  2. 2. Both of these technologies appear in currently available browsers. Some browsers support more features than others, but no browser has 100% support.
  3. 3. What is a ‘Current Browser’?
  4. 4. What is a ‘Current Browser’? Firefox 3.5 Worldwide usage is roughly 16%. Statcounter.com, from 07/2009 to 01/2010.
  5. 5. What is a ‘Current Browser’? Internet Explorer 7 / 8 Worldwide usage is roughly 41%. Statcounter.com, from 07/2009 to 01/2010.
  6. 6. What is a ‘Current Browser’? Opera 10 Worldwide usage is roughly 1%. Statcounter.com, from 07/2009 to 01/2010.
  7. 7. What is a ‘Current Browser’? Safari 4.0 Worldwide usage is roughly 3%. Statcounter.com, from 07/2009 to 01/2010.
  8. 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. 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. 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. 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. 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. 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
  14. 14. 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
  15. 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. 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. 17. 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 ...
  18. 18. 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
  19. 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. 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. 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. 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. 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. 24. AdLocal Lite, rendered in Safari 4.0. This page contains four images.
  25. 25. But ... Compatibility!
  26. 26. Modernizr + JQuery =
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. ?

×