Default Implementation of CSS Sprites in DevExpress Themes

  • 2 min to read

All built-in DevExpress ASP.NET Themes utilize CSS image sprites. Every theme includes "sprite.png" and "sprite.gif" files with composite images (the latter required for IE6 support, since it does not support transparent PNG files). Individual image settings are stored within 'sprite.css' files.

The table below illustrates settings used in the Aqua Theme. It displays the file structure, the content of the 'sprite.png' file and the content of the sprite.css file (truncated for demonstration).

File Structure:

CSS-Sprites-Aqua-GridView.png

Note that not all images are combined into a sprite image. Animation (such as the 'Loading.gif') and repeated background images are stored as standalone files.

File 'sprite.png':

   sprite-Aqua-GridView.png

File 'sprite.css':

... /* truncated */
.dxGridView_gvDragAndDropArrowDown_Aqua,
.dxGridView_gvDragAndDropArrowUp_Aqua,
...
.dxGridView_gvHeaderFilter_Aqua,
... 
{
    background-image: url('<%=WebResource("DevExpress.Web.ASPxThemes.App_Themes.Aqua.GridView.sprite.png")%');
    -background-image: url('<%=WebResource("DevExpress.Web.ASPxThemes.App_Themes.Aqua.GridView.sprite.gif")%>'); /* for IE6 */
    background-repeat: no-repeat;
    background-color: transparent;
}

...

.dxGridView_gvDragAndDropArrowDown_Aqua {
    background-position: 0px 0px;
    width: 11px;
    height: 9px;
}

.dxGridView_gvDragAndDropArrowUp_Aqua {
    background-position: 0px -17px;
    width: 11px;
    height: 9px;
}

...

.dxGridView_gvHeaderFilter_Aqua {
    background-position: 0px -36px;
    width: 19px;
    height: 19px;
}

... /* truncated */

Default sprite images and sprite CSS files are stored as resources within the ASPxThemes Assembly. This implementation provides optimal application performance, because CSS image sprites reduce the number of requests for images, and resource file compression (such as scripts and CSS files) minimizes traffic.