CSS3: stay tuned for style

CSS3: stay tuned for style Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills

Who the hell am I?‣ Opera open standards evangelist and tech writer‣ Telling the world about open standards & Opera‣ Improving web education‣ Drinking beer & saving the world before morning‣ Drumming in a heavy metal band

CSS3! http://www.ﬂickr.com/photos/burningmax/4956554644/

http://www.ﬂickr.com/photos/drakelelane/3891672125/

Today Ill cover‣ Where CSS3 came from‣ What it brings to the table‣ Why it is worth knowing about‣ When (and how) you can start using it

Where did it evolve from? http://www.ﬂickr.com/photos/dyanna/3202542828/

Brief CSS history‣ CSS invented by Håkon Wium Lie and Bert Bos around 1994/5‣ CSS1 rec published in 1996‣ CSS2 rec published 1998, including things like absolute, relative, and fixed positioning, z-index, media types

Brief CSS history‣ CSS 2.1 work started soon after, to remove errors and inconsistencies, but this is still not completely finished‣ Kept pinging back and forth between working draft and candidate rec. Currently sat at last call working draft, as of Dec 2010

Brief CSS history‣ CSS3 also started soon after CSS2, to add new features‣ Earliest CSS3 drafts published in June 1999‣ As of March 2011, there are over 40 CSS3 module drafts published‣ Some a lot more stable than others

W3C breaking down?‣ You might think so...‣ ...especially considering the XHTML2/HTML5 debacle as well‣ Browsers and developers are largely rushing ahead‣ But at least things are getting standardized

Vendor prefixes help...Like sandboxes for browsers to experiment! http://www.ﬂickr.com/photos/horiavarlan/4290846294/

Vendor prefixes...‐ms‐transform‐origin: center;‐moz‐transform‐origin: center;‐o‐transform‐origin: center;‐webkit‐transform‐origin: center; transform‐origin: center;

What does CSS3 offer? http://www.ﬂickr.com/photos/bre/552152780/

What is CSS3?‣ A series of new modules‣ Adds extra functionality on top of CSS2.1

The modulesAnd loads more!See http://www.w3.org/Style/CSS/current-work.en.html for more information

Modular = good‣ Browser vendors can work on one module at a time‣ Less worry and pressure about supporting the entire spec

Why is CSS3 so cool? http://www.ﬂickr.com/photos/maﬂeen/3780072133/

Weve done most ofthis stuff before... http://www.ﬂickr.com/photos/monkeytime/4120229885/

...so why... http://www.ﬂickr.com/photos/shawnblog/566041143/

...should we care? http://www.ﬂickr.com/photos/philliecasablanca/2816530573/

Simple...makes commontasks easier and simpler‣ Less time spent in Photoshop‣ Less time spent with JavaScript‣ Less presentational markup‣ Less time spent dicking about with Flash‣ More time spent in the pub

Less PhotoshopDoing this programmatically is so much moreflexible!Classic examples: ‣ Drop shadows ‣ Gradients ‣ Rounded corners ‣ Transparency

Drop shadowstext‐shadow: black 3px 3px 5px;box‐shadow: black 4px 4px 5px;text‐shadow: 0 0 4px white,             0 ‐5px 4px #ffff33,             2px ‐10px 6px #ffdd33,             ‐2px ‐15px 11px #ff8800,             2px ‐25px 18px #ff2200,

Gradientsbackground‐image: ‐o‐linear‐gradient(top left,rgb(255,0,0),rgb(150,0,0));

Rounded cornersborder‐radius: 10px;border‐radius: 0px 0px 10px 0px;

Transparencyopacity: 0.6;background‐color: rgba(204,204,204,0.6);

Less JavaScriptDesigners dont like codingAnd not relying on JS can mean smallerdownloads, and better compatibilityObvious behavioural stuff: ‣ Animation ‣ Style/layout switchers ‣ Showing/hiding

Animation‣ CSS keyframe animations allow you to create animations that run independently‣ Transitions allow animation that is dependant on state changes

Controlling layouts‣ Media queries allow you to apply CSS depending on browser/device attributes such as resolution, screen width and height, and more‣ Multi-column layout allows you to easily put your content into columns

Showing/hiding‣ :target pseudo-class: apply CSS depending on whether the element selected is the target of a fragment identifier‣ So when links are clicked you could make panels, etc. appear.

Less presentational markup‣ CSS3 includes a wide variety of new selectors to allow you to select what you want more easily, with less classes/ids‣ Features like multiple background images and rounded corners allow you to get rid of some of those nested divisions!

CSS3 selectors[attr*=str] :nth‐last‐of‐type(n)[attr^=str] :nth‐last‐child(n)[attr~=str] :only‐child:first‐child :only‐of‐type:last‐child :checked:first‐of‐type :valid:last‐of‐type :invalid:nth‐child(n) :enabled :target:nth‐of‐type(n) :disabled And more!

Multiple backgroundsheader {  background: url(icon.gif) top left no‐repeat,              url(pattern.jpg) repeat,              url(center‐spine.png) top center              repeat‐y;  }

When can we start usingthese tools?

Now! http://www.ﬂickr.com/photos/ilamont/5538511847/

Yes, theres browsersupport to consider‣ But most browsers support most of this stuff now, even IE9!‣ Most of it degrades gracefully‣ And you can work around problems‣ Depends on what your client needs‣ By “identical”, how similar do you mean??

Try to argue the case......”identical in every browser” is outdated‣ Especially with mobile phones, iPad, tablets...‣ And IE6 is a decade old now‣ Surely providing an acceptable experience in each browser is, well, acceptable?‣ Then you can spend more less time on hacking

Selectivizr

CSS3 pie

Modernizr

Thanks for listening!‣ cmills@opera.com‣ @chrisdavidmills‣ http://dev.opera.com‣ http://www.opera.com/wsc

CSS3: stay tuned for style

by Chris Mills on Mar 23, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

CSS3: stay tuned for style — Presentation Transcript