This talk discusses standards evolution, HTML5 and CSS3 in detail. Starting with the history of HTML and CSS, it goes on to show how HTML5 and CSS3 were developed, why they were necessary, the problems they aim to solve, what the main new features are and why they are so useful, and how we can start using these features in the real world, right now. It also provides advice for the discerning web standards gentleman.

1. The web standards gentleman:
A matter of (evolving) standards
Chris Mills, April 6th 2011

2. Who the hell am I?
• Opera dev
relations guy
• Open standards
evangelist
• Tech author and
editor
• Web education
agitator
• Metal drummer

3. A matter of standards
of standards evolution
of HTML5
of CSS3
of gentlemanly conduct!

4. Gentleman spotting...

5. Gentleman spotting...
✓

6. Gentleman spotting...

7. Gentleman spotting...
✘

8. Gentleman spotting...

9. Gentleman spotting...
✓

10. Gentleman spotting...

11. Gentleman spotting...
✘

12. Gentleman spotting...

13. Gentleman spotting...
✘

14. Your style is defined by what makes
you feel most comfortable.
http://www.therulesofagentleman.com/no-35/

15. How did this stuff evolve?

16. Brief history: inception
•HTML first proposed around
1990/1 by Tim Berners-Lee
•CSS invented by Håkon Wium
Lie and Bert Bos 1994/5

17. Brief history: standards?
•HTML3 standardised 1995,
HTML4.01 finished 2001
•CSS1 standardised 1996, CSS2
in followed in 1998, CSS2.1 in
1999

18. Finished! What's next?

19. There's nothing wrong
with HTML4 and CSS2

20. But things don't
stand still!
•People started to use HTML/
CSS for things they weren't
intended for
•Browsers implemented new
features
•New browsing devices
appeared

21. This led to...
•Inefficiency
•Inaccessibility
•Inconsistency
•Incompatibility

22. CSS3
•CSS3 work started around
1999
•Over 40 modules as of
03-2011
•Some are more stable than
others

23. HTML5
•W3C decided the future was
XHTML
•This didn't go down well with
the web community
•HTML5 started by WHATWG
around 2004
•Adopted by W3C 2008

24. HTML5 and CSS3
designed to
•Be backwards compatible
•Compete with plugin tech
•Be more in keeping with what
we are actually doing
•Add more efficient, powerful
features
•Be as accessible as possible

25. HTML5 and CSS3
have more bling!

26. Common Sense Always Wins.
Common Sense is the new black.
http://www.therulesofagentleman.com/no-1/

27. Why are HTML5 and
CSS3 so good for us?

30. There's many reasons a
gentleman should care
•More consistency
•Less presentational/
unsemantic markup
•Better built in accessibility
•Less JavaScript/Photoshop
•Less Flash
•More tipples

31. Shut the computer and pick up a
newspaper every once in a while.
http://www.therulesofagentleman.com/no-12/

32. New markup: better
semantics

33. A typical web site
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div class="article"></div>
<div class="article"></div>
...
</div>
<div id="footer"></div>

34. Common classes and IDs
Google and Opera carried out
studies:
• http://code.google.com/webstats/
2005-12/classes.html
• http://devfiles.myopera.com/articles/
572/idlist-url.htm
• http://devfiles.myopera.com/articles/
572/classlist-url.htm

35. Most common IDs

36. Most common classes

37. New HTML5 markup
<header></header>
<nav></nav>
<section id="main">
<article></article>
<article></article>
...
</section>
<aside></aside>
<footer></footer>

38. Where does this leave the
humble Div?
Use it for anything that isn’t
covered by the other new
elements, and is just a general
grouping for styling purposes.

39. Lax syntax?
•You don't need to quote
attribute values
•Or self-close empty elements
•You can minimise attributes
•You can mix lower and upper
case
•& have a really small doctype

40. Lax syntax?
•Thismore accurately reflects
what we REALLY do
•Not what the W3C thinks we
should do
•The browser fills things in for
you
•HTML5 defines error handling

41. The line between confidence and
arrogance is very thin.
http://www.therulesofagentleman.com/no-6/

42. Less Flash, more
control

43. Flash has its uses
•Video
•Custom fonts on pages (siFR)
•Animation

44. But HTML5 and CSS3 can
fill many needs here
•<video>
•Web Fonts
•CSS3 transitions and
animation
•<canvas>

45. Old school video
<object width="425" height="344">
<param name="movie" value="http://www.example.com/
v/LtfQg4KkR88&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.example.com/v/
LtfQg4KkR88&hl=en&fs=1"
type="application/x‐shockwave‐flash"
allowfullscreen="true" width="425" height="344"></
embed>
</object>

46. Badass sexy new video
<video width="480px"
height="283px"
controls
poster="poster.png">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<p>Your browser doesn’t support HTML5 video. <a
href="video.webm">Download the video instead</a>.</
p>
</video>

47. Native video rocks!
•Plays nicely with other open
standards
•Better accessibility features
•Don't need to use Flash
•API for easy customisation

48. Web fonts
@font‐face {
font‐family: 'ActionIsRegular';
src: url('actionis‐webfont.eot?') format('eot'),
url('actionis‐webfont.woff') format('woff'),
url('actionis‐webfont.ttf')
format('truetype'),
url('actionis‐webfont.svg#webfontg3JxrxOm')
format('svg');
font‐weight: normal;
font‐style: normal;
}

49. Web fonts
p {
font‐family: "My font";
}

50. Web fonts also rock
•Download custom fonts along
with your web pages
•Solve our typography
nightmares, without having to
worry about hackish solutions
like siFR and Cufon

51. Animations
You can smoothly animate
features on your page using
CSS3:
•Based on state changes
(transitions)
•Or independent of anything
else (animations)

52. Animations
<canvas> also allows animation
•But it has a lot more power,
and its own problems
•And it's JS
•Different use cases...

53. Learn from those who came before
you.
http://www.therulesofagentleman.com/no-23/

54. Less JavaScript!

55. Designers don't like
scripting!
•HTML5 and CSS3 gives you a
whole bunch of behaviour
•Complicated form controls
•Form validation
•Animation (see earlier)
•Showing/hiding

56. HTML5 form controls
<input type=date>
<input type=color>
<input type=slider>

57. Client-side form
validation...
...used to be horrendous!

58. var str = "";
Who wants to write this
var elements = document.getElementsByTagName('input');
s**t?
// loop through all input elements in form
for(var i = 0; i < elements.length; i++) {
// check if element is mandatory; ie has a pattern
var pattern = elements.item(i).getAttribute('pattern');
if (pattern != null) {
var value = elements.item(i).value;
// validate the value of this element, using its defined
pattern
var offendingChar = value.match(pattern);
// if an invalid character is found or the element was left
empty

59. HTML5 gives you this
<input type=text required
pattern="[A‐z]{1,20} [A‐z]{1,20}">

60. There are other
advantages too

61. Showing/hiding
using :target
<li><a href="#target">Click me to target the
paragraph below</a></li>
<p id="target">I am targeted by the above link
when clicked</p>
p:target {
// I am applied to the paragraph when the link
// is clicked
}

62. Opening the door for a lady is not
optional, and will never go out of
style ~ Andy Rutledge
Please Note: This means any door.
http://www.therulesofagentleman.com/no-28/

63. Less Photoshop!

64. Programmatically is much
easier and more flexible
•Drop shadows
•Gradients
•Rounded corners
•Transparency

65. Examples
div {
text‐shadow: black 3px 3px 5px;
box‐shadow: black 4px 4px 5px;
background‐image: ‐o‐linear‐gradient(top
left,rgba(0,0,0,0),rgba(0,0,0,0.6));
background‐color: rgb(204,204,204);
border‐radius: 10px;
// opacity: 0.6;
}

66. Brunch and Brinner are acceptable
meal choices.
Please Note: Bacon needs to be
present at both.
http://www.therulesofagentleman.com/no-17/

67. Optimising layout

68. Controlling layouts
•Media queries: apply CSS
depending on media features
eg resolution, screen width
and height.
•Viewport: customise initial
display of pages on mobile
•Multi-column layout: easy
columns

69. Media queries
@media screen and (max‐width:480px) {
// applied when the browser width is 480px
// or less, AND when the media type is screen
}

70. mediaqueri.es

71. Media features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

72. Viewport
<meta name="viewport"
content="width=500, user‐scalable=no">
@viewport {
width: 500px;
user‐zoom: fixed;
}

73. Without viewport

74. With viewport

75. Media features
width/min-width/
max-width
user-zoom
height/min-height/
max-height
orientation
zoom/min-zoom/
max-zoom

76. CSS multi-col
div {
column‐width: 100px;
column‐count: 4;
column‐gap: 20px;
column‐rule: 2px solid #33c;
}
p#bottom {
break‐after: column;
}

77. A gentleman is one who puts more
into the world than he takes out.
~ George Bernard Shaw
http://www.therulesofagentleman.com/no-18/

78. When (and how) can we
start using these tools?

79. We've looked at spec
development
•Specs don't matter if browsers
don't have consistent support
•Browser adoption doesn't
matter if we don't care...
•...though more often this isn't
exactly the case
•Often we are not in the
position to use new features

80. Stuck between a rock and a
hard place?
•Older browsers don't support
this stuff
•Some of us are forced to
support them
•Many clients are still obsessed
with "pixel perfect layouts"
across all browsers

81. However
•Even IE9 supports most of it
•Most of it degrades gracefully
•You can work around many
problems (eg Modernizr,
Selectivizr)
•Depending on your client
needs

82. Besides
•"identicalacross every
browser" is outdated
•Impossible considering the
range of devices on the Web
•Flash doesn't work on iDevices
•IE6 is 10 years old

83. I say use them now, as
much as possible!

84. Thanks!
cmills@opera.com | @chrisdavidmills
http://dev.opera.com

85. Flickr credits...
Håkon pic: http://www.flickr.com/photos/friprog/3305250482/
Bert Bos pic: http://www.flickr.com/photos/tantek/85288202/
Tim Berners-Lee pic: http://www.flickr.com/photos/j-o-n-o/151830908/
Newspapers: http://www.flickr.com/photos/birdfarm/519230710/
Spongebob: http://www.flickr.com/photos/mafleen/3780072133/
Futuresplash disc: http://www.flickr.com/photos/monkeytime/4120229885/
JQuery old site: http://www.flickr.com/photos/philliecasablanca/2816530573/
Wooden blocks: http://www.flickr.com/photos/zscheyge/49012397/
Monkey pic: http://www.flickr.com/photos/dyanna/3202542828/
No Flash inside: http://www.flickr.com/photos/josefdunne/5410923901/
JavaScript books: http://www.flickr.com/photos/xhtmled/1536251128/
Photoshop: http://www.flickr.com/photos/didbygraham/541417137/
Human layout: http://www.flickr.com/photos/mythoto/5546666524/
Bike tools: http://www.flickr.com/photos/bre/552152780/
Angry bird: http://www.flickr.com/photos/ilamont/5538511847/
Slides licensed under http://creativecommons.org/licenses/by-sa/2.0/