Styling Elements With Glyphs, Sprites and Pseudo-Elements

In 2002, Mark Newhouse published the article "Taming Lists", a very interesting piece in which he explained how to create custom list markers using pseudo-elements. Almost a decade later, Nicolas Gallagher came up with the technique pseudo background-crop which uses pseudo-elements with a sprite.
Today, on the shoulders of giants, we’ll try to push the envelope. We’ll discuss how you can style elements with no extra markup and using a bidi-friendly high-contrast proof CSS sprite technique. The technique will work in Internet Explorer 6/7 as well.

[Editor's note: A must-have for professional Web designers and developers: The Printed Smashing Books Bundle is full of practical insight for your daily work. Get the bundle right away!]

Starting with special characters

There is a plethora of glyphs out there that we could use instead of images to create custom markers. This should improve:

• performance (there is no HTTP request)
• usability (these characters will grow or shrink according to user’s settings)
• maintenance (no sprite to create, no asset to deal with)
• accessibility (see further below).

Example:

The markers (♠, ♣, ♥, ♦) in the list above are created via the following rules:
HTML:

1	<ul class="glyphs">

2	<li class="one">performanceli>

3	<li class="two">usabilityli>

4	<li class="three red">maintenance li>

5	<li class="four red">accessibilityli>

6

ul>

CSS:

01

.glyphs {

02	list-style-type: none;

03

}

04

05	.glyphs li:before,

06	.glyphs b {

07	display: inline-block;

08	width: 1.5em;

09	font-size: 1.5em;

10	text-align: center;

11

}

12

13

.one {

14	background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♠'+this.innerHTML);

15

}

16	.one:before {

17	content: "\2660"; /* ♠ */

18

}

19

.two {

20	background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♣'+this.innerHTML);

21

}

22	.two:before {

23	content: "\2663"; /* ♣ */

24

}

25

.three {

26	background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♥'+this.innerHTML);

27

}

28	.three:before {

29	content: "\2665"; /* ♥ */

30

}

31

.four {

32	background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♦'+this.innerHTML);

33

}

34	.four:before {

35	content: "\2666"; /* ♦ */

36

}

37

38

.red b,

39	.red:before {

40	color: red;

41

}

How does this work?

• The value of the content property must be an escaped reference to the hexadecimal Unicode character value (for IE, we use HTML entities).
• Internet Explorer 6/7 do not support ::before nor :before, so the characters are plugged via CSS expressions.
• IE8 does not support ::before, but does support the single colon notation
• Please notice that putting aside browser support, “there’s no difference between :before and ::before, or between :after and ::after. The single colon syntax (e.g. :before or :first-child) is the syntax used for both pseudo-classes and pseudo-selectors in all versions of CSS prior to CSS3. With the introduction of CSS3, in order to make a differentiation between pseudo-classes and pseudo-elements, in CSS3 all pseudo-elements must use the double-colon syntax, and all pseudo-classes must use the single-colon syntax.”
• In IE, characters are wrapped in elements, so we have a means to target and style them (you may rather want to rely on a class name for that).

Note that the CSS expressions we use here are not as bad as the ones generally used to mimic min-width and the like. These are only evaluated once, which should result in a small performance hit.

Displaying Images Via Pseudo-Elements

The main advantage of using a pseudo-element for the sole purpose of displaying an image is that it allows designers to crop a sprite. Actually, this is nothing new, and many websites are already using extra (aka "junk") markup to achieve this. For example, Yahoo! Search uses empty and Facebook uses empty tags for this purpose. Going this route allows for the creation of compact CSS sprites, without empty space between the images within the sprite.
The two examples below do not use extra markup and they both share the same sprite:

The two images below — which are the second icon in the sprite — are generated using each technique, respectively.

Nicolas Gallagher’s method

Styling the pseudo-element with a background image:

1	#first:before {

2	content: "";

3	float: left;

4	width: 15px;

5	height: 15px;

6	margin: 4px 5px 0 0;

7	background: url(sprite.png) -15px 0;

8

}

The new url() / clip method

Using the content property to insert the sprite which is then cropped with clip:

01

#second {

02	position: relative;

03	padding-left: 20px;

04	background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = ''+this.innerHTML);

05

}

06

07	#second:before,

08	#second img {

09	content: url(sprite.png);

10	position: absolute;

11

top: 3px;

12	clip: rect(0 30px 15px 15px);

13	left: -15px; /* to offset the clip value */

14	_left: -35px; /* some massaging for IE 6 */

15

}

In case you wonder why I use position: absolute in the above rule, it is because the clip property only applies to absolutely positioned elements.

The New Technique: How Does It Work?

• Instead of styling the pseudo-element with a background, we use it to insert an image (via content).
• Using the clip property, we crop this image to only display the part we want to show. It means that there is no need to add empty space in the image to avoid other parts to show as well (usually used as background image of larger elements).
• We offset clip values by using the left and/or top properties.

With a non-cropping technique, images in sprites would have to start from the right hand side or left hand side to accommodate RTL/LTR contexts (background-position: [left]|[right] [vertical value]). Another limitation is creating sprites with images showing next to each other (because other images could be displayed as well). But when cropping sprites, these issues are not in play, so all images can be tucked together.
For an example, see figure below:

Advantages of this method over existing techniques

Styled to print
Unlike background images, these images are printed with the document (they are sent to the printer).
Styled to be accessible
Unlike background images, these images will not disappear in MS Windows’ high contrast mode or with high-contrast styles sheets.
Styled to work in IE lt 8
This method works in Internet Explorer 6 and 7 as well.
Note that data URI scheme could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as well.

Styling links with pseudo-elements

Nicolas Gallager shows plenty of cool stuff one can do with pseudo-elements. The only thing I’d add here is the use of ::after to style links à la "read more" and the like, for example:
Read more
CSS:

1	.more:after {

2	white-space:nowrap;

3	content: " \00BB"; /* » */

4

}

5

.more {

6	white-space:nowrap;

7	background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = this.innerHTML+' »');

8

}

A word about accessibility

You should assume that generated content is read by screen-readers, and since there is no mechanism to offer alternative text for images plugged via the content property, we should make sure those images are purely decorative because screen-reader users would not have access to that information.

Further reading

You might want to take a look at the following related resources:

• CSS3 module: Lists – The ::marker pseudo-element
• Generated content, automatic numbering, and lists
• The clip property
• Colour Contrast and CSS Sprite Maps
• High Contrast Proof CSS Sprites