Practical CSS3 NOW!
- 1. Practical CSS 3 Recent talks have talked about HTML5 With a smattering of CSS3 Focus on some CSS3 building blocks
- 2. Just like HTML5 Parts of CSS3 are READY TO USE NOW With *cough* some browser caveats
- 3. Gradual Introduction of CSS3 Browser support generally appears in a “demo” mode Using vendor-specific properties border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px;
- 4. Why would we use CSS3? Faster (and cheaper) development Cleaner, more maintainable code It looks better It renders in the browser quicker It scales better
- 5. Why talk about CSS3? To know, and exploit the possibilities To play to the strengths of the technology Because it will affect our process
- 6. Process Previously, we've attached a design to a feature ticket and made sure that the design has been delivered in all browsers: IE6-9, FF 3, Safari 3, Opera 9, Chrome Use the ‘toggle CSS3’ to visualise how stuff *should* look in older browsers
- 7. Browser Share on Heart London (Nov) 4.7% Safari 10.2% Chrome 7 10.8% Google 15.9% Mozilla 66.7% Microsoft
- 8. Browser Share on Heart London (Nov) 0.6% Opera 9 1.8% Firefox 3.5 3.4% Safari 5.02 3.6% Unknown 4.6% IE6 10.2% Chrome 7 13.9% Firefox 3.6 15.9% IE7 39.9% IE8
- 9. Browser-specific bug reports on Heart.co.uk 6% Other 94% IE6
- 10. Should websites look the same in all browsers? NO
- 11. CSS3 Stuff we'll cover border-radius box-shadow text-shadow text-overflow & word-wrap web fonts rgba colors multiple backgrounds background-size