Your SlideShare is downloading. ×
0
css sprite best practices Richard Huang Twitter: @flyerhzm Github: http://github.com/flyerhzm www.ekohe.com Web Developmen...
What is css sprite? <ul><li>Combine a lot of small images </li></ul><ul><li>into one big image </li></ul>www.ekohe.com Web...
Why use css sprite? <ul><li>It reduces a large number of http requests </li></ul>www.ekohe.com Web Development & Graphic D...
Why use css sprite? www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Ra...
Why use css sprite? www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Ra...
How to use css sprite? <ul><li>Use Photoshop (or other tool) to combine all the images </li></ul><ul><li>Define css (backg...
Problems in practices www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - ...
Problems in practices www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - ...
Solution <ul><li>Make css sprite automatically </li></ul>www.ekohe.com Web Development & Graphic Design China Ruby on Rail...
Solution www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Service...
Solution www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Service...
Solution www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Service...
Advantage <ul><li>Developers only need to know what images are under css_sprite directory, then they can use the correspon...
Name Convention www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails ...
Implementation <ul><li>http://github.com/flyerhzm/css_sprite (Ruby/Rails) </li></ul><ul><li>More feature: </li></ul><ul><l...
Articles <ul><li>English version:   </li></ul><ul><li>http://www.huangzhimin.com/entries/190-css-sprite-best-practices </l...
Q&A Thank you www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Se...
Upcoming SlideShare
Loading in...5
×

Css sprite best practices

4,815

Published on

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

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

No Downloads
Views
Total Views
4,815
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
68
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Css sprite best practices"

  1. 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. 2. What is css sprite? <ul><li>Combine a lot of small images </li></ul><ul><li>into one big image </li></ul>www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
  3. 3. Why use css sprite? <ul><li>It reduces a large number of http requests </li></ul>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. 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. 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. 6. How to use css sprite? <ul><li>Use Photoshop (or other tool) to combine all the images </li></ul><ul><li>Define css (background image, position and size) </li></ul>www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
  7. 7. Problems in practices www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development <ul><li>Not easy to maintain </li></ul><ul><ul><li>Put small images together </li></ul></ul><ul><ul><li>Calculate the position and size for each small images (x, y, width, height) </li></ul></ul><ul><ul><li>x=-20px, y=0px </li></ul></ul><ul><ul><li>width=18px, height=18px </li></ul></ul>
  8. 8. Problems in practices www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development <ul><li>Always conflict when using version control system </li></ul>Check out by bob Check out by joe Commit by bob Commit by joe
  9. 9. Solution <ul><li>Make css sprite automatically </li></ul>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. 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. 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. 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. 13. Advantage <ul><li>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. </li></ul><ul><li>They don’t care about css sprite image and css. </li></ul>www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
  14. 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. 15. Implementation <ul><li>http://github.com/flyerhzm/css_sprite (Ruby/Rails) </li></ul><ul><li>More feature: </li></ul><ul><li>Image Optimization </li></ul><ul><li>Customization Styles </li></ul>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. 16. Articles <ul><li>English version: </li></ul><ul><li>http://www.huangzhimin.com/entries/190-css-sprite-best-practices </li></ul><ul><li>Chinese version: </li></ul><ul><li>http://www.huangzhimin.com/entries/189-css-sprite-best-practices </li></ul><ul><li>Portuguese version: </li></ul><ul><li>http://blog.riopro.com.br/2010/04/22/acabaram-as-desculpas-para-nao-usar-css-sprite-na-sua-aplicacao/ </li></ul>www.ekohe.com Web Development & Graphic Design China Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
  17. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×