Pro HTML5 and CSS3 Design Patterns

CHAPTER 20 ■ ALERTS

Graphical Alert

Problem You want to insert an alert into your document with a graphical heading on the left and
content on the right. You want the heading text to be shown in case the browser cannot
display the image. You want screen readers to read the heading text. You do not want to
embed an image in the HTML because the image is style, not content.

Solution You can combine the Left Marginal design pattern with the Text Replacement design
pattern (Chapter 10) to create the graphical alert.
You can insert an empty span into the alert’s heading. You can add the rules from the Text
Replacement design pattern using the selectors shown in the pattern that follows. You can
replace TYPE in the pattern with the class name that identifies the type of alert, such as tip,
note, or caution. This allows you to use different images for different types of alerts. For
example, you could use a star image for a tip and an exclamation image for a caution. You
can replace IMAGE_WIDTH and IMAGE_HEIGHT in the pattern with the width and height of the
image. You can replace FILE.EXT in the pattern with the file name of the image.
You can optionally select the embedded to position the heading. This allows you to
control exactly where the heading is positioned independent from the graphic. If the
graphic cannot be displayed, the heading will be right where you want it. You can choose
any position as long as the graphic is large enough to cover up the heading in this position.