Dan Cederholm finished out An Event Apart Chicago 2009 with a demonstration of some advanced CSS3 techniques.
earliest example of progressive enhancement: font stack
8 simple ways to apply advanced CSS2/3
Do web sites need to be *experienced* the same in every browser?
- generated content
- :before, :after
- enriching form elements
- -border-radius
- attribute selectors
- RGBa
- great for use on top of textures
- create contrast
- makes choosing complementary colors easier: one base, different opacities
- drop-shadows
- use box-shadow with RGBa (awesome!)
- and text-shadow work with RBGa?
- enrichment from interaction
- transform: scale() (use that for news)
- -webkit-transition
- bulletproof button text
- negative text-shadow = inset
- opacity for simple hover treatments
- 50% for normal state, full for hover
- don’t need to export different images for different opacity levels
- single image, different opacities
- dim unselected options
- adding (slight) rotation
- fade effects
- webkit_________
Put it all together http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com.
Since it’s part of the experience, not the content, it’s OK to experiment.
Q&A
- -transition goes on normal element, but activated on hover
- So you can’t do different transition for different actions?
- yeah, seems like that’s true
- With RGBa, other browsers will ignore rule?
- yeah, so specify hex, then RGBa
- How to deal with clients when it doesn’t look the same?
- refer back to Andy Clark’s talk – sell less time, less code, fewer assets, etc.
- probably won’t notice it/check it in all browsers
- Why not use jQuery?
- if it’s crucial, might want to use JavaScript
- photoshop comps aren’t going to show interaction?
- I guess this was an argument for using comps, making it easier to sell different experience to client?
- How is it different from blink/frames?
- not really a valid comparison, not markup, subtle
- Aren’t we encouraging evilness of Microsoft by using vendor-specific?
- transitions are only ones that are not part of the CSS3 spec
- “this is cool, so let’s act”
- You use a lot of PNG backgrounds, why not use gradients?
- yeah, old habits, sure, use CSS3 gradients