![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/dundee-wsg-css3-preso-110218093044-phpapp02/85/CSS3-the-new-style-council-46-320.jpg)
![CSS3 Selector examples
article>p:nth‐of‐type(1)
article>p:first‐of‐type
div[id*=page]:target
p:first‐child
input[type=text]:valid
tr:nth‐child(2n+1)
tr:nth‐child(odd)](https://image.slidesharecdn.com/dundee-wsg-css3-preso-110218093044-phpapp02/85/CSS3-the-new-style-council-47-320.jpg)
![:target is cool!
div[id*=page]
{
position:
absolute;
width:
440px;
height:
480px;
padding:
20px
30px
20px
30px;
opacity:
0;
transition:
1s
all;
}](https://image.slidesharecdn.com/dundee-wsg-css3-preso-110218093044-phpapp02/85/CSS3-the-new-style-council-49-320.jpg)
![:target is cool!
div[id*=page]:target
{
opacity:
1;
z‐index:
5;
}](https://image.slidesharecdn.com/dundee-wsg-css3-preso-110218093044-phpapp02/85/CSS3-the-new-style-council-50-320.jpg)
CSS3: the new style council
- 1. CSS3: the new style council Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills
- 2. http://www.flickr.com/photos/attackcat/5172855379/
- 3. Who the hell am I? ‣ Opera open standards evangelist and tech writer ‣ Telling the world about open standards & Opera ‣ Improving web education ‣ Moaning ‣ Drinking beer & saving the world before morning ‣ Drumming in a heavy metal band
- 5. What is CSS3? ‣ A series of new modules ‣ Add extra functionality on top of CSS2.1 ‣ Lets us do things more quickly and easily
- 6. Sounds good! ‣ Less time spent in Photoshop ‣ Less time spent with JavaScript ‣ Less time spent maintaining sites ‣ More time spent in the pub
- 7. Modular = good ‣ Browser vendors can work on one module at a time ‣ Less worry and pressure about supporting the entire spec
- 8. When should I use it? I’d argue “now” ‣ Most browsers support most of this stuff now ‣ Most of it degrades gracefully ‣ And you can work around problems ‣ Depends on what your client needs ‣ By “identical”, how similar do you mean??
- 9. 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
- 10. Modernizr
- 19. border-radius Finally — web 2.0 is easy! border‐radius: 10px; border‐radius: 0px 0px 10px 0px;
- 20. Transitions Offer animation-like abilities ‣ Set a default state for the element ‣ Choose property to transition, and duration ‣ Then set state to transition to
- 23. Transitions: easing Controlling the pattern of acceleration/ deceleration, for a more natural feel transition‐timing‐function: ease‐in; transition‐timing‐function: ease‐out; transition‐timing‐function: ease‐in‐out; transition‐timing‐function: ease‐out‐in; transition‐timing‐function: linear;
- 24. Transitions: delay Add a delay before the transition starts transition‐delay: 2s;
- 25. Multiple transitions Each with their own start time transition‐property: background‐color, width; transition‐duration: 1s, 3s;
- 26. Transition shorthand Order of properties: property, duration, timing- function, delay. transition: all 1s ease‐in 2s;
- 27. 2D Transforms Transform element size, position, rotation, skew, etc.
- 28. Transform origin What point does the transform occur around? transform‐origin: 3em bottom; transform‐origin: center; transform‐origin: 20% 50%;
- 29. Moving elements Along X and Y elements transform: translateX(50px); transform: translateY(100px); transform: translate(50px, 100px);
- 30. Resizing elements By a set scale factor transform: scale(1.1);
- 32. Rotating elements Around the origin point transform: rotate(3deg);
- 33. Combining transforms Doing multiple things in one declaration transform: scale(2) rotate(10deg) translateX(30px);
- 34. Combining transitions with transforms This is where it starts to get really fun! li a .menubutton { transition: 0.5s all; transform‐origin: center; transform: scale(1); opacity: 0.5; }
- 35. Combining transitions with transforms li a .menubutton:hover { opacity: 1; transform: scale(1.1); }
- 36. Web fonts ‣ Download custom fonts along with your web pages ‣ Solve our typography nightmares
- 38. Then use it in your page as normal p { font‐family: “My font”; }
- 39. Web fonts issues ‣ Licensing ‣ Large downloads ‣ Cross browser troubles: multiple formats needed
- 40. Browser format support ‣ Opera 10.6+: OpenType, TrueType, SVG ‣ IE9 + : EOT, OpenType, WOFF ‣ Firefox 3.6+ : OpenType, TrueType, WOFF ‣ Chrome 6+ : OpenType, TrueType, SVG ‣ Safari 5+ : OpenType, TrueType
- 42. This is what you need! @font‐face { font‐family: 'ActionIsRegular'; src: url('actionis‐webfont.eot?') format('eot'), url('actionis‐webfont.woff') format('woff'), url('actionis‐webfont.ttf') format('truetype'), url('actionis‐webfont.svg#webfontg3JxrxOm') format('svg'); font‐weight: normal; font‐style: normal; }
- 43. Media queries Media types on steroids ‣ Apply CSS depending on device/browser attributes ‣ Very useful for optimizing layouts for different devices ‣ (http://people.opera.com/danield/css3/vangogh/ index.php) ‣ http://mediaqueri.es
- 44. Device attributes ‣ Browser width/height ‣ Device width/height ‣ Resolution ‣ Aspect ratio ‣ Monochromacity ‣ etc.
- 45. A sample media query @media all and (max‐width: 480px), all and (max‐ device‐width: 480px) { ... }
- 46. 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!
- 55. And there’s more! ‣ 3D transforms ‣ multi-col ‣ Flex box ‣ Animation ‣ Gradients ‣ Reflections... ‣ ..and it goes on...
- 56. Thanks for listening! ‣ [email protected] ‣ @chrisdavidmills ‣ http://dev.opera.com ‣ http://www.opera.com/wsc ‣ http://interactwithwebstandards.com
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n