CSS3: stay tuned for style

1,595 views

Published on

This talk gives a light introduction to CSS3, talking about where it evolved from, what features are available in the new language, why it brings so many advantages to web designers, and how you can start using it now in your production projects.

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

  • Be the first to like this

No Downloads
Views
Total views
1,595
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CSS3: stay tuned for style

    1. 1. CSS3: stay tuned for style Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills
    2. 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. 3. CSS3! http://www.flickr.com/photos/burningmax/4956554644/
    4. 4. http://www.flickr.com/photos/drakelelane/3891672125/
    5. 5. 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
    6. 6. Where did it evolve from? http://www.flickr.com/photos/dyanna/3202542828/
    7. 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. 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. 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. 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. 11. Vendor prefixes help...Like sandboxes for browsers to experiment! http://www.flickr.com/photos/horiavarlan/4290846294/
    12. 12. Vendor prefixes...‐ms‐transform‐origin:
center;‐moz‐transform‐origin:
center;‐o‐transform‐origin:
center;‐webkit‐transform‐origin:
center;
transform‐origin:
center;
    13. 13. What does CSS3 offer? http://www.flickr.com/photos/bre/552152780/
    14. 14. What is CSS3?‣ A series of new modules‣ Adds extra functionality on top of CSS2.1
    15. 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. 16. The modulesAnd loads more!See http://www.w3.org/Style/CSS/current-work.en.html for more information
    17. 17. Modular = good‣ Browser vendors can work on one module at a time‣ Less worry and pressure about supporting the entire spec
    18. 18. Why is CSS3 so cool? http://www.flickr.com/photos/mafleen/3780072133/
    19. 19. Weve done most ofthis stuff before... http://www.flickr.com/photos/monkeytime/4120229885/
    20. 20. ...so why... http://www.flickr.com/photos/shawnblog/566041143/
    21. 21. ...should we care? http://www.flickr.com/photos/philliecasablanca/2816530573/
    22. 22. 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
    23. 23. Less PhotoshopDoing this programmatically is so much moreflexible!Classic examples: ‣ Drop shadows ‣ Gradients ‣ Rounded corners ‣ Transparency
    24. 24. 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,
    25. 25. Gradientsbackground‐image:
‐o‐linear‐gradient(top
left,rgb(255,0,0),rgb(150,0,0));
    26. 26. Rounded cornersborder‐radius:
10px;border‐radius:
0px
0px
10px
0px;
    27. 27. Transparencyopacity:
0.6;background‐color:
rgba(204,204,204,0.6);
    28. 28. Less JavaScriptDesigners dont like codingAnd not relying on JS can mean smallerdownloads, and better compatibilityObvious behavioural stuff: ‣ Animation ‣ Style/layout switchers ‣ Showing/hiding
    29. 29. Animation‣ CSS keyframe animations allow you to create animations that run independently‣ Transitions allow animation that is dependant on state changes
    30. 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. 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. 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. 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. 34. Multiple backgroundsheader
{

background:
url(icon.gif)
top
left
no‐repeat,













url(pattern.jpg)
repeat,













url(center‐spine.png)
top
center













repeat‐y;

}
    35. 35. When can we start usingthese tools?
    36. 36. Now! http://www.flickr.com/photos/ilamont/5538511847/
    37. 37. 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??
    38. 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. 39. Selectivizr
    40. 40. CSS3 pie
    41. 41. Modernizr
    42. 42. Thanks for listening!‣ cmills@opera.com‣ @chrisdavidmills‣ http://dev.opera.com‣ http://www.opera.com/wsc

    ×