Determining the Number of Colors (Bit Depth)

Once upon a time, color was one of the biggest nightmares a Web designer could face. Not all computers are created equal, especially when it comes to color. On your high-end professional machine, you design a brilliant Web page with bold colors, deep drop shadows, anti-aliased text, and 3D buttons. But on the machine across the hall, it looks like a grainy color photo that's been left out in the sun too long (Figure 13.11 and 13.12).

Figure 13.11. An image in all its 32-bit glory.

Figure 13.12. The same image in ho-hum 8-bit grayscale. Notice how much rougher the transitions are between areas of color than in the 32-bit version above.

The problem was that some computers displayed millions of colors, while others displayed only a few thousand or (gasp) a few hundred or less. Although few of these older machines are still in use, there's an increasing number of portable devices such as PDAs and mobile phones that do have color restrictions. So knowing the number of colors the person viewing your site (Figure 13.13) can actually see might be useful (Figures 13.14 and 13.15).

Figure 13.13. The general syntax for the colorDepth object.

Figure 13.14. The code displays the bit depth of the monitorin this case, 32-bit.

Figure 13.15. The code displays the bit depth of the monitorin this case, 8-bit.

To detect the number of colors:

  • screen.colorDepth

    The number of colors that the visitor's screen can currently display is in the screen's color-depth object (Code 13.4). Using this code will return a color-bit depth value as shown in Table 13.1.

    Code 13.4. The function numColors() returns one of the values in Table 13.1, depending on the number of colors available on the computer that is being used.

    [View full width]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Finding the Number of Colors</title> <style type="text/css" media="screen"> body {      font: 1em Georgia, "Times New Roman", times, serif;      color: #000;      background-color: #ccc;      margin: 8px; } </style>      </head>      <body> <script language="JavaScript" type="text/javascript"> function numColors() {      return (screen.colorDepth); } document.write('Your screen is currently using ' + numColors() + 'bit color.'); </script>      </body> </html>

    Table 13.1. Pixel-Depth Values










    16.7 million

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: