A practical guide to building websites with HTML5 & CSS3

HTML5
CSS3
- Greetings. I’m a designer, nerd, htmler, csser. i’ve built many a wordpress site.
- Wordpress is HTML and CSS from top to bottom. from wp-admin to themes & plugins.
Wordpress3’s default theme twenty ten is HTML5—so I thought I’d show you how you can use
it now in your sites right now!
- covering a lot today so stop me if you have questions
- I’m no expert, just a fanboy. Every day I learn something new about HTML5 and CSS3, so
please use this opportunity to teach me a thing or two, too.

HTML5 CSS3

HTML5
New Elements
Forms
Semantics
Javascript

CSS3
Selectors
Properties
Fonts

I’m not covering everything as there’s so much! My aim today is to show you the useful bits
that I ﬁnd myself using quite often.

HTML5 CSS3
New Elements
Forms
Semantics
Javascript

HTML5
New Elements
Forms
Semantics
Javascript

CSS3
Selectors
Properties
Fonts


HTML5 CSS3
New Elements Selectors
Forms Properties
Semantics Fonts
Javascript

HTML5
New Elements
Forms
Semantics
Javascript

CSS3
Selectors
Properties
Fonts


WHATWG TF?

What is HTML5
- the next version of HTML
- html started in 1991 by TBL
- historically W3C is the governing body
- distracted by XML and so began the XHTML movement
- XHTML2.0 complete non-backward compatible rebuild, total disaster
- in 2004 some disgruntled ex w3c people formed the Web Hypertext Application Technology
Work Group WHATWG
- w3c = democratic vote
- WHATWG = ﬁnal decisions where made by one guy Ian Hickson
- lots of contributors but ﬁnal decision made by Iain Hickson
- but now everyone is playing nicely - W3C+WHATWG are combining their efforts

WHYTML5?

- Built on a set of design principles, key one being “Support Existing Content”
- Phrases like Don’t reinvent the wheel and Pave the cowpaths
- if there’s a common way designers are doing something—even if it isn’t the best way—it
should be put in the HTML5 standard. aka If it aint broke don’t ﬁx it.
- so html5 is built on existing standards and conventions
- make your life easier
- could mean your code could end looking a bit all over the place...
- make your code good looking, semantic and accessible
- as we move through you’ll realise why you should be using HTML5

You’re all familiar with this.
I spent many an angered hour trying to convince people this is the way to go!
Things have started to change. Huge advances in mobile technology has meant that we’re
having to surf the web like it’s 1999 again. High speed internet hasn’t made it into our
pockets.
The number of bytes and server calls are actually a concern again - who wants to pwn your
mobile data plans downloading characters and bytes...

That’s why this makes much more sense. It’s doing exactly the same thing as the previous
example but is so much slimmer.

For me HTML5 is more about semantics, usability and accessibility than syntax.

The smart HTML5 people have done some serious research into the way in which we write
HTML and noticed hundreds of regularly trodden paths.

embedding audio and video on websites is way more common now thanks to increased
bandwidth

Blogs are full of time based articles and sections.

The very layouts we create everyday contain headers, footers, navigation and sidebars.

And this is a high level view of how those semantics might pan out.

I’ll dive into each of the main structural elements - with reference to what the spec says and
show an example. This will be a quick-ﬁre run through. but these slides are available online
for further perusal.

<header>

Typically used to group a set of h1–h6 elements to mark up a page’s title with its subtitle or
tagline.
May contain more than just the section’s headings and subheadings — e.g., version history
information or publication date.

<header>

<header>
<h1>Dontcom</h1>
<h2>The home of Darren Wood</h2>
</header>

<nav>

The nav element is a section containing links to other documents or to parts within the
current document.
Not all groups of links on a page need to be in a nav element — only primary navigation links.
In particular, it is common for footers to have a list of links to various key parts of a site - you
wont need the nav element - the footer element will suffice.

<nav>
<nav>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/about”>About</a></li>
...
</ul>
</nav>

<aside>

Content that is tangentially related to the content around the aside element - considered
separate from that content.
Such sections are often represented as sidebars in printed typography.

<aside>
<aside>
<h2>Blogroll</h2>
<ul>
<li><a href=”#”>Keith</a></li>
<li><a href=”#”>Amber</a></li>
<li><a href=”#”>Kim</a></li>
</ul>
</aside>

<section>

Represents a generic document or application section.
A section is a thematic grouping of content, typically with a header, possibly with a footer.

Examples: chapters in a book, various tabbed pages in a tabbed dialog box, a home page
could be split into sections for an introduction, news items, contact information.

<section>
<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>

<article>

Forms an independent part of a document, page, or site.
A forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment,
or any other independent item of content.

Think of it as an item that can be syndicated via RSS or ATOM

<article>
<article>
<header>
<h1>Blog Post Title</h1>
<h2>Sub title</h2>
</header>
<p>Synergistically optimize flexible
communities via cross-‐unit
information. Objectively impact
bricks-‐and-‐clicks catalysts for
change rather than reliable.</p>
</article>

<footer>

Typically contains metadata about its enclosing section, such as who wrote it, links to related
documents, copyright data, etc.

<footer>

<footer>
<p>© Darren Wood 2010</p>
</footer>

<video>

Represents a video or movie.
Content may be nested inside the video element. User agents should not show this content to
the user. Authors should use this content to force older browsers to use a legacy video plugin
or to inform the user of how to access the video content.

type= search
email
url
tel
range
number
date
datetime
datetime-‐local
time
month
color

so far only webkit browsers and opera will support those types. But that’s OK, because other
browsers will just default to type=”text”. So USE these ﬁelds.

placeholder=”enter something here”
autofocus
required
autocomplete=”off”

SEMANTICS

- new elements means less divs
- richer meaning in documents
- helps SEO
- helps accessibility
- extensibility (think XML—creating new tags, etc)
- microformats

<a href=”/about”>
<h1>About Us</h1>
<h2>Learn more about what we do</h2>
</a>

awesome a elements

JAVASCRIPT

- HTML5 includes javascript stuff too
- I’m no programmer so I’ll be brief
- I haven’t used these things, I just saw them in a movie
- what’s interesting to note is that IE has been supporting a lot of these things for quite some
time. They did after all invent AJAX back in the IE5 days.

Drag & Drop

dragover
dragenter
drop
dataTransfer

Drag & Drop
HTML 5 DnD is based on Microsoft’s - Internet Explorer 5!
- you can see this now with attachments in gmail

Canvas

var canvas = document.getElementById("c"),
context = canvas.getContext("2d");

context.fillRect(10, 20, 200, 100);

Canvas
- environment for creating dynamic images
- drawing shapes
- ﬁling colours
- gradients/patterns
- all browsers except ie6, 7 &8. IE9 does support.

// x = 10, y = 20, width = 200, height = 100

Geolocation

navigator.geolocation.getCurrentPosition();

Geolocation
- your browser is capable of knowing where you are
- don’t ask me how.
- google maps uses it.

Get Elements by Class Name

document.getElementsByClassName('test')
document.querySelectorAll('.testClass')

getElementByClassName
- IE9
- like the name suggests—top one returns a node list of elements with a class containing test
- querySelectorAll() is similar to the way jquery selectors work.

Client/Web Storage

localStorage

Client Storage
- Basically Cookies on crack.
- Rather than a few bytes this can store megabytes.
- uses an SQL like syntax for retrieval

Offline Application Cache

<html manifest=”/cache.manifest”>

Offline Application Cache
- Means your browser can access the cache without being online.
- great for mobile apps
- can trigger events when browser comes back online, etc

CSS3

And now time for some fun stuff. Javascript even bores programmers half to death!
- show you all available css3 selectors; then show you some of the more useful ones
- the new properties
- media queries
- fonts

SELECTORS

everything you’re about to see works on all browsers (ie9)

many new selectors. a lot of them are quite similar to each other so I’m going to show you
the one’s I’ve found most useful.

A practical guide to building websites with HTML5 & CSS3

Substring matching attribute selector

div[class^="nav"] { background:#ff0; }

div[class$="nav"] { background:#ff0; }

div[class*="nav"] { background:#ff0; }

Extends the attribute selector
1) Starts with NAV
2) Ends with NAV
3) Contains NAV

The :nth-child() pseudo-class

p:nth-‐child(3) { color:#f00; }

li:nth-‐child(odd) { color: #eee; }

li:nth-‐child(3n+10) {color: #eee; }

The :nth-child() pseudo-class targets an element that has a certain number of siblings before
it in the document tree. The arguments can be a number, a keyword, or a formula.
1) Matches third p element that is the 3rd child of it’s parent
2) Matches every ﬁrst, third, ﬁfth, etc li element
3) Contains NAV

The :last-child pseudo-class

li:last-‐child { border-‐bottom: 0; }

The :last-child pseudo-class targets an element that is the last child of its parent element.

The :empty pseudo class

p:empty { display: none; }

Matches an element that contains no children (including text nodes).
great for cleaning up potentially dodgy wysiwyg editor code

The :target pseudo class

http://www.dontcom.com/about#contact

p:target { background: #ff9; }

Matches an element that is the target of the referring URL.

The ::selection pseudo class

p::selected { background: #ff9; }

Matches the portion of an element that is currently selected or highlighted by the user.

PROPERTIES

This is where things get interesting

VENDOR
PREFIXES
A small note on vendor/browser preﬁxes:
- browsers have adopted a method of including “cutting edge” CSS properties
- “cutting edge” in this case means the CSS is still in draft with the W3C
- means you can use them and thus help vendors test their speciﬁc implimentation of the
CSS standard.
- some debate whether this is good or bad. I’m on the fence. I use them and it doesn’t really
bother me.

-‐ms-‐border-‐radius:

-‐moz-‐border-‐radius:

-‐webkit-‐border-‐radius:

-‐khtml-‐border-‐radius:

-‐o-‐border-‐radius:

Here they are
- Microsoft
- Mozilla
- Webkit
- Konquerer
- Opera

Colour & Opacity

opacity: 0.8;
opacity: 1;

background-‐color: rgba(153,0,0,0.5);
background-‐color: hsla(0,100,60,0.5);

Opacity sets the degree of opacity of the entire object. This affects all children.
ie9
Use vendor preﬁxes for opacity

RGBA HSLA can be used for any colour settings: border-color, color, background-color, etc
ie9

Background & Borders

background-‐size: 200px 30px;

sets the width and height of a background image pixels or percentage
use vendor preﬁxes for Firefox

IE9

Multiple Background Images

background-‐image: url(img01.png) no-‐repeat,
url(img02.png) no-‐repeat;

Finally! Multiple background images!
You can position them using the usual background position methods

IE9

Border Image

border-‐image: url(border.png) 0 10 0 10 stretch;

Allows you to create image borders. You position the image much like you would position a
background image. Quite difficult to explain - but if you’ve used CSS sprites before it’s a
similar concept.

Border Radius

border-‐radius: 10px;
border-‐top-‐right-‐radius: 10px;

Yay! Rounder corners!
Can set individual borders.

vendor preﬁxes for webkit and mozilla
ie 9

Box Shadow

box-‐shadow: 10px 10px 10px #333

Drop shadows are go!
horizontal offset
vertical offset
blur radius
color
vendor preﬁx for mozilla webkit
ie9

Text
Text Shadow

text-‐shadow: 10px 10px 10px #333;

Text shadow
horizontal offset
vertical offset
blur radius
color

Text
Text Overflow

text-‐overflow: ellipse;

Allows you to set what happens when text overﬂows.

The useful solution is to use an ellipse.
Firefox nightlies

CSS Transforms
#skew { transform:skew(35deg); }

#scale { transform:scale(1,0.5); }

#rotate { transform:rotate(45deg); }

#rotate-‐skew-‐scale-‐translate {
transform:skew(30deg)
scale(1.1,1.1)
rotate(40deg)
}

change the angle/shape of objects.
- skew
- scalex scale y
- rotate
- all together
USE VENDOR PREFIXES

CSS Animated Transforms
img {
position:absolute;
left:0;
transition: opacity 1s ease-‐in-‐out;
}

img:hover {
opacity:0;
}

change the angle/shape of objects.
- skew
- scalex scale y
- rotate
- all together
USE VENDOR PREFIXES

EMBEDDING
FONTS
font face allows you to embed fonts. Licensing issues. Use a service like typekit.com. It’s
cheap, deals with licensing and has a huge number of fonts.

Font Face
@font-‐face {
font-‐family: 'Titillium Body';
src: url('Titillium.eot');
src: local('☺'),
url('Titillium.woff') format('woff'),
url('Titillium.ttf') format('truetype'),
url('Titillium.svg#webfont') format('svg');
}

This is the total cross browser implementation.
the smily face prevents the browser from showing a ﬂash of unstyled content
EOT = Embedded Open Type for IE
WOFF = Web Open Font Format - the standard - includes IE
TTF = true type - all browsers

http://typekit.com/
http://www.fontsquirrel.com/
http://code.google.com/webfonts

Typekit
- subscription service
- good number of fonts
- deal with very good type foundries

Fontsquirrel
- lots of free for use fonts.
- creates @font-face css for you
- has all font formats

Google
- deal with typekit
- small number of free fonts

Modernizr is a script you add to your site which enables you to use these new HTML5
features as well as a host of the new CSS3 stuff.

document.createElement('nav');

ﬁrst thing it does is makes everything play nice in IE6,7,8 but creating all the new HTML5
elements.

based on your browser (this example is ﬁrefox 3.6) modernizr adds an array of classes to the
HTML element which enables you to hook in via CSS

.multiplebgs div p {
/* properties for browsers which
support multiple backgrounds */
}

.no-‐multiplebgs div p {
/* properties for browsers which
don’t support multiple backgrounds */
}

it also creates a moderniz javascript object which you can test against. This example is
checking to see if your browser supports the new input type of date. If it doesn’t you can
then provide a suitable fallback.

LINKS AND
RESOURCES

There are loads of websites what will help you generate cross browser CSS. Including the
oldschool ie ﬁlters and vendor speciﬁc properties

http://mediaelementjs.com/
http://css3pie.com/
http://css3please.com/
http://www.html5test.com/
http://www.html5rocks.com
http://html5doctor.com/

http://mediaelementjs.com/ HTML5 <video> and <audio> with H.264, FLV, WMV, or MP3 on
any browser
http://css3please.com/ - A collection of cross browser css properties and IE ﬁlters that will
render CSS3 effects like dropshadows, etc
http://css3pie.com/ - an IE HTC include which makes ie6-ie8 render css3 features:
- border-radius, box-shadow, border-image, multiple background, rgba, gradients
http://www.html5test.com/ - will tell you what your browser supports
http://www.html5rocks.com - a great place to see examples of awesome html5 stuff
http://html5doctor.com/ - THE resource for HTML5

THANKS!
http://www.slideshare.net/darren131
http://www.dontcom.com
@darren

Thanks! Questions, etc...

A practical guide to building websites with HTML5 & CSS3

More Related Content

A practical guide to building websites with HTML5 & CSS3