html5 and css3 shizzle

71
The HTML5 & CSS3 Shizzle Chris Mills, Opera Software , all the way from “sunny” Oldham

Upload: chris-mills

Post on 15-May-2015

2.596 views

Category:

Technology


3 download

DESCRIPTION

I gave this presentation at the 2010 Scotch on the Rocks conference. It features a brief explanation of why HTML5 and CSS3 are necessary, and then goes on to cover most of the cool new features of HTML5 and CSS3 that are supported across most browsers at the time of publication., including , , HTML5 forms, the new HTML5 elements, box-shadow, text-shadow, web fonts, media queries, and more. Companion code examples are available at http://people.opera.com/cmills/HTML5_CSS3_examples.zip

TRANSCRIPT

Page 1: HTML5 and CSS3 Shizzle

The HTML5 & CSS3 Shizzle

Chris Mills, Opera Software, all the way from “sunny” Oldham

Page 2: HTML5 and CSS3 Shizzle

Slides available

At my.opera.com/ODIN(search for “chrismills” tag)

Page 3: HTML5 and CSS3 Shizzle

I work for Opera

Open web standards evangelistTechnologistTech writerDogsbody...

Page 4: HTML5 and CSS3 Shizzle

...secret Flash fan

Page 5: HTML5 and CSS3 Shizzle
Page 6: HTML5 and CSS3 Shizzle

What we'll cover

Why new standards?Things we can use todayThe future

Page 7: HTML5 and CSS3 Shizzle

Evolution...

There is nothing wrong with HTML 4 and CSS 2

Page 8: HTML5 and CSS3 Shizzle

...Evolved!But HTML5 and CSS3 are much more feature-rich!

Page 9: HTML5 and CSS3 Shizzle

HTML5 and CSS3 aren't replacementsThey are backwards compatibleThey fill up gapsThey add new features on top of the old specs

Page 10: HTML5 and CSS3 Shizzle

They, um, compete with plugins

Ian Hickson has already said as much.HTML5 will directly compete with other web application technologies, like Flash and Silverlight

Page 11: HTML5 and CSS3 Shizzle

HTML5 featuresMore accurate semantics (eg <header>, <footer>)Better forms (built in validation!)<video><canvas>

Page 12: HTML5 and CSS3 Shizzle

HTML5 features (cont.)

Drag and dropWeb workersWeb storage, app cache, webdb...and more

Page 13: HTML5 and CSS3 Shizzle

New syntax: better semantics

Page 14: HTML5 and CSS3 Shizzle

Typical HTML4 page<!DOCTYPE HTML PUBLIC "-//W3C//DTD ... et fucking cetera... <head></head><body> <div id=”masthead”></div> <div id=”nav”></div> <div id=”content”> <div id=”content-main”> <div id=”article”></div> <div id=”article”></div> </div> <div id=”side-content”> </div> </div> <div id=”footer”></div></body>

Page 15: HTML5 and CSS3 Shizzle

HTML5 page<!doctype html>

<header></header> <nav></nav> <section id=content> <section id=content-main> <article></article> <article></article> </section> <section id=side-content> </section> </section> <footer></footer>

Page 16: HTML5 and CSS3 Shizzle

Deeper into the page...<article> <header> <h1>Article about Chris Mills</h1> </header> <p>Article text...</p> <figure> <img src=chris.jpg alt=”Chris Mills”> <figcaption>Chris Mills</figcaption> </figure> <footer> <p>Published <time datetime=2010-05-06 pubdate>May 6th 2010</time></p> </footer></article>

Page 17: HTML5 and CSS3 Shizzle

Better semantics?

Document parts now have clear meaning More machine readableArguably easier for AT to readEasier to write Easier to target with CSS and JS

Page 18: HTML5 and CSS3 Shizzle

When can we use these?Now. Browsers don't do anything w/ themBut you can do display: block; And get into the habitStill machine-readable

Page 19: HTML5 and CSS3 Shizzle

HTML5 forms

Previously called “Web forms 2.0”More powerful form elementsBuilt-in validationMore standard archetypes

Page 20: HTML5 and CSS3 Shizzle

Slider<input type=range>

Page 21: HTML5 and CSS3 Shizzle

Calendar widget<input type=date>

Page 22: HTML5 and CSS3 Shizzle

Datalist<input type=text list=bands required><datalist id=bands> <option value="Napalm Death">Napalm Death</option> <option value="Britney Spears">Britney Spears</option> <option value="Akon">Akon</option> </datalist>

Page 23: HTML5 and CSS3 Shizzle

URL picker, E-mail input<input type=url>

<input type=email>

Page 24: HTML5 and CSS3 Shizzle

Client-side validation

Is screwed up in HTML4...

Page 25: HTML5 and CSS3 Shizzle

Ok, not that screwed up...

Page 26: HTML5 and CSS3 Shizzle

function validate() { var str = ""; var elements = document.getElementsByTagName('input'); // 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 emtpy if(offendingChar != null || value.length == 0) { // add up all error messages str += elements.item(i).getAttribute('errorMsg') + "\n" + "Found this illegal value: '" + offendingChar + "' \n"; // notify user by changing background color, in this case to red elements.item(i).style.background = "red"; } } } if (str != "") { // do not submit the form alert("ERROR ALERT!!\n" +str); return false; } else { // form values are valid; submit return true; } }

Page 27: HTML5 and CSS3 Shizzle

HTML5 built-in validation<input type=email required>

Page 28: HTML5 and CSS3 Shizzle

Autofocus<input type=email requiredautofocus>

Page 29: HTML5 and CSS3 Shizzle

HTML5 <canvas>

Scriptable graphicsStandard API for drawingSupported in most browsers

Page 30: HTML5 and CSS3 Shizzle

The basics

<canvas id=”canvas” width=”400” height=”300”>...fallback...</canvas>

Page 31: HTML5 and CSS3 Shizzle

The basics

var ctx = document.getElementById('canvas').getContext('2d');

ctx.fillStyle='#00f';ctx.fillRect(0, 0, 150, 100);

Page 32: HTML5 and CSS3 Shizzle

Example time!

nihilogic.dk has cool stuff on itdev.opera.com has good articles

Page 33: HTML5 and CSS3 Shizzle

HTML5 <video> (& <audio>)

New tags, plus new API for controlling audio and video!

Page 34: HTML5 and CSS3 Shizzle

The old school way<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>

Page 35: HTML5 and CSS3 Shizzle

The trouser-tinglingly sexy new way<video src="video.webm" controls autoplay loop poster="poster.jpg" preload=”none” width="320" height="240"> <a href="video.webm">Download movie</a></video>

Page 36: HTML5 and CSS3 Shizzle

Native <video> is awesome

Works well with open standardsBuilt-in keyboard accessibilityAPI for customising controls, etc.DOESN'T require plugins

Page 37: HTML5 and CSS3 Shizzle

<video> problems

Disagreement on formats:H.264Ogg TheoraWebM new to the table

You can provide fallbacks

Page 38: HTML5 and CSS3 Shizzle

Different sources

<video width=640 height=480 controls> <source src="video.ogv" type="video/ogg"> <source src="video.mp4" type="video/mp4"> <a href="video.mp4">Download movie</a> </video>

Page 39: HTML5 and CSS3 Shizzle

<video> problems (cont.)

Built-in captioning?Currently not ;-(You can build a workaround though

Page 40: HTML5 and CSS3 Shizzle

<video> captionsfunction timeupdate() { var v = document.querySelector('video'); var now = v.currentTime; …}

<video width=600 src=synergy.ogv ontimeupdate=timeupdate()><p> <span data-begin=1 data-end=2.4>Hello, Good Evening</span> <span data-begin=3 data-end=3.6> and Welcome.</span></p>

Page 41: HTML5 and CSS3 Shizzle

CSS3...

Will save you a lot of time previously spent in Photoshop

Allows you to create the same tacky shit...

Page 42: HTML5 and CSS3 Shizzle

...that you did in Flash in 1999!!

Page 43: HTML5 and CSS3 Shizzle

text-shadow

text-shadow: #444 2px 2px 2px;

text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;

Page 44: HTML5 and CSS3 Shizzle

box-shadow

box-shadow: 10px 10px 15px #000000;

Page 45: HTML5 and CSS3 Shizzle

CSS3 opacity

Page 46: HTML5 and CSS3 Shizzle

CSS3 colours: rgb(a)

Page 47: HTML5 and CSS3 Shizzle

CSS3 colours: hsl(a)

Page 48: HTML5 and CSS3 Shizzle

border-radius

Finally, Web 2.0 is easy!!

(Starts from top-left corner)

Page 49: HTML5 and CSS3 Shizzle

Transitions

Offer animation-like abilitiesSet a default state for the elementChoose property & durationThen set state to transition to

Page 50: HTML5 and CSS3 Shizzle

Transition default statepre#transition1 { background-color: #ff0000; -o-transition-property: background-color; -o-transition-duration: 2s;}

Page 51: HTML5 and CSS3 Shizzle

Transitioned statepre#transition1:hover { background-color: #ffffff;}

Page 52: HTML5 and CSS3 Shizzle

Transitions: easingAllows you to control the pattern of acceleration/deceleration.More natural feel.

-o-transition-timing-function: ease-in;

Page 53: HTML5 and CSS3 Shizzle

Transitions: delayAdd a delay before the transition starts.

-o-transition-delay: 1s;

Page 54: HTML5 and CSS3 Shizzle

Multiple transitionsMultiple transitions, each with their own start time.

-o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s;

Page 55: HTML5 and CSS3 Shizzle

Transforms (2D)Transforming element position, size, etc.: moving, rotating, skewing...

Page 56: HTML5 and CSS3 Shizzle

Setting transform originFor example what point does your element rotate around?

-o-transform-origin: 3em bottom;

Page 57: HTML5 and CSS3 Shizzle

Moving elementsIn X and Y directions

-o-transform: translateX(50px);-o-transform: translateY(100px);

Page 58: HTML5 and CSS3 Shizzle

Resizing elementsBy a set scale factor

-o-transform: scale(2.5);

Page 59: HTML5 and CSS3 Shizzle

Skewing elementsSquishy distortion!

-o-transform: skew(10deg, 20deg);

Page 60: HTML5 and CSS3 Shizzle

Rotating elementsAround the origin point

-o-transform: rotate(30deg);

Page 61: HTML5 and CSS3 Shizzle

Combining transformsDo multiple things in one declaration

-o-transform: scale(2) rotate(45deg) translate(80px);

Page 62: HTML5 and CSS3 Shizzle

Combining transitions with transforms......is where it starts to get really fun.

Page 63: HTML5 and CSS3 Shizzle

Web FontsDownload custom fonts along with your web pages

Solve the web typographer's nightmare?

Page 64: HTML5 and CSS3 Shizzle

Include the font@font-face { font-family: "My font"; src: url("http://www.myweb.com/fonts/ myfont.ttf") format("truetype");}

Page 65: HTML5 and CSS3 Shizzle

Use it in your page as normalp { font-family: "My font"; }

Page 66: HTML5 and CSS3 Shizzle

Web Fonts issuesGood free fonts are available, but...Many are not licensed for the WebSome also mean large downloadsSome solutions are being explored

Page 67: HTML5 and CSS3 Shizzle

Media queriesYou know what media types areMedia queries take the idea further Apply CSS depending on device attributes

Page 68: HTML5 and CSS3 Shizzle

Syntax example@media all and (max-width: 400px) {

/* CSS rules go here */

}

Page 69: HTML5 and CSS3 Shizzle

Browser support?

Page 70: HTML5 and CSS3 Shizzle

Browser support?Graceful degredation in mind...IE9 support announcementsBridging solutions:

ExcanvasHTML5ShivModernizer

Page 71: HTML5 and CSS3 Shizzle

Thanks!

[email protected]@chrisdavidmills

Check out dev.opera.comCheck out www.opera.com/wscTry our browsers!!