Practical CSS3 NOW!
Upcoming SlideShare
Loading in...5
×
 

Practical CSS3 NOW!

on

  • 667 views

 

Statistics

Views

Total Views
667
Views on SlideShare
643
Embed Views
24

Actions

Likes
0
Downloads
12
Comments
0

4 Embeds 24

http://www.gareth53.co.uk 21
http://gareth53.co.uk 1
http://localhost 1
http://ranksit.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Practical CSS3 NOW! Practical CSS3 NOW! Presentation Transcript

  • Practical CSS 3
    • Recent talks have talked about HTML5
    • With a smattering of CSS3
    • Focus on some CSS3 building blocks
  • Just like HTML5
    • Parts of CSS3 are READY TO USE NOW
    • With *cough* some browser caveats
  • 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; View slide
  • 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
    View slide
  • Why talk about CSS3?
    • To know, and exploit the possibilities
    • To play to the strengths of the technology
    • Because it will affect our process
  • 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
  • Browser Share on Heart London (Nov) 4.7% Safari 10.2% Chrome 7 10.8% Google 15.9% Mozilla 66.7% Microsoft
  • 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
  • Browser-specific bug reports on Heart.co.uk 6% Other 94% IE6
  • Should websites look the same in all browsers?
    • NO
  • CSS3 Stuff we'll cover
    • border-radius
    • box-shadow
    • text-shadow
    • text-overflow & word-wrap
    • web fonts
    • rgba colors
    • multiple backgrounds
    • background-size