An introduction to the new features brought by HTML 5 and CSS 3. Slides from my presentation at the May 2010 Kabisa Knowledge Session.

1. HTML 5 & CSS 3
Kabisa Knowledge Session - May 21, 2010
{ Agile Development } { Ruby on Rails } { Java / J2EE }

2. HTML 5 & CSS 3
A brief overview
Modular
Not based on SGML
Inline SVG
Support for PUT and DELETE
Custom data attributes
{ Agile Development } { Ruby on Rails } { Java / J2EE }

3. HTML 5 & CSS 3
HTML 5 Features
Better Semantics
Canvas
Input Types
Form Validation
Media Elements
Drag & Drop
Local Storage
Geolocation
Web Sockets
Microdata
{ Agile Development } { Ruby on Rails } { Java / J2EE }

4. HTML 5 & CSS 3
Better Semantics
<div id=”header”> <header>
<div id=”nav”> <nav>
<div id=”article”> <div id=”side”> <section> <aside>
<article>
<div id=”footer”> <footer>
{ Agile Development } { Ruby on Rails } { Java / J2EE }

5. HTML 5 & CSS 3
Better Semantics
Figure <figure>
Group figures
Captions
Code blocks
Essential content
<figcaption>
Nom Nom Nom
{ Agile Development } { Ruby on Rails } { Java / J2EE }

6. HTML 5 & CSS 3
Better Semantics
Progress
• <progress max=”100”><span>51</span>%</progress>
• Completion of a task
• Value between 0 and given maximum
Meter
• Tickets sold: <meter min=”0” high=”1300” optimum=”2000”>1900</meter>
• Scalar measurement within known range
Time
• <time datetime=”2010-05-21T016:00+02:00”>21 May 2010 at 4 PM</time>
• Attribute: pubdate
{ Agile Development } { Ruby on Rails } { Java / J2EE }

7. HTML 5 & CSS 3
Better Semantics
Command
• Something a user may execute
Datagrid
• Non-tabular data
Mark
• Highlight some text
Output
• Output of an application
Ruby
• Ruby annotations for Asian languages
{ Agile Development } { Ruby on Rails } { Java / J2EE }

8. HTML 5 & CSS 3
Canvas
Drawing API
Create graphics on the fly
<canvas id=”super_square”>
fallback information
</canvas>
var canvas = document.getElementById(‘super_square’);
var context = canvas.getContext(‘2d’);
context.fillStyle = “rgba(101, 156, 64, 0.4)”;
context.fillRect(0, 0, 100, 100);
{ Agile Development } { Ruby on Rails } { Java / J2EE }

9. HTML 5 & CSS 3
Input Types
Defaults to “text’ when unsupported
<input type=”tel”>
<input type=”url”>
<input type=”email”>
<input type=”number”>
<input type=”search”>
Tel Url Email Number
{ Agile Development } { Ruby on Rails } { Java / J2EE }

10. HTML 5 & CSS 3
Input Types
<input type=”datetime”>
<input type=”date”>
<input type=”range”>
<input type=”color”>
<input type=”file multiple”>
Date Range File multiple
{ Agile Development } { Ruby on Rails } { Java / J2EE }

11. HTML 5 & CSS 3
Forms
Placeholders
Autofocus
Validations
{ Agile Development } { Ruby on Rails } { Java / J2EE }

12. HTML 5 & CSS 3
Media Elements
OGG Theora/Vorbis
• Chrome
• Firefox
• Opera
MPEG4 H.264/AAC
• Chrome
• IE 9
• Opera
• Safari
{ Agile Development } { Ruby on Rails } { Java / J2EE }

13. HTML 5 & CSS 3
Media Elements
WebM VP8
• Chrome
• Firefox
• IE 9
• Opera
• Safari??
{ Agile Development } { Ruby on Rails } { Java / J2EE }

14. HTML 5 & CSS 3
Drag & Drop
Images and links by default
Cancel default dragover (dragenter in IE)
Listen for drop event with dataTransfer object
It sucks
<div draggable=”true”></div>
addEvent(div, ‘dragstart’, function(e) {
e.dataTransfer.setData(‘foo’, ‘bar’);
}, true);
addEvent(div, ‘dragend’, function(e) {
e.dataTransfer.getData(‘foo’);
}, true);
{ Agile Development } { Ruby on Rails } { Java / J2EE }

15. HTML 5 & CSS 3
Local Storage
localStorage & sessionStorage
Pro cookies
Key - Value
String only
Megabytes of data
try {
localStorage.setItem(“wants_cookies”, “a whole box!”);
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert(“You have way too much cookie boxes, go away.”);
}
}
{ Agile Development } { Ruby on Rails } { Java / J2EE }

16. HTML 5 & CSS 3
Local Storage
WEB SQL
Transactions
Client-side SQLite
var db = openDatabase(‘food’, ‘1.1’, ‘A whole database filled with food’, 1024);
db.transaction(function(tx) {
tx.executeSql(‘SELECT * FROM vegetables’, [], function(tx, results) {
for (i = 0l i < results.rows.length; i++) {
alert(results.rows.item(i).text);
}
});
});
{ Agile Development } { Ruby on Rails } { Java / J2EE }

17. HTML 5 & CSS 3
Local Storage
Offline Application Caching
Refer directly to cache
Offline storage
Event listeners online/offline
<html manifest=”cache.manifest”>
CACHE MANIFEST
images/logo.png
styles/screen.css
styles/print.css
{ Agile Development } { Ruby on Rails } { Java / J2EE }

18. HTML 5 & CSS 3
Geolocation
Find current coordinates of user
Track user
navigator.geolocation.getCurrentPosition(show_on_map, handle_error,
{enableHighAccuracy: true});
{ Agile Development } { Ruby on Rails } { Java / J2EE }

19. HTML 5 & CSS 3
Web Sockets
Bi-directional full-duplex communication
Increase scalability
Less connections
No need for Comet-like hacks
http://pusherapp.com
{ Agile Development } { Ruby on Rails } { Java / J2EE }

20. HTML 5 & CSS 3
Web Workers
Background JavaScript threads
Can not manipulate DOM
OS-level threads
Pass data through serialized objects
{ Agile Development } { Ruby on Rails } { Java / J2EE }

21. HTML 5 & CSS 3
Microdata
Additional semantics
Scoped name/value pairs
Custom vocabularies
Scopes
SEO
<section itemscope itemtype=”http://example.org/Person”>
<h1 itemprop=”name”>Kevin van Dijk</h1>
<img itemprop=”picture” src=”picture.jpg” alt=”Me”>
</section>
{ Agile Development } { Ruby on Rails } { Java / J2EE }

22. HTML 5 & CSS 3
CSS 3 Features
Opacity
RGBA & HSL/A Color
New Background Properties
New Border Properties
Shadows
New Text Properties
Fonts
Transformations
3D
Selectors
{ Agile Development } { Ruby on Rails } { Java / J2EE }

23. HTML 5 & CSS 3
Opacity
Adjust opacity of an element
Value between 0.0 and 1.0
Not supported in IE
div { background: #000; opacity: 0.6; }
{ Agile Development } { Ruby on Rails } { Java / J2EE }

24. HTML 5 & CSS 3
RGBA & HSL/A Color
RGB with alpha value
Hue, Saturation, Lightness with alpha value
Alpha value between 0.0 and 1.0
div { background: rgba(118, 187, 78, 0.4) }
div { background: hsla(40%, 95%, 95%, 0.5) }
{ Agile Development } { Ruby on Rails } { Java / J2EE }

25. HTML 5 & CSS 3
Backgrounds
Background-size
Multiple background images
div { background-size: 160px 98px; width: 500px; height: 98px; }
div { background: url(left.png) top left no-repeat,
background: url(right.png) top right no-repeat }
{ Agile Development } { Ruby on Rails } { Java / J2EE }

26. HTML 5 & CSS 3
Borders
Border image
Multiple border colors
Border radius
div { border-radius: 10px; }
{ Agile Development } { Ruby on Rails } { Java / J2EE }

27. HTML 5 & CSS 3
Text
Text overflow
Text shadow
Column width
Column gap
article { column-width: 100px; column-gap: 30px; }
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi ultrices tellus nec nibh adipiscing elit. Morbi ultrices tellus nec nibh
suscipit sit amet egestas nibh mollis. suscipit sit amet egestas nibh mollis.
Pellentesque eget lectus mauris. Nunc Pellentesque eget lectus mauris. Nunc
venenatis risus in magna ullamcorper vitae venenatis risus in magna ullamcorper vitae
mattis mauris ultricies. Praesent nisl eros, mattis mauris ultricies. Praesent nisl eros,
adipiscing in varius tempor, eleifend quis dolor. adipiscing in varius tempor, eleifend quis dolor.
Suspendisse at tellus eget erat sollicitudin Suspendisse at tellus eget erat sollicitudin
iaculis at quis eros. Fusce nibh neque, porttitor iaculis at quis eros. Fusce nibh neque, porttitor
vitae condimentum ac, condimentum id lacus. vitae condimentum ac, condimentum id lacus.
Fusce lorem leo, scelerisque a mollis eget, Fusce lorem leo, scelerisque a mollis eget,
convallis nec arcu. Praesent tincidunt est in arcu convallis nec arcu. Praesent tincidunt est in arcu
scelerisque mollis. Integer et turpis velit. scelerisque mollis. Integer et turpis velit.
Pellentesque malesuada, elit id mattis varius, Pellentesque malesuada, elit id mattis varius,
dolor lorem imperdiet tortor, vulputate aliquam dolor lorem imperdiet tortor, vulputate aliquam
tellus risus vitae felis. Vestibulum egestas tellus risus vitae felis. Vestibulum egestas
gravida enim, ac tincidunt leo convallis in. Nam gravida enim, ac tincidunt leo convallis in. Nam
{ Agile Development } { Ruby on Rails } { Java / J2EE }

28. HTML 5 & CSS 3
Fonts
@font-face
Local or URL
TIF and OTF
EOT in IE4+
No need for SIFR or Cufon anymore
http://typekit.com/
{ Agile Development } { Ruby on Rails } { Java / J2EE }

29. HTML 5 & CSS 3
Transformations
Rotate
Scale
Skew
Translate
div { transform: rotate(45deg); }
{ Agile Development } { Ruby on Rails } { Java / J2EE }

30. HTML 5 & CSS 3
Transitions
Animate properties
Configurable duration
/* Fade out on hover */
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}
{ Agile Development } { Ruby on Rails } { Java / J2EE }

31. HTML 5 & CSS 3
Selectors
Already in use by many JS libraries
e[attribute], e[attribute=value]
:first-child, :last-child, :link, :visited
:nth-child(), :only-child, :after, :before
:first-of-type, :last-of-type
:only-of-type
:empty, :not()
:target, :enabled, :disabled, :checked
{ Agile Development } { Ruby on Rails } { Java / J2EE }

32. HTML 5 & CSS 3
Media Queries
Target specific range of devices
Does not validate
.blog {
font-size: 1.1em;
line-height: 1.6em;
color: #fff;
width: 100%;
}
@media all and (min-width: 20em) {
.blog {
font-size: 1.1em;
line-height: 1.6em;
color: #fff;
width: 100%;
}
}
{ Agile Development } { Ruby on Rails } { Java / J2EE }

33. HTML 5 & CSS 3
3D
Only in Chrome & Safari
Perspective
Distance in pixels
Rotate3D
Rotate three-dimensional
Translate3D
Move along three axes
Scale3D
Scale in three dimensions
{ Agile Development } { Ruby on Rails } { Java / J2EE }

34. HTML 5 & CSS 3
When to Use?
IE 7
IE 8 A better future ahead
IE 9
Firefox 3.5
Firefox 3.7
Opera 10.50
Safari 4
Chrome 4
http://html5readiness.com
{ Agile Development } { Ruby on Rails } { Java / J2EE }

35. HTML 5 & CSS 3
When to Use?
A better future ahead
http://caniuse.com
{ Agile Development } { Ruby on Rails } { Java / J2EE }

36. HTML 5 & CSS 3
Progressive Enhancement
Websites do not have to look the same in every browser
Progressive Enhancement != Graceful Degradation
Do not lock anybody out (not even IE 6)
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
Courtesy of alistapart.com
{ Agile Development } { Ruby on Rails } { Java / J2EE }

37. HTML 5 & CSS 3
Modernizr
Test-Driven progressive enhancement
Detect support for CSS 3 properties
Feature detection
Add support for HTML 5 elements
{ Agile Development } { Ruby on Rails } { Java / J2EE }

38. HTML 5 & CSS 3
Discussion
!?
{ Agile Development } { Ruby on Rails } { Java / J2EE }

39. { Agile Development } { Ruby on Rails } { Java / J2EE }