CSS3 offers many new features that allow for effects previously requiring image editing or JavaScript programs. These include drop shadows, gradients, rounded corners, transparency, and animations. CSS3 selectors also allow targeting elements more precisely with less markup. Features like multiple backgrounds and flexible box layout reduce the need for divs. Browser support is improving, though graceful degradation is still needed. Tools like Selectivizr, CSS3 Pie and Modernizr help provide CSS3 support in older browsers.

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

2. 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

3. CSS3!
http://www.flickr.com/photos/burningmax/4956554644/

4. http://www.flickr.com/photos/drakelelane/3891672125/

5. Today I'll 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

6. Where did it evolve from?
http://www.flickr.com/photos/dyanna/3202542828/

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

8. 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

9. 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

10. 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

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

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

13. What does CSS3 offer?
http://www.flickr.com/photos/bre/552152780/

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

15. The modules
Selectors | Color | Backgrounds and borders
Media queries | Multi-column layout | Fonts
2D Transformations | Transitions | Animation
Image values | Basic user interface | Text
Flexible box layout | 3D transformations
Grid positioning | Ruby | Template layout

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

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

18. Why is CSS3 so cool?
http://www.flickr.com/photos/mafleen/3780072133/

19. We've done most of
this stuff before...
http://www.flickr.com/photos/monkeytime/4120229885/

20. ...so why...
http://www.flickr.com/photos/shawnblog/566041143/

21. ...should we care?
http://www.flickr.com/photos/philliecasablanca/2816530573/

22. Simple...makes common
tasks 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

23. Less Photoshop
Doing this programmatically is so much more
flexible!
Classic examples:
‣ Drop shadows
‣ Gradients
‣ Rounded corners
‣ Transparency

24. Drop shadows
text‐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,

25. Gradients
background‐image: ‐o‐linear‐gradient(top
left,rgb(255,0,0),rgb(150,0,0));

26. Rounded corners
border‐radius: 10px;
border‐radius: 0px 0px 10px 0px;

27. Transparency
opacity: 0.6;
background‐color: rgba(204,204,204,0.6);

28. Less JavaScript
Designers don't like coding
And not relying on JS can mean smaller
downloads, and better compatibility
Obvious behavioural stuff:
‣ Animation
‣ Style/layout switchers
‣ Showing/hiding

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

30. 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

31. 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.

32. 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!

33. 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!

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

35. When can we start using
these tools?

36. Now!
http://www.flickr.com/photos/ilamont/5538511847/

37. Yes, there's browser
support 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??

38. 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

39. Selectivizr

40. CSS3 pie

41. Modernizr

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