html5 and css3: does now really mean now?

CSS3 and HTML5

Does now reallymean now?

Saturday, 10 March 2012

‣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

Hi! I’m Chris Mills

cmills@opera.com@chrisdavidmills

http://www.slideshare.net/chrisdavidmillshttp://dev.opera.com

http://www.w3.org/community/webed/

‣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.)

What we’ll talk about

Do you need it at all?

‣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

HTML5 and CSS3 are fun

Do you need it?

If you are going to useprefixed 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);

Progressive enhancement

‣If *at all possible*

‣Build a base level of functionality that works

‣Then enhance the user experience

Don’t rely on The Shiny™

Example: Ajax

‣Ajax makes data updates more responsive

‣But the base functionality could still work with no Ajax

‣Albeit with page reloads

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/

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/

‣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

Example: CSS animation

‣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

Example: Media queries

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

This is all fine...

‣So long as your boss/client is cool with that!

‣Many still obsess over identical layouts/functionality across browsers

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

Acceptable alternatives

‣<img>!

‣<canvas>/WebGL

‣<video>

‣Web sockets

‣etc.

Ok, sometimes progressive enhancement isn’t really possible

‣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

Fallbacks often a good option

‣Typical example of HTML5’s attitude to fallback

HTML5 <video>

HTML5 <video>

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.

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

What about when alternative mechanisms don’t exist?

‣Make your own!

‣Use feature detection

‣Basic tests, or a library like Modernizr

Feature detection basicsif (window.chrome) { // do stuff that works on Chrome}else { // ignore it, and do something else}

Feature detection basicsif (checkVideo()===true) { // do stuff that uses this method}else { // ignore it, and do something else}

Modernizr

‣The mother of all feature detection libraries

‣Available at modernizr.com

Modernizr CSS example<html lang="en-US" class="no-js"><head> ...<script src="modernizr.js"></script> ...</head>

Modernizr CSS example

#wrapper:hover, #wrapper:focus { transform: rotateX(180deg);}

.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%);}

function rotateForm() { if(Modernizr.cssanimations) { form.setAttribute("class","form-rotate"); form.style.left = "0rem"; } else { back.style.zIndex = "5"; }; };

Modernizr JS example

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

IE conditional comments

Polyfills/shims

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)

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; }

Oh, but IE 6-8 needsome more help

‣They refuse to style unknown elements, unless you create instances of them in the DOM

‣document.createElement('article');

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

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

‣http://excanvas.sourceforge.net/

‣Add <canvas> support to IE

Excanvas

‣http://selectivizr.com/

‣Adds support for CSS3 selectors to IE6-8

Selectivizr

All sounds good, huh?

‣Beware: slows down loading!

‣Especially stuff that makes use of IE filters

‣Can be mitigated by helpers such as YepNope

To summarise

Does now really mean now?

Progressive enhancement and alternatives

‣Can be successful

‣But not everything is easy to provide for

‣And your clients might not approve

‣Are great

‣But complicate things

‣And give a performance hit

Polyfills

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?

It will be a while before things get easier

More resources

‣html5please.com

‣caniuse.com

‣Practical CSS3: design and develop (Peachpit Press, August 2012ish)

cmills@opera.com@chrisdavidmills

http://www.slideshare.net/chrisdavidmillshttp://dev.opera.com

http://www.w3.org/community/webed/

Thanks!

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

Thank you CC!

html5 and css3: does now really mean now?

modernizr css example

use polyfillsshims

feature detection basics

dont support

web fonts

perfect feature

feature detection basic

ajax ajax

Technology

html5 css3 js

html5+css3 01

html5 css3

html5 css3 javascript

découverte html5/css3

css3, html5

html5 y css3

html5 e css3

html5 + css3 + javascript

html5 & css3 : jeux

formation html5/css3

html5 & css3

html5 and-css3

html5 css3 websocket

html5 i css3

html5? · html5 und css3 sind keine abgeschlossenen...

html5 &&& css3

html5/css3 @ baidu

curso css3 - programacion en html5 css3

html5 and css3