Css sprite best practices
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Css sprite best practices

on

  • 5,773 views

introduce a best practices to generate css sprite image and css automatically, especially for web developper

introduce a best practices to generate css sprite image and css automatically, especially for web developper

Statistics

Views

Total Views
5,773
Views on SlideShare
5,576
Embed Views
197

Actions

Likes
3
Downloads
58
Comments
0

16 Embeds 197

http://www.huangzhimin.com 65
http://feeds.feedburner.com 45
http://huangzhimin.com 26
http://www.slideshare.net 19
http://onwebdev.blogspot.com 13
http://blog.huangzhimin.com 11
http://github.chunchu.org 5
http://blog.gabrieleromanato.com 5
http://onwebdev.blogspot.co.uk 1
http://coderwall.com 1
http://webcache.googleusercontent.com 1
http://onwebdev.blogspot.fr 1
http://xianguo.com 1
http://reader.youdao.com 1
http://flyerhzm.github.com 1
http://luckypoem1.github.io 1
More...

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

Css sprite best practices Presentation Transcript

  • 1. css sprite best practices Richard Huang Twitter: @flyerhzm Github: http://github.com/flyerhzm www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
  • 2. What is css sprite?
    • Combine a lot of small images
    • into one big image
    www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
  • 3. Why use css sprite?
    • It reduces a large number of http requests
    www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development 5% to 38% download HTML document 62% to 95% make http requests to fetch all the components in HTML document (images, javascripts and stylesheets)
  • 4. Why use css sprite? www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development #nav li a {background:none no-repeat left center} #nav li a.item1 {background-image:url('../img/image1.gif')} #nav li a:hover.item1 {background-image:url('../img/image1_over.gif')} #nav li a.item2 {background-image:url('../img/image2.gif')} #nav li a:hover.item2 {background-image:url('../img/image2_over.gif')} ...
  • 5. Why use css sprite? www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development #nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;} ...
  • 6. How to use css sprite?
    • Use Photoshop (or other tool) to combine all the images
    • Define css (background image, position and size)
    www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
  • 7. Problems in practices www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
    • Not easy to maintain
      • Put small images together
      • Calculate the position and size for each small images (x, y, width, height)
      • x=-20px, y=0px
      • width=18px, height=18px
  • 8. Problems in practices www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
    • Always conflict when using version control system
    Check out by bob Check out by joe Commit by bob Commit by joe
  • 9. Solution
    • Make css sprite automatically
    www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development Put images into one directory Automatically generate css sprite image Automatically generate css sprite css .facebook_icon { background:url(/images/css_sprite.png); no repeat 0 -20px; width: 16px; height: 16px; } Use .facebook_icon to display facebook icon
  • 10. Solution www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development The blue parts on the above image are the css_sprite directories according to convention css_sprite directories according to convention. That means the directory whose name is css_sprite or css_sprite suffixed (e.g. another_css_sprite) needs to do the css sprite.
  • 11. Solution www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development The green parts are images that need to be tranformed into the css sprite. Once you add images to the css_sprite directory or remove images, the css sprite operation will be automatically executed.
  • 12. Solution www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development The red parts are automatically generated files. For each css_sprite directory, there is a css sprite image generated, combined by all the images under the css_sprite directory, and there is also a css or sass file generated according to the css_sprite image.
  • 13. Advantage
    • Developers only need to know what images are under css_sprite directory, then they can use the corresponding class names to display these images on the html page.
    • They don’t care about css sprite image and css.
    www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
  • 14. Name Convention www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development .logos.active .gmail-logo logos-active/gmail-logo.png .logos.active .gmail_logo logos_active/gmail_logo.png .gmail-logo.active gmail-logo-active.png .gmail_logo.active gmail_logo_active.png .logos:hover .gmail-logo logos-hover/gmail-logo.png .logos:hover .gmail_logo logos_hover/gmail_logo.png .twitter-icon:hover twitter-icon-hover.png .twitter_icon:hover twitter_icon_hover.png .widget .icons .twitter_icon widget/icons/twitter_icon.png .icons .twitter_icon icons/twitter_icon.png .gmail-logo gmail-logo.png .hotmail-logo hotmail-logo.png .facebook_icon facebook_icon.png .twitter_icon twitter_icon.png class name in css_sprite css images under css_sprite directory
  • 15. Implementation
    • http://github.com/flyerhzm/css_sprite (Ruby/Rails)
    • More feature:
    • Image Optimization
    • Customization Styles
    www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development suffix: button: | text-indent: -9999px; display: inline-block; cursor: pointer; font-size: 0; line-height: 15px; border: 0; outline: 0; icon: | text-indent: -9999px; bg: | display: block;
  • 16. Articles
    • English version:
    • http://www.huangzhimin.com/entries/190-css-sprite-best-practices
    • Chinese version:
    • http://www.huangzhimin.com/entries/189-css-sprite-best-practices
    • Portuguese version:
    • http://blog.riopro.com.br/2010/04/22/acabaram-as-desculpas-para-nao-usar-css-sprite-na-sua-aplicacao/
    www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
  • 17. Q&A Thank you www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development