The W3C has changed their approach a bit with CSS3. They've made things modular and each module is designed to be implemented separately and independently from each other.
This is good for us because it (hopefully) helps the spec move forward faster and allows browser makers to implement module by module.
It lets us play with lots of the new CSS3 properties that aren't 100% complete.
Vendor prefixes anybody?
- -moz (Gecko)
- -webkit (Webkit)
- -o (Presto)
- -ms (Trident)
Build for the most advanced / capable browsers.
Older browsers have a passable experience.
Focuses on content and builds everything upon that. Consider it a layered approach:
- Content (semantic HTML) - ensures that the most basic browser will work.
- Presentation (CSS)
- Functionality (Javascript)
There are a large number of CSS3 selectors in the spec. I'm only going to touch on some of the more relevant. It's worth noting that these have been around since '05 - '06.
h1 ~ p- general sibling selector, would select any p's that are siblings to the h1. They don't have to be direct siblings though. IE7+- `img[src^=icon] - advanced attribute selector, selects and image where the src attribute starts with 'icon', IE7+
- `img[src$=png] - advanced attribute selector, selects an image where the src attribute ends with 'png', IE7+
- `img[src*=document] - advanced attribute selector, selects an image where the src attribute contains 'document', IE7+
- :empty - :psuedo-classes, selects any element without any content, IE9+
- :enabled, :disabled, :checked - psuedo-classes, specific to form element states (radios, checkboxes, inputs, etc), IE9+
- :first-of-type, the first child of it's type, based on the parent, IE9+
- :last-child, last child of it's parent, IE9+
- :not, negates part of a selector, ie: strong *:not(span) {font-weight: normal}, the span would be the only thing that bold, IE9+
- :nth-child(), select elements based on a simple forumula, ie: p:nth-child(3n), would select every 3rd paragraph, IE9+
- :nth-of-type(), works the same was a :nth-child just based on the element, IE9+
- :nth-last-child(), works the same as :nth-child, except it starts from the last child instead of the first, IE9+
- :nth-last-of-type(), same as above, just based on the element, IE9+
- :only-child, selects the only child of its parent, IE9+
- :only-of-type, only child, based on the parent, IE9+
- ::selection, changes the color of the selected text, IE9+
- :target, applies whatever styles to an ID with the same value as a url's hash, IE9+
What can you use today?
- background-clip, decides whether the background covers the border-box, padding-box, or content-box, IE9+
- background-size, sets the size of the background im px, %, IE9+
- multiple background images
- border-radius, IE9+
- box-shadow, IE9+
- columns & grids, we'll talk about this later
- opacity
- resize, allows the user to resize an element, no IE
- text-overflow, when text is clipped (overflow set as something other than visible, white-space: nowrap), shows an ellipsis, IE6+
- text-shadow, No IE
- RGBa
Can be applied on border, color, font-size, font-weight, margin, padding, opacity, position, height, width, etc.
Hardware accelerated.
a{
color: #fff;
padding: 5px 15px;
background-color: #999;
-webkit-transition-property: background-color; // the property to apply the transiton to
-webkit-duration: 0.3s; // how long the transiton should last
-webkit-transition-timing-funciton: ease; // easing
-webkit-transition-delay: 0.5s; // delay before the transiton starts
// shorthand
-webkit-transition: background-color 0.3s ease 0.5s;
}
a:hover{
background-color: #000;
}
Create custom timing functions http://cubic-bezier.com/#.17,.67,.83,.67
Nice example of transitions: http://daneden.me/animate/#cta
http://24ways.org/2010/intro-to-css-3d-transforms http://desandro.github.com/3dtransforms/examples/perspective-01.html http://desandro.github.com/3dtransforms/examples/transforms-01-functions.html http://desandro.github.com/3dtransforms/examples/card-01.html http://desandro.github.com/3dtransforms/examples/cube-02-show-sides.html http://desandro.github.com/3dtransforms/examples/carousel-02-dynamic.html
http://www.designmadeingermany.de/magazin/5/ http://www.designmadeingermany.de/blog/der-backgroundtrick/
http://selectivizr.com/ http://modernizr.com http://css3pie.com/