The web standards gentleman: a matter of (evolving) standards)

The web standards gentleman:
A matter of (evolving) standards

Chris Mills, April 6th 2011

Who the hell am I?

• Opera dev
relations guy
• Open standards
evangelist
• Tech author and
editor
• Web education
agitator
• Metal drummer

A matter of standards

of standards evolution
of HTML5
of CSS3
of gentlemanly conduct!

Gentleman spotting...

✓

Gentleman spotting...

✘

Your style is defined by what makes
you feel most comfortable.

http://www.therulesofagentleman.com/no-35/

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

Brief history: standards?

•HTML3 standardised 1995,
HTML4.01 finished 2001
•CSS1 standardised 1996, CSS2
in followed in 1998, CSS2.1 in
1999

There's nothing wrong
with HTML4 and CSS2

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

This led to...

•Inefficiency
•Inaccessibility
•Inconsistency
•Incompatibility

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

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

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

HTML5 and CSS3
have more bling!

Common Sense Always Wins.
Common Sense is the new black.


Why are HTML5 and
CSS3 so good for us?

The web standards gentleman: a matter of (evolving) standards)

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

Shut the computer and pick up a
newspaper every once in a while.


New markup: better
semantics

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>

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

New HTML5 markup

<header></header>
<nav></nav>
<section id="main">
  <article></article>
  <article></article>
    ...
</section>
<aside></aside>
<footer></footer>

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.

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

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

The line between confidence and
arrogance is very thin.


Flash has its uses

•Video
•Custom fonts on pages (siFR)
•Animation

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

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>

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>

Native video rocks!

•Plays nicely with other open
standards
•Better accessibility features
•Don't need to use Flash
•API for easy customisation

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;
}

Web fonts

p {
  font‐family: "My font";
}

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

Animations

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

Animations

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

Learn from those who came before
you.


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

HTML5 form controls

<input type=date>
<input type=color>
<input type=slider>

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

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

HTML5 gives you this

<input type=text required 
       pattern="[A‐z]{1,20} [A‐z]{1,20}">

There are other
advantages too

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
}

Opening the door for a lady is not
optional, and will never go out of
style ~ Andy Rutledge
Please Note: This means any door.


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

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;
}

Brunch and Brinner are acceptable
meal choices.
Please Note: Bacon needs to be
present at both.


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

Media queries

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

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

Viewport

<meta name="viewport"
 content="width=500, user‐scalable=no">

@viewport {
  width: 500px;
  user‐zoom: fixed;
}

Media features

width/min-width/
max-width
user-zoom

height/min-height/
max-height
orientation

zoom/min-zoom/
max-zoom

CSS multi-col

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

A gentleman is one who puts more
into the world than he takes out.
~ George Bernard Shaw


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

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

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

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

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

I say use them now, as
much as possible!

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

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/

The web standards gentleman: a matter of (evolving) standards)

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (10)

Similar to The web standards gentleman: a matter of (evolving) standards)

Similar to The web standards gentleman: a matter of (evolving) standards) (20)

More from Chris Mills

More from Chris Mills (20)

Recently uploaded

Recently uploaded (20)

The web standards gentleman: a matter of (evolving) standards)

Editor's Notes