Posts from Wednesday, May 16th, 2012

Backgrounds, Shadows, Fonts, and the Cascade

Published 5 years, 8 months ago

The fact that this:

h1 {color: red;}
h1 {color: green;}

…results in green h1 text, but this:

h1 {background:
	url(red-wave.gif) repeat,
	url(green-wave.gif) repeat;}

…results in a red wavy h1 background does my head in every single time.  And it’s the same with text and box shadows, too!  In cases where backgrounds or shadows overlap, the first one you write “wins”, by virtue of being “in front of” the background images that are listed after it.

I know that font stacks are also done in order of most-to-least preferred, but I don’t see them as being equivalent.  The reason is that a font stack is a list of fallbacks—use this face unless it can’t render the glyph or doesn’t exist, in which case try the next one in the list, etc., etc.  Multiple background images and multiple shadows, on the other hand, are not a series of fallbacks.  I expect to see them all, unless I made a mistake of some kind; and I do, constantly, because of this disconnect.  Sure, one could use the multiple background image syntax to create a series of fallbacks—first an SVG file, second a PNG, third a GIF—but that’s not its primary purpose, and I certainly wouldn’t teach multiple background images that way.  That’s not what they’re designed to do.

Maybe writing the problem down here will purge this daemon, but in all honesty, my hopes are not terribly high.

  • Published
  • Categorized under CSS
  • 11 responses so far