Practical CSS3 NOW!

728 views

Published on

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
728
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Practical CSS3 NOW!

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

×