This talk covers new features of CSS3, such as drop shadows, gradients, animations, transitions, transforms, and web fonts. I discuss what the features allow you to do, why they are worth knowing about and how you can use them today. I delivered this to a class at Oxford Brookes university on the 25th March 2011.
3. In this talk 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
4. Where did it evolve from?
http://www.flickr.com/photos/dyanna/3202542828/
5. Brief CSS history
‣ CSS1 published in 1996
‣ CSS2 rec published 1998, including things like
absolute, relative, and fixed positioning, z-index,
media types
‣ CSS 2.1 work started soon after, to remove
errors and inconsistencies, but this is still not
completely finished
6. Brief CSS history
‣ CSS3 work also started soon after CSS2, to add
new features
‣ Looking at common design features, and
implementing ways to make them easier
‣ Earliest CSS3 drafts published in June 1999
‣ As of March 2011, there are over 40 CSS3
module drafts published
7. What does CSS3 offer?
http://www.flickr.com/photos/bre/552152780/
8. 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
9. The modules
And loads more!
See http://www.w3.org/Style/CSS/current-
work.en.html for more information
10. Modular = good
‣ Browser vendors can work on one module at a
time
‣ Less worry and pressure about supporting the
entire spec
11. Why is CSS3 so cool?
http://www.flickr.com/photos/mafleen/3780072133/
12. We've done most of
this stuff before...
http://www.flickr.com/photos/monkeytime/4120229885/
14. ...should we care?
http://www.flickr.com/photos/philliecasablanca/2816530573/
15. 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
16. Less Photoshop
Doing this programmatically is so much more
flexible!
Classic examples:
‣ Drop shadows
‣ Gradients
‣ Rounded corners
‣ Transparency
21. 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
22. Animation
‣ CSS keyframe animations allow you to create
animations that run independently
‣ Transitions allow animation that is dependant
on state changes
28. Easing
Controlling the pattern of acceleration/
deceleration, for a more natural feel
animation‐timing‐function: linear;
transition‐timing‐function: linear;
ease‐in, ease‐out, ease‐in‐out, ease‐out‐in;
29. Delay
Add a delay before the transition starts
animation‐delay: 2s;
transition‐delay: 2s;
30. Multiple Animations
Each with their own start time
transition‐property: background‐color, width;
transition‐duration: 1s, 3s;
31. Animation shorthand
Order of properties: property, duration, timing-
function, delay.
transition: all 1s ease‐in 2s;
39. 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
40. 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
41. Device attributes
‣ Browser width/height
‣ Device width/height
‣ Resolution
‣ Aspect ratio
‣ Monochromacity
‣ etc.
42. A sample media query
@media all and (max‐width: 480px), all and (max‐
device‐width: 480px) {
...
}
43. 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.
47. 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!
55. 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??
56. 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
