Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 14:42, 17 May 2009 by Feliperodrigues (Talk | contribs)

Mobile Design Pattern: High Performance Widgets: CSS Sprites

From Wiki
Jump to: navigation, search



This is the first of the series of articles High Performance Widgets. The objective of this articles is to show tips and tricks that improve your WRT widgets or Mobile Websites performance, and also make your widget optimized for a better user interaction.

The Back-end of your widgets is only 20% of the loading process, so if you want to make it faster, is in the Front-end you have to focus. The XTHML documents spend between 10 to 20% to load, the rest is divided between Style Sheets, JavaScript and Images.

How does CSS Sprites works

This Maste Image contains all the images of the example used in this article.

CSS sprites replaces the old method of slicing and dicing in a more flexible way, using nothing more than creative thinking and CSS.

The technique consists in making image-replacements using a CSS mask. Behind the mask we’ll use a master image, which is a combination of all images needed and it’s different states. You can combine all in master image or separated by specific parts (like Navigation/ Buttons/ or whatever you wish).

You can use CSS sprites in any XHTML element that accepts Backgrounds, such as Divs, Spans, p or any other block element. Now lets put it in practice:

The master image

In this image we have the buttons, the icons, the logo and the navigation. Notice that all the items that have human interaction (in this case the navigation), appear in two different forms:

Ico-url.png - The normal: Before the interaction.

Ico-active.png - The active: After the interaction. In this case, when the selected screen is showed.


Is important for every good CSS trick, to have a clean block of code.

Let's see the example bellow:

Invalid language.

You need to specify a language like this: <source lang="html4strict">...</source>

Supported languages for syntax highlighting:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, asm, asp, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, oobas, oracle11, oracle8, oxygene, oz, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, python, q, qbasic, rails, rebol, reg, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, uscript, vala, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic

            <div id="header">
                <h1 id="logo">Catch Up</h1>
                 <ul id="menu">
                    <li id="btn-url">
                        <a href="#" class="active">Urls</a>
                    <li id="btn-read">
                        <a href="#">Read</a>

This one represent the logo and the navigation. Notice that there's a link with the class active. That happened because the Div #url , which is relate to #btn-url, is the firs screen showed, so its active.

This code will serve as a base for our example. Light-weight, simple markup and easy to understand. Anyway, in the bottom of this arcticle will find the whole code (XHTML/CSS/JS) used in the interface, for mores CSS sprites examples.

Applying the CSS

Master image as background

Now, its time to style our structure. First we have to set the master image as background of all elements tha will use it.

#menu #btn-read a,
#menu #btn-url a,
#menu #btn-read .active,
#menu #btn-url .active,
background: url(../images/set.png) no-repeat;

That line of CSS code says that the logo, the navigation links and their active states, have the same background, set.png

Positioning the elements

Now we'll style them individually, changing positions the elements and setting the widths and heights to creat the CSS mask effect.

Like in a commom image replacemente, we us the display:block for the links, so we can set their width and heigh properties and the text-indent to make the link's text go.

text-indent: -999px;
width: 170px;
height: 50px;
float: left;
margin: 20px 0 0 20px;
width: 140px;
height: 55px;
float: left;
margin: 20px 0 0 30px;
#menu #btn-url a{
display: block;
width: 64px;
height: 53px;
float: left;
overflow: hidden;
text-indent: -999px;
#menu #btn-read a{
display: block;
width: 66px;
height: 53px;
float: left;
overflow: hidden;
text-indent: -999px;
margin-left: 5px;

Positioning backgrounds

Now the mask is created, let's position the backgrounds making the correct elements to meet the correct background.

background-position: -0px -0px ;
#menu #btn-read a{
background-position: -236px -0px ;
#menu #btn-url a{
background-position: -170px -0px;

The active

Now we're going to format the navigation links in the 'active' state.

When you click the navigation buttons the JavaScript in this example, says that this class active will be added to the link, changin his style.

Gladly in our case, we just have to change the background position.

#menu #btn-read a{
background-position: -236px -54px ;
#menu #btn-url a{
background-position: -170px -54px;


CSS sprites are far more flexible than Image Mapping.

Using CSS sprites on this case we save 10 HTTP Requests, which will increase a lot in the widget loading speed.

Other advantage is reducing the downloading size of the file. Besides most people assume than the master image is heavier than all images sliced individually, in fact, the master image is a lot smaller.

In this example the maste image size was 14kb and the size of all slices together where 44kb. That implicates that the CSS sprites made a reduction of 3.14 times the size of image.

That happens because the combination of images eliminate the need to load individual elements for each one, such as color tables or formatting info.


This is the .zip file, with the XHTML, CSS and JavaScript used in this article.

This examples contains a base interface for you to guide your self. Bold text

93 page views in the last 30 days.