![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!](https://image.slidesharecdn.com/css3-setting-the-scene-110323161120-phpapp01/85/CSS3-stay-tuned-for-style-33-320.jpg)
CSS3: stay tuned for style
- 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
- 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/
- 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
- 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!
- 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! ‣ [email protected] ‣ @chrisdavidmills ‣ http://dev.opera.com ‣ http://www.opera.com/wsc