CSS3 and HTML5 are known as the "new kids on the web block". HTML5 Core refers to the markup language specification, while the HTML5 Family includes additional emerging technologies like CSS3, Web Workers, Web Storage, and Geolocation that enhance the user experience. Key features of HTML5 include more readable markup, audio and video elements without plugins, 2D drawing with canvas, and semantic structural elements. CSS3 introduces properties for visual effects like text shadows, transitions, and 3D transforms to create richer interactive designs on the web.

1. CSS3 & HTML5
The New Kids on the Web Block
Jason Hando
jason@utopiainternet.com

2. HTML5 Core vs Family

3. HTML5 Core vs Family
✦ HTML5 Core is the markup language spec

4. HTML5 Core vs Family
✦ HTML5 Core is the markup language spec
✦ HTML5 Family are collection of next gen
tech:

5. HTML5 Core vs Family
✦ HTML5 Core is the markup language spec
✦ HTML5 Family are collection of next gen
tech:
✦ HTML5, CSS3, Web Workers, Web
Storage, Web SQL Databases, Web
Sockets, Geolocation, Microdata, Device
API and File API, SVG (?).

6. HTML5 Family

7. HTML5 Family
✦ HTML5: next generation markup language

8. HTML5 Family
✦ HTML5: next generation markup language
✦ CSS3: next generation styling spec

9. HTML5 Family
✦ HTML5: next generation markup language
✦ CSS3: next generation styling spec
✦ Web Storage: local and session (offline)

10. HTML5 Family
✦ HTML5: next generation markup language
✦ CSS3: next generation styling spec
✦ Web Storage: local and session (offline)
✦ Web Workers: browser tasks (stability)

11. HTML5 Family
✦ HTML5: next generation markup language
✦ CSS3: next generation styling spec
✦ Web Storage: local and session (offline)
✦ Web Workers: browser tasks (stability)
✦ Web Sockets: asynchronous networking
(replaces AJAX)

12. HTML5 Family
✦ HTML5: next generation markup language
✦ CSS3: next generation styling spec
✦ Web Storage: local and session (offline)
✦ Web Workers: browser tasks (stability)
✦ Web Sockets: asynchronous networking
(replaces AJAX)
✦ Geolocation: scripts can query location

13. HTML5 Family
✦ HTML5: next generation markup language
✦ CSS3: next generation styling spec
✦ Web Storage: local and session (offline)
✦ Web Workers: browser tasks (stability)
✦ Web Sockets: asynchronous networking
(replaces AJAX)
✦ Geolocation: scripts can query location
✦ File APIs: upload multiple files inside browser

14. HTML5 Family
✦ HTML5: next generation markup language
✦ CSS3: next generation styling spec
✦ Web Storage: local and session (offline)
✦ Web Workers: browser tasks (stability)
✦ Web Sockets: asynchronous networking
(replaces AJAX)
✦ Geolocation: scripts can query location
✦ File APIs: upload multiple files inside browser
✦ Device APIs: access to cameras, bluetooth etc

16. HTML5 Core

17. HTML5 Core
✦ HTML to XML (XHTML) to HTML

18. HTML5 Core
✦ HTML to XML (XHTML) to HTML
✦ 2004 Paper to W3C: rejected

19. HTML5 Core
✦ HTML to XML (XHTML) to HTML
✦ 2004 Paper to W3C: rejected
✦ WHATWG = Mozilla, Opera and Apple
(Safari)

20. HTML5 Core
✦ HTML to XML (XHTML) to HTML
✦ 2004 Paper to W3C: rejected
✦ WHATWG = Mozilla, Opera and Apple
(Safari)
✦ 2006... “Can we use your Spec for HTML5,
pretty please?” - W3C

21. HTML5 Core
✦ HTML to XML (XHTML) to HTML
✦ 2004 Paper to W3C: rejected
✦ WHATWG = Mozilla, Opera and Apple
(Safari)
✦ 2006... “Can we use your Spec for HTML5,
pretty please?” - W3C
✦ Working draft not W3C recommendation

22. www.whatwg.org

23. HTML5 Core

24. HTML5 Core
✦ More human readable markup

25. HTML5 Core
✦ More human readable markup
✦ Audio and video tags (plugin free)

26. HTML5 Core
✦ More human readable markup
✦ Audio and video tags (plugin free)
✦ 2D Bitmap drawing format (canvas)

27. HTML5 Core
✦ More human readable markup
✦ Audio and video tags (plugin free)
✦ 2D Bitmap drawing format (canvas)
✦ Remove presentational elements (center, font)

28. HTML5 Core
✦ More human readable markup
✦ Audio and video tags (plugin free)
✦ 2D Bitmap drawing format (canvas)
✦ Remove presentational elements (center, font)
✦ Disallows direct table layout & removes
frames

29. caniuse.com

30. Semantic Structure
<body>
<section id="wrapper">
<header>
<h1>ContentEditable</h1>
</header>
<article>
<section>
<p> A grey outline on hover.</p>
</section>
</article>
</body>

31. Semantic Structure
<body>
<section id="wrapper">
<header>
<h1>ContentEditable</h1>
</header>
<article>
<section>
<p> A grey outline on hover.</p>
</section>
</article>
</body>

32. Semantic Structure
<body>
<section id="wrapper">
<header>
<h1>ContentEditable</h1>
</header>
<article>
<section>
<p> A grey outline on hover.</p>
</section>
</article>
</body>

33. Semantic Structure
<body>
<section id="wrapper">
<header>
<h1>ContentEditable</h1>
</header>
<article>
<section>
<p> A grey outline on hover.</p>
</section>
</article>
</body>

34. Semantic Structure
<body>
<section id="wrapper">
<header>
<h1>ContentEditable</h1>
</header>
<article>
<section>
<p> A grey outline on hover.</p>
</section>
</article>
</body>

35. ContentEditable

36. Audio Tag

37. Audio Tag
✦ src — a valid URL specifying the content
source.

38. Audio Tag
✦ src — a valid URL specifying the content
source.
✦ autoplay — a boolean specifying whether the
file should play as soon as it can.

39. Audio Tag
✦ src — a valid URL specifying the content
source.
✦ autoplay — a boolean specifying whether the
file should play as soon as it can.
✦ loop — a boolean specifying whether the file
should be repeatedly played.

40. Audio Tag
✦ src — a valid URL specifying the content
source.
✦ autoplay — a boolean specifying whether the
file should play as soon as it can.
✦ loop — a boolean specifying whether the file
should be repeatedly played.
✦ controls — a boolean specifying whether the
browser should display its default media
controls.

41. Audio Tag
✦ src — a valid URL specifying the content
source.
✦ autoplay — a boolean specifying whether the
file should play as soon as it can.
✦ loop — a boolean specifying whether the file
should be repeatedly played.
✦ controls — a boolean specifying whether the
browser should display its default media
controls.
✦ preload — none / metadata / auto — where
'metadata' means preload just the metadata
and 'auto' leaves the browser to decide
whether to preload the whole file.

42. Audio Tag
✦ Replace .ogg with .mp3 for Safari
✦ Until standard provide Flash alternative

43. Canvas Element
✦ Replacement for plugin-dependent 2D
drawing and animation features in browsers
✦ Draw graphs
✦ Create animations
✦ Create games

46. CSS3
✦ Time, time, time
✦ Fonts, fonts, fonts
✦ Reducing images, improving accessibility

47. Text Shadow
h2 {text-shadow: x-offset y-offset blur-radius
#000;}
h2 {text-shadow: 1px 1px 5px #000;}

48. Text Shadow
h2 {text-shadow: x-offset y-offset blur-radius
#000;}
h2 {text-shadow: 1px 1px 5px #000;}

50. Examples of other
CSS3 Usage

51. This example is creates a graph using
nothing but CSS3

52. This example is uses CSS3 to create an
interactive cube with Popouts

53. This example uses a simple CSS3 text
shadow for 3D effect (wear glasses)

54. 3D Effect
span {
text-shadow: -0.06em 0 red, 0.06em 0 cyan;
letter-spacing: 0.08em;
}

55. Web Typography
✦ @font-face
✦ Text-Shadow
✦ MultiColumn Text

57. This example is using the Action Man
@font-face kit from Font Squirrel

58. chromeexperiments.com

59. hardboiledwebdesign.com

60. THANK YOU
Jason Hando
jason@utopiainternet.com