The HTML5 & CSS3
     Shizzle
Chris Mills, Opera Software, all the way from “sunny” Oldham
Slides available
At my.opera.com/ODIN
(search for “chrismills” tag)
I work for Opera
Open web standards evangelist
Technologist
Tech writer
Dogsbody...
...secret Flash fan
What we'll cover
Why new standards?
Things we can use today
The future
Evolution...
There is nothing wrong with HTML 4
and CSS 2
...Evolved!
But HTML5 and CSS3 are much
more feature-rich!
HTML5 and CSS3 aren't
replacements
They are backwards compatible
They fill up gaps
They add new features on top of the
old...
They, um, compete with plugins
Ian Hickson has already said as
much.
HTML5 will directly compete with
other web applicatio...
HTML5 features
More accurate semantics (eg
<header>, <footer>)
Better forms (built in validation!)
<video>
<canvas>
HTML5 features (cont.)
Drag and drop
Web workers
Web storage, app cache, webdb
...and more
New syntax: better semantics
Typical HTML4 page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD ... et
fucking cetera...
<head></head>
<body>
   <div id=”masthead”>...
HTML5 page
<!doctype html>

   <header></header>
   <nav></nav>
   <section id=content>
      <section id=content-main>
  ...
Deeper into the page...
<article>
   <header>
      <h1>Article about Chris Mills</h1>
   </header>
   <p>Article text...<...
Better semantics?
Document parts now have clear
meaning
More machine readable
Arguably easier for AT to read
Easier to wri...
When can we use these?
Now.

Browsers don't do anything w/ them
But you can do display: block;
And get into the habit
Stil...
HTML5 forms
Previously called “Web forms 2.0”
More powerful form elements
Built-in validation
More standard archetypes
Slider
<input type=range>
Calendar widget
<input type=date>
Datalist
<input type=text list=bands required>
<datalist id=bands>
 <option value="Napalm Death">Napalm
Death</option>
 <o...
URL picker, E-mail input
<input type=url>

<input type=email>
Client-side validation
Is screwed up in HTML4...
Ok, not that screwed up...
function validate() {
 var str = "";
 var elements = document.getElementsByTagName('input');

 // loop through all input e...
HTML5 built-in validation
<input type=email required>
Autofocus
<input type=email required
autofocus>
HTML5 <canvas>
Scriptable graphics
Standard API for drawing
Supported in most browsers
The basics
<canvas id=”canvas”
width=”400” height=”300”>
...fallback...
</canvas>
The basics
var ctx =
document.getElementById('canv
as').getContext('2d');

ctx.fillStyle='#00f';
ctx.fillRect(0, 0, 150, 1...
Example time!
nihilogic.dk has cool stuff on it
dev.opera.com has good articles
HTML5 <video> (& <audio>)
New tags, plus new API for
controlling audio and video!
The old school way
<object width="425" height="344">
<param name="movie"
value="http://www.example.com/v/LtfQg4KkR88&h
l=e...
The trouser-tinglingly sexy new
way
<video src="video.webm"
   controls
   autoplay
   loop
   poster="poster.jpg"
   prel...
Native <video> is awesome
Works well with open standards
Built-in keyboard accessibility
API for customising controls, etc...
<video> problems
Disagreement on formats:
   H.264
   Ogg Theora
   WebM new to the table

You can provide fallbacks
Different sources
<video width=640 height=480 controls>
   <source src="video.ogv"
    type="video/ogg">
   <source src="v...
<video> problems (cont.)
Built-in captioning?
Currently not ;-(
You can build a workaround though
<video> captions
function timeupdate() {
   var v = document.querySelector('video');
   var now = v.currentTime; …
}

<vid...
CSS3...
Will save you a lot of time
previously spent in Photoshop

Allows you to create the same tacky
shit...
...that you did in Flash in
1999!!
text-shadow


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




text-shadow: 0 0 4px white,
             0 -5px 4px #ff3,
             2p...
box-shadow




box-shadow: 10px 10px 15px #000000;
CSS3 opacity
CSS3 colours: rgb(a)
CSS3 colours: hsl(a)
border-radius
Finally, Web 2.0 is easy!!




(Starts from top-left corner)
Transitions
Offer animation-like abilities
Set a default state for the element
Choose property & duration
Then set state t...
Transition default state
pre#transition1 {
  background-color: #ff0000;
  -o-transition-property: background-color;
  -o-t...
Transitioned state
pre#transition1:hover {
  background-color: #ffffff;
}
Transitions: easing
Allows you to control the pattern of
acceleration/deceleration.
More natural feel.
-o-transition-timin...
Transitions: delay
Add a delay before the transition
starts.


-o-transition-delay: 1s;
Multiple transitions
Multiple transitions, each with their
own start time.

-o-transition-property: background-color,
widt...
Transforms (2D)
Transforming element position, size,
etc.: moving, rotating, skewing...
Setting transform origin
For example what point does your
element rotate around?



-o-transform-origin: 3em bottom;
Moving elements
In X and Y directions
-o-transform: translateX(50px);
-o-transform: translateY(100px);
Resizing elements
By a set scale factor
-o-transform: scale(2.5);
Skewing elements
Squishy distortion!
-o-transform: skew(10deg, 20deg);
Rotating elements
Around the origin point
-o-transform: rotate(30deg);
Combining transforms
Do multiple things in one
declaration
-o-transform: scale(2) rotate(45deg)
translate(80px);
Combining transitions with
transforms...
...is where it starts to get really fun.
Web Fonts
Download custom fonts along with
your web pages

Solve the web typographer's
nightmare?
Include the font
@font-face {
  font-family: "My font";
  src: url("http://www.myweb.com/fonts/
           myfont.ttf")
  ...
Use it in your page as normal
p { font-family: "My font"; }
Web Fonts issues
Good free fonts are available, but...
Many are not licensed for the Web
Some also mean large downloads
So...
Media queries
You know what media types are
Media queries take the idea further
Apply CSS depending on device
attributes
Syntax example
@media all and (max-width: 400px) {

    /* CSS rules go here */

}
Browser support?
Browser support?
Graceful degredation in mind...
IE9 support announcements
Bridging solutions:
    Excanvas
    HTML5Shiv
...
Thanks!
cmills@opera.com
@chrisdavidmills

Check out dev.opera.com
Check out www.opera.com/wsc
Try our browsers!!
HTML5 and CSS3 Shizzle
Upcoming SlideShare
Loading in...5
×

HTML5 and CSS3 Shizzle

2,650

Published on

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 <video>, <canvas>, 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

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
  • You can download my code demos at http://people.opera.com/cmills/HTML5_CSS3_examples.zip
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,650
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
66
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 and CSS3 Shizzle

  1. 1. The HTML5 & CSS3 Shizzle Chris Mills, Opera Software, all the way from “sunny” Oldham
  2. 2. Slides available At my.opera.com/ODIN (search for “chrismills” tag)
  3. 3. I work for Opera Open web standards evangelist Technologist Tech writer Dogsbody...
  4. 4. ...secret Flash fan
  5. 5. What we'll cover Why new standards? Things we can use today The future
  6. 6. Evolution... There is nothing wrong with HTML 4 and CSS 2
  7. 7. ...Evolved! But HTML5 and CSS3 are much more feature-rich!
  8. 8. HTML5 and CSS3 aren't replacements They are backwards compatible They fill up gaps They add new features on top of the old specs
  9. 9. 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
  10. 10. HTML5 features More accurate semantics (eg <header>, <footer>) Better forms (built in validation!) <video> <canvas>
  11. 11. HTML5 features (cont.) Drag and drop Web workers Web storage, app cache, webdb ...and more
  12. 12. New syntax: better semantics
  13. 13. 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>
  14. 14. 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>
  15. 15. 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>
  16. 16. Better semantics? Document parts now have clear meaning More machine readable Arguably easier for AT to read Easier to write Easier to target with CSS and JS
  17. 17. When can we use these? Now. Browsers don't do anything w/ them But you can do display: block; And get into the habit Still machine-readable
  18. 18. HTML5 forms Previously called “Web forms 2.0” More powerful form elements Built-in validation More standard archetypes
  19. 19. Slider <input type=range>
  20. 20. Calendar widget <input type=date>
  21. 21. 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>
  22. 22. URL picker, E-mail input <input type=url> <input type=email>
  23. 23. Client-side validation Is screwed up in HTML4...
  24. 24. Ok, not that screwed up...
  25. 25. 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; } }
  26. 26. HTML5 built-in validation <input type=email required>
  27. 27. Autofocus <input type=email required autofocus>
  28. 28. HTML5 <canvas> Scriptable graphics Standard API for drawing Supported in most browsers
  29. 29. The basics <canvas id=”canvas” width=”400” height=”300”> ...fallback... </canvas>
  30. 30. The basics var ctx = document.getElementById('canv as').getContext('2d'); ctx.fillStyle='#00f'; ctx.fillRect(0, 0, 150, 100);
  31. 31. Example time! nihilogic.dk has cool stuff on it dev.opera.com has good articles
  32. 32. HTML5 <video> (& <audio>) New tags, plus new API for controlling audio and video!
  33. 33. The old school way <object width="425" height="344"> <param name="movie" value="http://www.example.com/v/LtfQg4KkR88&h l=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>
  34. 34. 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>
  35. 35. Native <video> is awesome Works well with open standards Built-in keyboard accessibility API for customising controls, etc. DOESN'T require plugins
  36. 36. <video> problems Disagreement on formats: H.264 Ogg Theora WebM new to the table You can provide fallbacks
  37. 37. 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>
  38. 38. <video> problems (cont.) Built-in captioning? Currently not ;-( You can build a workaround though
  39. 39. <video> captions function 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>
  40. 40. CSS3... Will save you a lot of time previously spent in Photoshop Allows you to create the same tacky shit...
  41. 41. ...that you did in Flash in 1999!!
  42. 42. 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;
  43. 43. box-shadow box-shadow: 10px 10px 15px #000000;
  44. 44. CSS3 opacity
  45. 45. CSS3 colours: rgb(a)
  46. 46. CSS3 colours: hsl(a)
  47. 47. border-radius Finally, Web 2.0 is easy!! (Starts from top-left corner)
  48. 48. Transitions Offer animation-like abilities Set a default state for the element Choose property & duration Then set state to transition to
  49. 49. Transition default state pre#transition1 { background-color: #ff0000; -o-transition-property: background-color; -o-transition-duration: 2s; }
  50. 50. Transitioned state pre#transition1:hover { background-color: #ffffff; }
  51. 51. Transitions: easing Allows you to control the pattern of acceleration/deceleration. More natural feel. -o-transition-timing- function: ease-in;
  52. 52. Transitions: delay Add a delay before the transition starts. -o-transition-delay: 1s;
  53. 53. Multiple transitions Multiple transitions, each with their own start time. -o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s;
  54. 54. Transforms (2D) Transforming element position, size, etc.: moving, rotating, skewing...
  55. 55. Setting transform origin For example what point does your element rotate around? -o-transform-origin: 3em bottom;
  56. 56. Moving elements In X and Y directions -o-transform: translateX(50px); -o-transform: translateY(100px);
  57. 57. Resizing elements By a set scale factor -o-transform: scale(2.5);
  58. 58. Skewing elements Squishy distortion! -o-transform: skew(10deg, 20deg);
  59. 59. Rotating elements Around the origin point -o-transform: rotate(30deg);
  60. 60. Combining transforms Do multiple things in one declaration -o-transform: scale(2) rotate(45deg) translate(80px);
  61. 61. Combining transitions with transforms... ...is where it starts to get really fun.
  62. 62. Web Fonts Download custom fonts along with your web pages Solve the web typographer's nightmare?
  63. 63. Include the font @font-face { font-family: "My font"; src: url("http://www.myweb.com/fonts/ myfont.ttf") format("truetype"); }
  64. 64. Use it in your page as normal p { font-family: "My font"; }
  65. 65. Web Fonts issues Good free fonts are available, but... Many are not licensed for the Web Some also mean large downloads Some solutions are being explored
  66. 66. Media queries You know what media types are Media queries take the idea further Apply CSS depending on device attributes
  67. 67. Syntax example @media all and (max-width: 400px) { /* CSS rules go here */ }
  68. 68. Browser support?
  69. 69. Browser support? Graceful degredation in mind... IE9 support announcements Bridging solutions: Excanvas HTML5Shiv Modernizer
  70. 70. Thanks! cmills@opera.com @chrisdavidmills Check out dev.opera.com Check out www.opera.com/wsc Try our browsers!!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×