css sprite best practices
DESCRIPTION
introduce a best practices to generate css sprite image and css automatically, especially for web developperTRANSCRIPT
css sprite best practices
Richard Huang
Twitter: @flyerhzm
Github: http://github.com/flyerhzm
www.ekohe.comWeb Development & Graphic DesignChina Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
What is css sprite?Combine a lot of small images
into one big image
www.ekohe.comWeb Development & Graphic DesignChina Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
Why use css sprite?It reduces a large number of http requests
www.ekohe.comWeb Development & Graphic DesignChina 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)
Why use css sprite?
www.ekohe.comWeb Development & Graphic DesignChina 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')}
...
Why use css sprite?
www.ekohe.comWeb Development & Graphic DesignChina 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;}
...
How to use css sprite?Use Photoshop (or other tool) to combine all the images
Define css (background image, position and size)
www.ekohe.comWeb Development & Graphic DesignChina Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
Problems in practices
www.ekohe.comWeb Development & Graphic DesignChina 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
Problems in practices
www.ekohe.comWeb Development & Graphic DesignChina 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
SolutionMake css sprite automatically
www.ekohe.comWeb Development & Graphic DesignChina 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
Solution
www.ekohe.comWeb Development & Graphic DesignChina 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.
Solution
www.ekohe.comWeb Development & Graphic DesignChina 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.
Solution
www.ekohe.comWeb Development & Graphic DesignChina 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.
AdvantageDevelopers 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.comWeb Development & Graphic DesignChina Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
Name Convention
www.ekohe.comWeb Development & Graphic DesignChina Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
images under css_sprite directory
class name in css_sprite css
twitter_icon.png .twitter_icon
facebook_icon.png .facebook_icon
hotmail-logo.png .hotmail-logo
gmail-logo.png .gmail-logo
icons/twitter_icon.png .icons .twitter_icon
widget/icons/twitter_icon.png .widget .icons .twitter_icon
twitter_icon_hover.png .twitter_icon:hover
twitter-icon-hover.png .twitter-icon:hover
logos_hover/gmail_logo.png .logos:hover .gmail_logo
logos-hover/gmail-logo.png .logos:hover .gmail-logo
gmail_logo_active.png .gmail_logo.active
gmail-logo-active.png .gmail-logo.active
logos_active/gmail_logo.png .logos.active .gmail_logo
logos-active/gmail-logo.png .logos.active .gmail-logo
Implementationhttp://github.com/flyerhzm/css_sprite (Ruby/Rails)
More feature:
Image Optimization
Customization Styles
www.ekohe.comWeb Development & Graphic DesignChina 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;
ArticlesEnglish 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.comWeb Development & Graphic DesignChina Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development
Q&A
Thank you
www.ekohe.comWeb Development & Graphic DesignChina Ruby on Rails Development - Rails Consulting - Rails Services - Merb - Offshore Web Development