HTML5 and CSS3 Shizzle

2,979 views

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,979
On SlideShare
0
From Embeds
0
Number of Embeds
83
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!!

×