CSS Basics: Using Fallback Colors

Something you very much want to avoid in web design is unreadable text . That can happen when the background color of an element is too close or exactly the color of the text. For instance:

.header {
  background-color: white;
  color: white;
}

Which could lead to text that’s there, but invisible.

This is … very bad.

You’d never do that on purpose of course! The trouble is it can sneak up on you. For one thing, the default background-color is transparent , so without setting any background the background of an element is probably white.

More commonly, you’re using a background-image that makes the background a different color, and you’re setting white text on top of that.

header {
  background-image: url(plants.jpg);
  color: white;
}

Under perfect circumstances, this is all good:


But let’s take a look at what it looks like while the website is loading over a very common “Slow 3G” internet connection:


There’s no reason our dear visitor needs to wait to discover the incredible savings awaiting them this Sunday! Fortunately, a tiny bit of CSS solves this.

header {
  background-color: black;
  background-image: url(plants.jpg);
  color: white;
}

The black background color will ensure the white text will be visible while the image loads ( or if it never loads at all! ). Getting slightly fancier, we could use a color used in the image. I like a little app called Frank DeLoupe for helping me pluck a color from anywhere on my screen. Then I’ll use that color as the fallback color using the shorthand syntax for backgrounds:

header {
  background: #334C23 url(plants.jpg);
  color: white;
}

Much much better.

This kind of thing takes very little effort, improves your design’s resiliency and UX, and I think you’ll find becomes are part of your CSS muscle memory the more you write CSS.

Another related topic here, since we’re working with a photograph, is the idea of a “Progressive JPG.” Photoshop has the ability to save a JPG in this format . This changes how the displays as it’s coming across the network. Here’s a comparison video:

A low-res version of the image loads into place first, and it becomes higher quality as more of the image loads.

Perhaps a more desirable loading experience, but not a replacement for a fallback color.

Leveling up!

Images are one of the heaviest parts of websites, and loading techniques for them are a big topic in web performance. Here are some more related to things to think about:

CSS-Tricks责编内容来自:CSS-Tricks (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 产品设计 » CSS Basics: Using Fallback Colors

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录