Loading…

HTML5 + CSS3 presentation

As a designer, in this presentation I focus on front-end and user experience features.

Fifth time’s a charm?

HTML5 et al. and user interface design

Marcin Wichary

What is HTML5?

The term “HTML5” is very specific. However, these days it oftentimes means what “Ajax” used to a while ago – any new cool Web technology.

“HTML5” = HTML5 + CSS3 + JS, actually

For example, people thought Pac-Man doodle was HTML5, but there was actually very little HTML5 in there. It’s all old tech!

Come see my talk tomorrow at 12am

HTML5 additions

We’re going to split it into seven arbitrary parts. We’ll focus more on front-end stuff because I’m a designer and because they are easier to demo.

Semantics
Typography
Visuals
Transitions, transforms and animations
Multimedia
Nuts and bolts
Desktop experience

We’re starting with semantics: new tags, tag parameters, and other markupy things.

Semantics

HTML 28 new tags

HTML5 has many new tags. Some of them are not supported yet. We won’t talk about all of them.

Structure

<section> + <article> + <header> + <footer> + <nav> + <aside>
<hgroup>

Media

<audio> + <video> + <source>
<embed>
<canvas>

New content types

<details> + <summary>
<figure> + <figcaption>
<progress> + <meter>
<output>
<command>
<time>
<mark>

Typography

<ruby> + <rp> + <rt>
<wbr>

User interface

<menu>
<datalist>
<keygen>

HTML Own tags

In all browsers coming from good home, you can also invent and style your tags. For example, this presentations uses those below. Typically, though, it’s not a good idea. HTML5 tags should be enough for you.

<body>
  <div class='presentation'>
    <div class='slides'>
      <div class='slide'>
        <h1>
          Slide title
        </h1>
        <div class='contents'>
          Slide contents
        </div>
      </div>

      ...
    </div>
  </div>
</div>

div.presentation {
  background: black;
}
div.slides {
  ...
}
div.slide {
  position: absolute;
}

<body>
  <presentation>
    <slides>
      <slide>
        <header>
          Slide title
        </header>
        <section>
          Slide contents
        </section>
      </slide>
      
      ...
    </slides>
  </presentation>
</body>

presentation {
  background: black;
}
slides {
  ...
}
slide {
  position: absolute;
}

HTML Structural tags

This is an example of an HTML5 markup using new structural tags.

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>
  
  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>
  
  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
   
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
   
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <footer>
   Copyright © 2009.
  </footer>
</body>

HTML Tags that didn’t make it

These tags are deprecated. The highlighted one are still somewhat popular, so take note if you are using them today.

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<s>
<tt>
<u>
<xmp>

HTML New form field types

Very cool new form types. Many of them already pretty well supported and ready for use.

Implemented

<input type='range' value='0' min='0' max='50' > 

<input type='number' min='0' max='100' step='5'>

<input type='date' min='2010-08-14' max='2011-08-14'>

<input type='time'>

<input type='tel'
       pattern='^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$'>

<input type='email'>

Loading…<progress>Loading…</progress>

75% complete<progress value='75' max='100'>75% complete</progress>

40 days<meter value='40' min='0' max='100'>40 days</meter>

Not yet quite ready

<menu> 
<input type='color'> <input type='month'> <input type='week'> <input type='datetime'>

HTML Form field types on mobile

Some of the types make even more sense on mobile devices, where soft keyboard layout adjusts depending on the field type.

type='text'

type='email'

type='number'

type='tel'

HTML Form field additions

Forms come with a slew of interesting attributes too, and a way to style them.

<input autofocus>

<input type='text' placeholder='Search Google.com'>

<input type='text' required> 

<style>
  [required] {
    border-color: #88a;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
  }
</style>

<input type='email'> 

<style>
  [:invalid] {
    border-color: #e88;
    -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
  }
</style>

HTML New link relations

Links are different and HTML5 recognizes that. Various new relationship variants (not all are listed here) allow the browser to treat links differently depending on their role.

<link rel='alternate' type='application/rss+xml' href='http://myblog.com/feed' />
<link rel='icon' href='/favicon.ico' />
<link rel='pingback' href='http://myblog.com/xmlrpc.php'>
<link rel='prefetch' href='http://myblog.com/main.php'>
...

<a rel='nofollow' href='http://notmysite.com/sample'>wannabe</a>
<a rel='archives' href='http://myblog.com/archives'>old posts</a>
<a rel='external' href='http://notmysite.com'>tutorial</a>
<a rel='license' href='http://www.apache.org/licenses/LICENSE-2.0'>license</a>
<a rel='tag' href='http://myblog.com/category/games'>games posts</a>
...

<a href='http://www.ftd.com' ping='/gen_204?loginfo'>FTD.COM - Flowers</a>

HTML ARIA accessibility attributes

ARIA allows to describe custom HTML/CSS/JS widgets in a way that is understood by assistive technology users.

<ul id='tree' role='tree' tabindex='0' aria-labelledby='tree-label'>
  <li role='treeitem' tabindex='-1' aria-expanded='true'>Fruits</li>
  <li role='group'>
    <ul>
      <li role='treeitem' tabindex='-1'>Oranges</li>
      <li role='treeitem' tabindex='-1'>Pineapples</li>
      ...
    </ul>
  </li>
</ul>

HTML Microdata

Microdata can help with your pages being understood by machines/crawlers in additions to your visitors.

<div itemscope itemtype='http://example.org/band'>
 <p>My name is <span itemprop='name'>Neil</span>.</p>
 <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p>
 <p>I am <span itemprop='nationality'>British</span>.</p>
</div>

CSS3 introduces a number of interesting typographical additions.

Typography

CSS New font support

You can finally use any typeface, not only select from the ones installed on user’s computer. This presentation uses a typeface called Vitesse.

@font-face { 
  font-family: 'VitesseSans-Light'; 
  src: url(fonts/VitesseSans-Light.otf); 
}
@font-face { 
  font-family: 'VitesseSans-Book'; 
  src: url(fonts/VitesseSans-Book.otf); 
}
@font-face { 
  font-family: 'VitesseSans-Medium'; 
  src: url(fonts/VitesseSans-Medium.otf); 
}

header {
  font-family: 'VitesseSans-Book';
}

Vitesse Sans: Light Book Medium

CSS Text wrapping

New wrapping style allows to gracefully remove the last part of text and replace it with an ellipsis.

div {
  text-overflow: ellipsis;
}

A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Play with the slider on this and further pages!

CSS Word wrapping

You can now have your browser break words for you automatically instead of having to insert wbrs manually here and there.

div {
  word-wrap: break-word;
}

Pneumonoultramicroscopicsilicovolcanoconiosis is a deadly condition. Pneumonoultramicroscopicsilicovolcanoconiosis is a deadly condition.

Play with the slider on this and further pages!

CSS Columns

You can also use columns without having to reformat text yourself. There are many more interesting related styles than presented here.

-webkit-column-count: 2;  
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

In March 1936, an unusual confluence of forces occurred in Santa Clara County.

Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.

Then came the wind.

It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.

This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...

CSS Text stroke

You can use text stroke to create text outline with a different colour.

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 0.00px;  
}

Text stroke example

Many new visual styles in CSS3. Note: A lot of these are only proposed CSS extensions.

Visuals

CSS Opacity

We can finally use separate opacity for the element’s colour and background. As a matter of fact, you can use rgba with alpha value whenever you could use rgb before.

  color: rgba(255, 0, 0, );  
  background: rgba(0, 0, 255, );

Independent opacity

CSS Hue/saturation/luminance colour model

This might note be very useful except for in prototyping, but you can also use different models than RGB: HSL and CMYK.

color: hsla(
  ,  
  %,  
  %,  
  );

HSL example

CSS Rounded corners

Finally, rounded corners without having to create images and wrestle with nested <div>s!

border-radius: 0px;  
 border-width: 1px;

Example

CSS Gradients

Gradients, and very flexible too: linear (can go in any direction and contain many colour stops) and radial

background: -webkit-gradient(linear, left top, left bottom, 
                             from(#00abeb), to(white), 
                             color-stop(0.5, white), color-stop(0.5, #66cc00))

background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))

CSS Shadows

Three new native shadow types: for text, outside the element, and inside the element.

text-shadow: 
  rgba(0, 0, 0, 0.25) 
  0px  
  0px  
  0px;      
-webkit-box-shadow: 
  rgba(0, 0, 128, 0.25) 
  0px  
  0px  
  0px; 
-webkit-box-shadow: inset 
  rgba(0, 0, 0, 0.5) 
  0px  
  0px  
  0px;

Shadows example

CSS Instant Web 2.0 (just add sliders)

A bit of fun, and introducing a new style: box-reflect, for an instant “wet floor” effect.

text-shadow: rgba(0, 0, 0, 0.33) 0 0px 0px;  

background: 
  -webkit-gradient(linear, left top, left bottom,  
                   from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0))); 

border-radius: 0px;  

-webkit-box-reflect: below 10px
  -webkit-gradient(linear, left top, left bottom,  
                   from(transparent), to(rgba(255, 255, 255, 0)));

Web 2.0 Logo Creatr

CSS Border images

CSS3 allows you to use any image as border in a clever way.

border-width: 31px;
-webkit-border-image: url(images/border-image.png) 31  ;

Resize me! »

CSS Background enhancements

You can now specify sizing style of background, the type of composition (many more options than here), and also have multiple backgrounds on one element.

Background sizing

#logo {
  background: url(logo.gif) center center no-repeat;
  background-size: ;
  background-composite: ;
}

Resize me! »

Multiple backgrounds

div {
  background: url(zippy-plus.png) 10px center no-repeat, 
              url(logo.gif) center center repeat;
  background-size: 12px, 100px;
}

CSS Masking

You can use arbitrary graphic elements with alpha channel to mask other elements on the page. Since gradients can be use in place of graphics in CSS, you can utilize them too here.

-webkit-mask:

CSS Flexible box model

Two quick examples of the otherwise interesting flexible box model. Here three successive divs can be arranged vertically or horizontally (like a table) with just a change of one CSS property.

.canvas {
  display: -webkit-box;
  -webkit-box-orient: ;
}
.canvas .one, .canvas .two {
  -webkit-box-flex: 1;
}
.canvas .three {
  -webkit-box-flex: 3;
}

Box one

Box two

Box three

CSS Flexible box model

Another example: you can easily center the element both horizontally and vertically.

  .canvas {
    display: -webkit-box;
    -webkit-box-pack: ;
    -webkit-box-align: ;
  }

Test

CSS Scrollbar styling

You can even style scrollbars!

::-webkit-resizer {
    background-image: url(resources/resizer.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}
::-webkit-scrollbar-track:horizontal:disabled:corner-present {
    margin-right: 5px;
}            
...

Just
some
random
content

CSS3 adds very powerful features allowing to move and animate things with a lot of freedom.

Transitions,
transforms
and animations

CSS Transitions

With an addition of one simple line of CSS, you can make previously instant change be smoothly interpolated over a given amount of time.

#box.left {
  margin-left: 0;
}
#box.right {
  margin-left: 1000px;
}

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right';

#box {
  -webkit-transition: margin-left 1s ease-in-out;
}  

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right';

CSS Animations

Going even further, you can automate some of the transitions, although hopefully for a better use than the one below!

@-webkit-keyframes pulse {
 from {
   opacity: 0;
   font-size: 100%;
 }
 to {
   opacity: 1;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

Pulse!

HTML Animation example

CSS 2D/3D transforms

You can also easily transform (rotate, scale) an element, in two and even three dimensions!

Hover over me:

-webkit-transform: rotateY(45deg);            
-webkit-transform: scaleX(25deg);            
-webkit-transform: translate3d(0, 0, 90deg);            
-webkit-perspective: 500px;

#threed-example {
  -webkit-transform: rotateZ(5deg);

  -webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
  -webkit-transform: rotateZ(-5deg);
}

Now press 3!

CSS 3D transforms/transitions example

This is a pretty goofy example of what’s now possibly in CSS. Note you can still interact with the elements – try selecting some text while it’s rotating!

CSS 3D transforms/transitions example

Here is a one doodle proposal that uses 3D rotation with perspective.

CSS 2D transforms

A more simple/sane use of 2D transforms: The two thumbnails here are actually iframes, shrunk by 50%. This way you don’t have to create image thumbnails and keep them up-to-date manually.

-webkit-transform: scale(0.5); 
-webkit-transform-origin: 0 0;

CSS 2D transforms

Another example: Using vertical text in tables.

-webkit-transform: rotateZ(-90deg); 
-webkit-transform-origin: 0 0;

	First	Second
Greek	alpha	beta
Greek	gamma	delta
Military	alpha	bravo
Military	charlie	delta

Next in line are powerful new multimedia features of HTML5.

Multimedia

HTML Audio + video

Audio and video playback are now available without having to use Flash. The containers are proper citizens of DOM, and many things can be controlled by JavaScript.

<audio src='sound.wav'>Audio is not supported.</audio>

<video autoplay controls src='movie.mov'></video>
document.getElementById('video').play();

HTML Video example

This page shows the versatility of video elements when combined with CSS3.

HTML Canvas

canvas allows you to essentially create your own image pixel by pixel using JavaScript.

<canvas id='canvas' width='838' height='220'></canvas>

<script>
  var canvasContext = document.getElementById('canvas').getContext('2d');
  canvasContext.fillRect(250, 25, 150, 100);
  
  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script>

HTML Canvas example

This is an example of recreating old-school palette shifting using canvas.

HTML SVG

SVG is roughly a vector equivalent of canvas. In HTML5, it becomes a regular citizen of the page, instead of having to include a separate file. Notice how zooming in (using CSS transform) does not introduce pixels.

<svg>
  <circle id='my-circle' class='important' cx='50%' cy='50%' r='100' 
          fill='url(#myGradient)' >
</svg>

A short intermission covering new (or, not so new…) low-level features.

Nuts and bolts

JS Finding elements

New ways to find elements in DOM (some of them have been around for a while, but only now are widely supported).

Finding elements by class

var el = document.getElementById('section1');
el.focus();

var els = document.getElementByTagName('div');
els[0].focus();

var els = document.getElementsByClassName('section');
els[0].focus();

Finding elements by CSS syntax (Selectors API)

var els = document.querySelector('table.test > tr > td');
var els = document.querySelectorAll('ul li:nth-child(odd)');

Finding currently focused element

var el = document.activeElement;

CSS New selectors (CSS2, actually)

Also, new cool CSS selectors; many more than pictured here… (a lot have been available in CSS2 already).

Odds and evens

.row:nth-child(even) {
  background: #dde;
}
.row:nth-child(odd) {
  background: white;
}

Row 1

Row 2

Row 3

Row 4

Image-like display

div {
  display: inline-block;
}

Specific attributes

input[type='text'] {
  background: #eee;
}

Negation

:not(.box) {
  color: #00c; 
}            
:not(span) {
  display: block; 
}

More specific targetting

h3:first-child { ... }

div.text > div { ... } 
h3 + header { ... }

A lot of HTML5 features are designed to bring the Web closer to the native desktop experience (and Web apps closer to “real” apps).

Desktop experience

JS Notifications

Notifications are a nicer alternative to modal alert() dialog boxes; currently only supported by Chrome.

if (window.webkitNotifications.checkPermission() == 0) {
  window.webkitNotifications.createNotification(picture, title, text).show();
} else {
  window.webkitNotifications.requestPermission();
}

HTML JS Offline access/Application cache

HTML5 allows to specify which files should be saved (permanently cached) for future offline access. As an example, iPhone version of Gmail works even without access to the Web thanks to this feature.

<html manifest='cache-manifest'>
<event-source src='server.cgi'>

window.applicationCache.addEventListener('updateReady', updateReady, false);

var online = navigator.onLine;

CACHE MANIFEST

# Version 1

CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

JS Browsing history

HTML5 provides a native interface to change no-page-reload browsing history (back/forward button, etc.) without resorting to ugly hacks using URL fragment (#).

var stateObj = { foo: "bar" };
window.history.pushState(stateObj, "Page 2", "bar.html");

window.onpopstate = function(event) {
  handleHistoryState(event.state);
}

JS Local storage

Cookies and cache are rather volatile. HTML5 introduces a better, more stable way to save data on the local machine.

window.sessionStorage['hash'] = hash;

window.localStorage.setItem('name', 'Marcin Wichary');
document.getElementById('name').value = window.localStorage.getItem('name');
window.localStorage.removeItem('name');

JS Local storage via SQL

You can also save data on the local machine using the familiar SQL syntax.

var database = openDatabase('Database Name', 'Database Version');

database.executeSql('SELECT * FROM test', successCallback);
database.executeSql('DROP TABLE test', successCallback);

JS Geolocation

Support for geolocation means that you can know your user’s physical position (if she allows you to have it). Note that this makes most sense on GPS-equipped mobile devices. Click on the upper-left button to see where you are!

navigator.geolocation.getCurrentPosition(showMap);

function showMap(position) {
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  var alt = position.coords.altitude;
  var heading = position.coords.heading;
  var speed = position.coords.speed;
}

HTML JS Drag and drop

Allowing powerful and customizable dragging and dropping between windows of your application, different applications, and applications and desktop.

document.addEventListener('dragstart', function(event) {
   event.dataTransfer.setData('image/png', getImageRepresentation());
   event.dataTransfer.setData('text/html', getTextRepresentation());
}, false);

And more!

Many more things we didn’t get a chance to talk about…

more styles and box model changes
sandboxed and seamless iframes
accessibility + voice control
accelerometer support
WebGL (3D graphics)
filesystem support
window timing
Web workers (multi-threading)
Web sockets (persistent connection)
raw JavaScript speed

Yeah, really.

What does it mean
for us?

Can we really tell?

This is Atari 2600 from 1977. An incredibly simple piece of home videogame hardware.

Can we really tell?

Games in 1977 looked very simple. By 1982, they have gotten much more sophisticated – which surprised everyone, including the very creators of Atari 2600.

Video Olympics, 1977

Pitfall, 1982

Richer visuals and interaction

(no notes)

“HTML wants to be square”
less latency/traffic
breaking the page metaphor
typography
refined, subtle details
“natural” user interfaces

Desktop/client experience

(no notes)

offline access
data storage
drag and drop
support for standalone apps in browsers
more work on the client

A brief history of HTML et al.

Note a big hole between 1999 and 2010 where we got sidetracked by the promise of rewriting the errors of our past with XHTML. Eventually we realized that we have to embrace and extend HTML 4, warts and all.

1991 HTML
1994 HTML 2.0
1996 CSS + JavaScript
1997 HTML 3.2 + HTML 4.0
1999 HTML 4.01
2000 XHTML
2002 XHTML 2.0

2010 HTML5

Where can we use it today?

Safari and Chrome lead in front-end HTML5 features. Firefox leads in back-end. Opera… nobody really cares. Internet Explorer is catching up, especially with version 9. The prefixes below are custom prefixes for cutting edge CSS features.

Safari + WebKit

-webkit-...

Chrome

-webkit-...

Firefox

-moz-...

Where can we use it today?

(no notes)

tier 1 mobile applications
Chrome/Firefox extensions
prototyping/demos
internal apps
Google Chrome Frame
some external apps

Progressive enhancement

(no notes)

www.dowebsitesneedtolookexactlythesameineverybrowser.com

How can we influence it?

There are ways to shape the future of HTML and CSS at Google!

open standards, mutual feedback
Google Gears
Chrome/WebKit
HTML5 group

Thanks!

Follow these websites for more info!

HTML5 + CSS3 presentation

Fifth time’s a charm?

HTML5 et al. and user interface design

What is HTML5?

Semantics

Structure

Media

New content types

Typography

User interface

Implemented

Not yet quite ready

Typography

Visuals

Background sizing

Multiple backgrounds

Transitions,transformsand animations

Multimedia

Nuts and bolts

Finding elements by class

Finding elements by CSS syntax (Selectors API)

Finding currently focused element

Odds and evens

Image-like display

Specific attributes

Negation

More specific targetting

Desktop experience

What does it mean for us?

Transitions,
transforms
and animations

What does it mean
for us?