CSS3 and HTML5                          Does now really                              mean now?Saturday, 10 March 2012
Hi! I’m Chris Mills     ‣ Open standards advocate and education agitator      ‣ dev.opera.com editor      ‣ W3C web educat...
Saturday, 10 March 2012
cmills@opera.com                                @chrisdavidmills                    http://www.slideshare.net/chrisdavidmi...
What we’ll talk about     ‣ Do you really need The Shiny™?     ‣ Progressively enhance, don’t rely on it     ‣ When progre...
Saturday, 10 March 2012
Do you need it at all?Saturday, 10 March 2012
Saturday, 10 March 2012
Saturday, 10 March 2012
Saturday, 10 March 2012
Saturday, 10 March 2012
HTML5 and CSS3 are fun     ‣ But just because you can use them doesn’t mean       you have to use them. All the bloody tim...
Do you need it?Saturday, 10 March 2012
If you are going to use                             prefixed CSS/JS...     background: -webkit-linear-gradient(#ff0000,   ...
Progressive    enhancementSaturday, 10 March 2012
Don’t rely on The Shiny™     ‣ If *at all possible*     ‣ Build a base level of functionality that works     ‣ Then enhanc...
Example: Ajax     ‣ Ajax makes data updates more responsive     ‣ But the base functionality could still work with no     ...
Example: Offline apps     ‣ Using apps offline is awesome     ‣ But you’re probably not losing anything if your       brow...
Example: CSS3 bling     ‣ Content looks a lot nicer in supporting browsers     ‣ Also more flexible than using old graphic...
Example: CSS animation     ‣ If done properly, a lot of CSS animations and       transitions can be used unobtrusively    ...
Example: Media queries     ‣ One of the obvious ones!     ‣ If media queries are not supported, the browser       ignores ...
Example: Web fonts     ‣ This is a perfect feature to use now!     ‣ IE has supported EOT since IE4/5!     ‣ You can use t...
This is all fine...     ‣ So long as your boss/client is cool with that!     ‣ Many still obsess over identical layouts/  ...
Identical layout/functionality                       obsession     ‣ A thing of the past?     ‣ It is becoming much less o...
Acceptable    alternativesSaturday, 10 March 2012
Ok, sometimes progressive  enhancement isn’t really possible     ‣ <img>!     ‣ <canvas>/WebGL     ‣ <video>     ‣ Web soc...
Fallbacks often a good option     ‣ Equivalence of service     ‣ Useful for multiple user groups     ‣ As long as they can...
HTML5 <video>     ‣ Typical example of HTML5’s attitude to fallbackSaturday, 10 March 2012
HTML5 <video>     <video controls>       <source src="video-file.mp4"               type="video/mp4">       <source src="v...
Flash fallbacks viable     ‣ Might seem annoying to have to implement, but       once you’ve got a template, you’re off.  ...
Unfortunately...     ‣ The fallback content is for browsers that don’t       support <video>     ‣ Not for browsers that d...
What about when alternative            mechanisms don’t exist?     ‣ Make your own!      ‣ Use feature detection      ‣ Ba...
Feature detection basics     if (window.chrome) {       // do stuff that works on Chrome     }     else {       // ignore ...
Feature detection basics     if (checkVideo()===true) {       // do stuff that uses this method     }     else {       // ...
Modernizr     ‣ The mother of all feature detection libraries     ‣ Available at modernizr.comSaturday, 10 March 2012
Modernizr CSS example     <html lang="en-US" class="no-js">     <head>       ...     <script src="modernizr.js"></script> ...
Modernizr CSS example     <html class=" js flexbox canvas canvastext webgl no-     touch geolocation postmessage no-websql...
Modernizr CSS example     #wrapper:hover, #wrapper:focus {       transform: rotateX(180deg);     }Saturday, 10 March 2012
Modernizr CSS example     .no-csstransforms3d #wrapper #front {       transition: 0.8s all ease-in;     }     .no-csstrans...
Modernizr JS example     function rotateForm() {       if(Modernizr.cssanimations) {         form.setAttribute("class","fo...
In general, Modernizr rocks     ‣ It can add a fair bit of weight to your page: 49KB       for the full library     ‣ But ...
IE conditional comments     <!--[if lte IE 8]>       <link rel="stylesheet"        href="iefixes.css"     type="text/css">...
Polyfills/shimsSaturday, 10 March 2012
Add in support where needed     ‣ Using JavaScript     ‣ Fake SVG in old IE versions using VML     ‣ Fake box-shadow using...
Adding HTML5 support to                                 browsers     ‣ Older browsers don’t support them!     ‣ But you ca...
Oh, but IE 6-8 need                           some more help     ‣ They refuse to style unknown elements, unless       you...
CSS3 PIE for CSS bling support     ‣ http://css3pie.com/     ‣ Awesome little library     ‣ Add support to IE6-8 for box-s...
CSS3-mediaqueries.js     ‣ http://code.google.com/p/css3-mediaqueries-js/     ‣ Add media queries support to IE     ‣ A bi...
Excanvas     ‣ http://excanvas.sourceforge.net/     ‣ Add <canvas> support to IESaturday, 10 March 2012
Selectivizr     ‣ http://selectivizr.com/     ‣ Adds support for CSS3 selectors to IE6-8Saturday, 10 March 2012
All sounds good, huh?     ‣ Beware: slows down loading!     ‣ Especially stuff that makes use of IE filters     ‣ Can be m...
To summariseSaturday, 10 March 2012
Does now really mean now?Saturday, 10 March 2012
Progressive enhancement and                  alternatives     ‣ Can be successful     ‣ But not everything is easy to prov...
Polyfills     ‣ Are great     ‣ But complicate things     ‣ And give a performance hitSaturday, 10 March 2012
Think carefully     ‣ Do you need to do it this way?     ‣ Is there viable alternative content that can be          provid...
It will be a while before                              things get easierSaturday, 10 March 2012
More resources     ‣ html5please.com     ‣ caniuse.com     ‣ Practical CSS3: design and develop (Peachpit          Press, ...
Thanks!                               cmills@opera.com                                @chrisdavidmills                    ...
Thank you CC!                Spidermen — http://www.flickr.com/photos/ralphman/792848885/        Schoolkids — http://www.f...
Upcoming SlideShare
Loading in...5
×

HTML5 and CSS3: does now really mean now?

5,349

Published on

Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,349
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
131
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 and CSS3: does now really mean now?"

  1. 1. CSS3 and HTML5 Does now really mean now?Saturday, 10 March 2012
  2. 2. Hi! I’m Chris Mills ‣ Open standards advocate and education agitator ‣ dev.opera.com editor ‣ W3C web education community group chair ‣ Accessibility whiner ‣ HTML5/CSS3 wrangler ‣ Heavy metal drummer & proud dadSaturday, 10 March 2012
  3. 3. Saturday, 10 March 2012
  4. 4. cmills@opera.com @chrisdavidmills http://www.slideshare.net/chrisdavidmills http://dev.opera.com http://www.w3.org/community/webed/Saturday, 10 March 2012
  5. 5. What we’ll talk about ‣ Do you really need The Shiny™? ‣ Progressively enhance, don’t rely on it ‣ When progressive enhancement isn’t viable, provide alternatives, use feature detection... ‣ ...use polyfills/shims ‣ #sxsw #dnrmn (lol, lmao, wtf, etc.)Saturday, 10 March 2012
  6. 6. Saturday, 10 March 2012
  7. 7. Do you need it at all?Saturday, 10 March 2012
  8. 8. Saturday, 10 March 2012
  9. 9. Saturday, 10 March 2012
  10. 10. Saturday, 10 March 2012
  11. 11. Saturday, 10 March 2012
  12. 12. HTML5 and CSS3 are fun ‣ But just because you can use them doesn’t mean you have to use them. All the bloody time! ‣ In the real world, with real clients, you are likely to have less freedomSaturday, 10 March 2012
  13. 13. Do you need it?Saturday, 10 March 2012
  14. 14. If you are going to use prefixed CSS/JS... background: -webkit-linear-gradient(#ff0000, #000000); background: -moz-linear-gradient(#ff0000, #000000); background: -ms-linear-gradient(#ff0000, #000000); background: -o-linear-gradient(#ff0000, #000000); background: linear-gradient(#ff0000, #000000);Saturday, 10 March 2012
  15. 15. Progressive enhancementSaturday, 10 March 2012
  16. 16. Don’t rely on The Shiny™ ‣ If *at all possible* ‣ Build a base level of functionality that works ‣ Then enhance the user experienceSaturday, 10 March 2012
  17. 17. Example: Ajax ‣ Ajax makes data updates more responsive ‣ But the base functionality could still work with no Ajax ‣ Albeit with page reloadsSaturday, 10 March 2012
  18. 18. Example: Offline apps ‣ Using apps offline is awesome ‣ But you’re probably not losing anything if your browser doesn’t support this ‣ http://dev.opera.com/articles/view/taking-your- web-apps-offline-web-storage-appcache- websql/Saturday, 10 March 2012
  19. 19. Example: CSS3 bling ‣ Content looks a lot nicer in supporting browsers ‣ Also more flexible than using old graphical methods ‣ But the content should still be accessible in older browsers ‣ http://www.alistapart.com/articles/css3-bling-in- the-real-world/Saturday, 10 March 2012
  20. 20. Example: CSS animation ‣ If done properly, a lot of CSS animations and transitions can be used unobtrusively ‣ For example, by default the element is set to be in its usable state, but then the animation is applied over the top to bring the animation to that stateSaturday, 10 March 2012
  21. 21. Example: Media queries ‣ One of the obvious ones! ‣ If media queries are not supported, the browser ignores them, and you get the standard layout ‣ Of course, this can be a problem if you are using the “mobile first” approachSaturday, 10 March 2012
  22. 22. Example: Web fonts ‣ This is a perfect feature to use now! ‣ IE has supported EOT since IE4/5! ‣ You can use the bulletproof web font syntax - see fontsquirrel.comSaturday, 10 March 2012
  23. 23. This is all fine... ‣ So long as your boss/client is cool with that! ‣ Many still obsess over identical layouts/ functionality across browsersSaturday, 10 March 2012
  24. 24. Identical layout/functionality obsession ‣ A thing of the past? ‣ It is becoming much less of an issue, with so many different browsing platforms and devices now available ‣ Many different contexts require different layouts/ functionality for a good user experienceSaturday, 10 March 2012
  25. 25. Acceptable alternativesSaturday, 10 March 2012
  26. 26. Ok, sometimes progressive enhancement isn’t really possible ‣ <img>! ‣ <canvas>/WebGL ‣ <video> ‣ Web sockets ‣ etc.Saturday, 10 March 2012
  27. 27. Fallbacks often a good option ‣ Equivalence of service ‣ Useful for multiple user groups ‣ As long as they can access the content and services in some way, you should be okSaturday, 10 March 2012
  28. 28. HTML5 <video> ‣ Typical example of HTML5’s attitude to fallbackSaturday, 10 March 2012
  29. 29. HTML5 <video> <video controls> <source src="video-file.mp4" type="video/mp4"> <source src="video-file.webm" type="video/webm"> <track src="en.vtt" kind="subtitles" srclang="en" label="English subtitles"> <!-- Flash player often referenced in here: will play the MP4 version of the video --> </video>Saturday, 10 March 2012
  30. 30. Flash fallbacks viable ‣ Might seem annoying to have to implement, but once you’ve got a template, you’re off. ‣ And Flash can just load the MP4 version of the video ‣ Also consider jPlayer, Sublime, etc.Saturday, 10 March 2012
  31. 31. Unfortunately... ‣ The fallback content is for browsers that don’t support <video> ‣ Not for browsers that don’t support the format being offered up ‣ You’ll need multiple formats for the time beingSaturday, 10 March 2012
  32. 32. What about when alternative mechanisms don’t exist? ‣ Make your own! ‣ Use feature detection ‣ Basic tests, or a library like ModernizrSaturday, 10 March 2012
  33. 33. Feature detection basics if (window.chrome) { // do stuff that works on Chrome } else { // ignore it, and do something else }Saturday, 10 March 2012
  34. 34. Feature detection basics if (checkVideo()===true) { // do stuff that uses this method } else { // ignore it, and do something else }Saturday, 10 March 2012
  35. 35. Modernizr ‣ The mother of all feature detection libraries ‣ Available at modernizr.comSaturday, 10 March 2012
  36. 36. Modernizr CSS example <html lang="en-US" class="no-js"> <head> ... <script src="modernizr.js"></script> ... </head>Saturday, 10 March 2012
  37. 37. Modernizr CSS example <html class=" js flexbox canvas canvastext webgl no- touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no- cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en-US">Saturday, 10 March 2012
  38. 38. Modernizr CSS example #wrapper:hover, #wrapper:focus { transform: rotateX(180deg); }Saturday, 10 March 2012
  39. 39. Modernizr CSS example .no-csstransforms3d #wrapper #front { transition: 0.8s all ease-in; } .no-csstransforms3d #wrapper:hover #front, .no-csstransforms3d #wrapper:focus #front { transform: rotate(-30deg) translate(-50%,-100%); }Saturday, 10 March 2012
  40. 40. Modernizr JS example function rotateForm() { if(Modernizr.cssanimations) { form.setAttribute("class","form-rotate"); form.style.left = "0rem"; } else { back.style.zIndex = "5"; }; };Saturday, 10 March 2012
  41. 41. In general, Modernizr rocks ‣ It can add a fair bit of weight to your page: 49KB for the full library ‣ But you can create a smaller custom version that just includes the tests you need ‣ There are some things that can’t be detectedSaturday, 10 March 2012
  42. 42. IE conditional comments <!--[if lte IE 8]> <link rel="stylesheet" href="iefixes.css" type="text/css"> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" href="ie6.css" type="text/ css"> <![endif]-->Saturday, 10 March 2012
  43. 43. Polyfills/shimsSaturday, 10 March 2012
  44. 44. Add in support where needed ‣ Using JavaScript ‣ Fake SVG in old IE versions using VML ‣ Fake box-shadow using IE filters (although they are evil — every time you use IE filters, god kills a kitten)Saturday, 10 March 2012
  45. 45. Adding HTML5 support to browsers ‣ Older browsers don’t support them! ‣ But you can style any unknown element, so just set all the “block level” elements to display as block, at the top of your CSS: ‣ article { display: block; }Saturday, 10 March 2012
  46. 46. Oh, but IE 6-8 need some more help ‣ They refuse to style unknown elements, unless you create instances of them in the DOM ‣ document.createElement(article);Saturday, 10 March 2012
  47. 47. CSS3 PIE for CSS bling support ‣ http://css3pie.com/ ‣ Awesome little library ‣ Add support to IE6-8 for box-shadow, border- radius, gradients and transparent colours ‣ But not text-shadow, which is a little frustratingSaturday, 10 March 2012
  48. 48. CSS3-mediaqueries.js ‣ http://code.google.com/p/css3-mediaqueries-js/ ‣ Add media queries support to IE ‣ A bit clunky, when you resize, but it worksSaturday, 10 March 2012
  49. 49. Excanvas ‣ http://excanvas.sourceforge.net/ ‣ Add <canvas> support to IESaturday, 10 March 2012
  50. 50. Selectivizr ‣ http://selectivizr.com/ ‣ Adds support for CSS3 selectors to IE6-8Saturday, 10 March 2012
  51. 51. All sounds good, huh? ‣ Beware: slows down loading! ‣ Especially stuff that makes use of IE filters ‣ Can be mitigated by helpers such as YepNopeSaturday, 10 March 2012
  52. 52. To summariseSaturday, 10 March 2012
  53. 53. Does now really mean now?Saturday, 10 March 2012
  54. 54. Progressive enhancement and alternatives ‣ Can be successful ‣ But not everything is easy to provide for ‣ And your clients might not approveSaturday, 10 March 2012
  55. 55. Polyfills ‣ Are great ‣ But complicate things ‣ And give a performance hitSaturday, 10 March 2012
  56. 56. Think carefully ‣ Do you need to do it this way? ‣ Is there viable alternative content that can be provided, or different ways to implement it?Saturday, 10 March 2012
  57. 57. It will be a while before things get easierSaturday, 10 March 2012
  58. 58. More resources ‣ html5please.com ‣ caniuse.com ‣ Practical CSS3: design and develop (Peachpit Press, August 2012ish)Saturday, 10 March 2012
  59. 59. Thanks! cmills@opera.com @chrisdavidmills http://www.slideshare.net/chrisdavidmills http://dev.opera.com http://www.w3.org/community/webed/Saturday, 10 March 2012
  60. 60. Thank you CC! Spidermen — http://www.flickr.com/photos/ralphman/792848885/ Schoolkids — http://www.flickr.com/photos/mallalamuseum/3838470381/ Old married couple — http://www.flickr.com/photos/adwriter/257937032/ No IE6 — http://www.navegabem.com Parrot — http://www.flickr.com/photos/young-in-panama/57895100/ Immortal — 10 most ridiculous black metal photos everSaturday, 10 March 2012
  1. A particular slide catching your eye?

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

×