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.
1. CSS3 and HTML5
Does now really
mean now?
Saturday, 10 March 2012
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 dad
Saturday, 10 March 2012
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. 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
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 freedom
Saturday, 10 March 2012
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. Progressive
enhancement
Saturday, 10 March 2012
16. Don’t rely on The Shiny™
‣ If *at all possible*
‣ Build a base level of functionality that works
‣ Then enhance the user experience
Saturday, 10 March 2012
17. Example: Ajax
‣ Ajax makes data updates more responsive
‣ But the base functionality could still work with no
Ajax
‣ Albeit with page reloads
Saturday, 10 March 2012
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. 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. 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
state
Saturday, 10 March 2012
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” approach
Saturday, 10 March 2012
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.com
Saturday, 10 March 2012
23. This is all fine...
‣ So long as your boss/client is cool with that!
‣ Many still obsess over identical layouts/
functionality across browsers
Saturday, 10 March 2012
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 experience
Saturday, 10 March 2012
25. Acceptable
alternatives
Saturday, 10 March 2012
26. Ok, sometimes progressive
enhancement isn’t really possible
‣ <img>!
‣ <canvas>/WebGL
‣ <video>
‣ Web sockets
‣ etc.
Saturday, 10 March 2012
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 ok
Saturday, 10 March 2012
28. HTML5 <video>
‣ Typical example of HTML5’s attitude to fallback
Saturday, 10 March 2012
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. 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. 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 being
Saturday, 10 March 2012
32. What about when alternative
mechanisms don’t exist?
‣ Make your own!
‣ Use feature detection
‣ Basic tests, or a library like Modernizr
Saturday, 10 March 2012
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. Feature detection basics
if (checkVideo()===true) {
// do stuff that uses this method
}
else {
// ignore it, and do something else
}
Saturday, 10 March 2012
35. Modernizr
‣ The mother of all feature detection libraries
‣ Available at modernizr.com
Saturday, 10 March 2012
36. Modernizr CSS example
<html lang="en-US" class="no-js">
<head>
...
<script src="modernizr.js"></script>
...
</head>
Saturday, 10 March 2012
38. Modernizr CSS example
#wrapper:hover, #wrapper:focus {
transform: rotateX(180deg);
}
Saturday, 10 March 2012
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. 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. 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 detected
Saturday, 10 March 2012
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. 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. 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. 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 frustrating
Saturday, 10 March 2012
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 works
Saturday, 10 March 2012
49. Excanvas
‣ http://excanvas.sourceforge.net/
‣ Add <canvas> support to IE
Saturday, 10 March 2012
50. Selectivizr
‣ http://selectivizr.com/
‣ Adds support for CSS3 selectors to IE6-8
Saturday, 10 March 2012
51. All sounds good, huh?
‣ Beware: slows down loading!
‣ Especially stuff that makes use of IE filters
‣ Can be mitigated by helpers such as YepNope
Saturday, 10 March 2012
54. Progressive enhancement and
alternatives
‣ Can be successful
‣ But not everything is easy to provide for
‣ And your clients might not approve
Saturday, 10 March 2012
55. Polyfills
‣ Are great
‣ But complicate things
‣ And give a performance hit
Saturday, 10 March 2012
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. It will be a while before
things get easier
Saturday, 10 March 2012
58. More resources
‣ html5please.com
‣ caniuse.com
‣ Practical CSS3: design and develop (Peachpit
Press, August 2012ish)
Saturday, 10 March 2012
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 ever
Saturday, 10 March 2012
