Summary
XML DOCTYPE Switching Bug in Internet Explorer
XML purists may wonder why our XHTML documents don’t start with an
XML version declaration like this:
<?xml version="1.0" encoding="iso-8859-1"?>
Indeed, the XML standard prescribes that a document should begin with a
<?xml … ?> processing instruction, which is followed by the XHTML
DOCTYPE.
Unfortunately, when a document begins with <?xml … ?>, or anything
else—including white space—before the DOCTYPE, Internet Explorer version
6 does not see the DOCTYPE and lapses into Quirks mode. For this reason,
you must leave out the XML version declaration to get the best CSS support
from all browsers in wide use.
Thankfully, the XML standard allows you to omit the processing instruction
if you’re happy with the default settings—which, in the case of most XHTML
documents, we are.
Summary
In this chapter, we saw how to validate CSS and XHTML documents, and dis-
cussed the issues surrounding browser support and backwards compatibility. This
chapter served as an introduction to the issues that we’ll encounter in the second
half of the book, as we create our CSS layouts.
73
Licensed to siowchen@darke.biz
74
Licensed to siowchen@darke.biz
5
Splashing Around a Bit of Color
In this chapter, we take a close look at color: we’ll explore the application of
color to text and other objects, and review page background colors. We’ll also
discuss how colors are described, where we can apply them, how we can use them
together to achieve specific effects, and a range of other techniques.
However, we begin this chapter with a discussion of one of the most basic of
color concepts. Good designers must understand the conflicts that can arise
between the way we believe a page should look, and the constraints placed on
that page’s appearance by users.
Who’s in Charge?
Under the rules of CSS, user settings trump designer specifications every time.
While it’s important to keep this in mind, this knowledge doesn’t give us any
insight into how to design a site with this rule in mind.
How can you build your site to look its best, regardless of users’ own settings?
You can’t!
Licensed to siowchen@darke.biz
Chapter 5: Splashing Around a Bit of Color
Figure 5.1. Firefox’s color preferences panel
Figure 5.2. Firefox’s font preferences panel
76
Licensed to siowchen@darke.biz
Color in CSS
It’s very easy for users to set their own browser preferences. All modern browsers
have simple preference-setting panels for colors and fonts; those of Firefox are
shown in Figure 5.1 and Figure 5.2.
The dialog in Figure 5.1 allows the user to set colors for pages’ backgrounds and
text, as well as the colors of visited and unvisited links. The dialog shown in
Figure 5.2 allows you to set the browser’s default font for serif, sans-serif, and
monospaced text. Both dialogs offer checkboxes that allow the user to stop web
pages’ design specifications from overriding their own preferred settings.
Many browsers also allow users to define their own style sheets, and tell the
browser to use these style sheets to override any styles it finds on incoming pages.
For example, let’s assume that a user has set the following style:
h1 {
background-color: black;
color: white;
}
Now, imagine that the user opens a page with the following style rule:
h1 {
background-color: yellow;
color: black;
font-family: Helvetica, Arial, sans-serif;
}
In this situation, the page’s font-family will be used, but the page’s color and
background-color will be overridden by the user’s settings.
As you read all the information that follows in this part of the book, then, keep
in mind the caveat, “ … unless the user overrides your settings.” I won’t bore you
by reminding you of this rule repeatedly.
Color in CSS
Elements that can be displayed in colors defined through style rules are:
❑
backgrounds
❑
borders
77
Licensed to siowchen@darke.biz
Chapter 5: Splashing Around a Bit of Color
❑
text
❑
links
❑
outlines
I’ve listed that last one for the sake of completeness. Outlines are not supported
by the majority of browsers available today, so we won’t spend time discussing
them here. Refer to the outline property in Appendix C if you’re curious.
How to Specify Colors
We can use several methods to specify a color for any CSS property that accepts
color values:
❑
descriptive color names
❑
system color names
❑
RGB decimal values
❑
RGB hexadecimal values (including a three-character shorthand)
❑
RGB percentage values
The most human-readable way to specify colors in HTML is to use key words
that are reserved for describing those colors. Officially, only 16 descriptive color
names are supported in HTML and CSS,
1
yet virtually all modern browsers
support a range of 140 color names first suggested by Netscape in the early days
of the Web.
These 140 colors, along with their RGB equivalents, can be found in Appendix B.
The 16 official descriptive color names are:
❑
black
❑
white
❑
aqua
1
Although the HTML and CSS specifications define 16 standard color names, the Web Content
Accessibility Guidelines 1.0 [http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-colors] published
by the W3C recommend that numerical values, not names, are used to define colors.
78
Licensed to siowchen@darke.biz
How to Specify Colors
❑
blue
❑
fuchsia
❑
gray
❑
green
❑
lime
❑
maroon
❑
navy
❑
olive
❑
purple
❑
red
❑
silver
❑
teal
❑
yellow
Whether or not you use the 124 other named colors is up to you. Given that
they are not officially supported in any W3C documentation, there is the potential
risk that some future browser may not support them. Also, the way in which
those colors render on some browsers and operating systems cannot easily be
determined, other than by detailed testing. Frankly, I don’t see much of a risk,
and I use these names a great deal. The descriptive color names give me some
idea of what I’m likely to see, even before I view my page in a browser.
In addition to those descriptive color names, there’s also a set of 28 system color
names. These names, such as AppWorkspace, correspond to different parts of the
graphical user interface (GUI) that’s presented by the operating system. The ac-
tual color associated with each of these names is, therefore, operating system-
specific, and potentially is subject to user preferences. Using these color names,
you can create web interfaces that match users’ operating system GUIs. A complete
list of system color names is presented in Appendix B.
79
Licensed to siowchen@darke.biz
Chapter 5: Splashing Around a Bit of Color
Colors are rendered on computer monitors using combinations of three basic
colors—red, green, and blue—in various intensities. We can use these three colors
to define a seemingly endless range of other hues in two ways:
❑
Use the rgb function to supply a set of three comma-separated values that
define the mix of the three basic colors.
❑
Supply a hexadecimal value as a three- or six-character string. Such strings
are preceded by the pound sign, also known as the hash symbol (#).
For example, if you wanted to specify the color blue for a particular element in
a CSS style rule, you could do it in any of the following ways:
color: blue;
color: rgb(0, 0, 255);
color: rgb(0%, 0%, 100%);
color: #0000ff;
color: #00f;
Note that you can use the three-character hexadecimal approach only when the
six-character version consists of three matching pairs (i.e. #abc is equivalent to
#aabbcc).
You’ve probably figured out that the decimal and hexadecimal values in the above
represent the presence of no red, no green, and the maximum amount of blue.
Black is represented by the value #000000 (or, in shorthand, #000) and white is
represented by the value #ffffff (or, again in shorthand, #fff). If you prefer
the rgb function, black is rgb(0,0,0) and white is rgb(255,255,255) or
rgb(100%,100%,100%).
Sometimes, simply by looking at a color value—or, perhaps more easily, looking
at two color values side by side—we can figure out how to modify that color to
achieve a different effect. For example, if we’ve defined a color as #ff7f50, but
when we look at it, we decide it needs to be a bit more blue, we can just increase
the value of the last two digits to, say, #ff7f70.
The level of precision that hexadecimal specifications afford over combinations
of red, green, and blue is the reason why web designers with artistic backgrounds
tend to favor this approach.
2
If you’re working in a graphics application, you
should be able to check the hexadecimal code of a given color within the design
2
There are over 16.7 million possible combinations of the 256 levels of red, green, and blue in CSS,
and therefore, over 16.7 million possible individual colors.
80
Licensed to siowchen@darke.biz
Selecting and Combining Colors
package, and use that code in your CSS. However, if you’re putting together a
simple web site in Notepad, you might find it easier to use color names.
Selecting and Combining Colors
The selection of color combinations that work well is a key part of a site’s
graphical design. If you’ve ever put a chartreuse background next to an image
with a dark-blue background, and then ran screaming for the exit when the page
displayed, you have some idea of the difficulty of the task.
The selection of colors becomes an important issue primarily in two situations:
when you have adjacent objects with colored backgrounds and you want to avoid
a clash, and when you have colored text on colored backgrounds and you want
to ensure readability.
A number of basic artistic principles are involved in selecting colors that comple-
ment one another. Everything starts with the color wheel. The color wheel is
discussed at countless places on the Web, but the clearest and most concise ex-
planation I’ve found was written by the makers of a program called Color Wheel
Pro™, in an article called “Color Theory Basics.
3
”
Essentially, we start with a color wheel that includes the range of colors from
which we want to choose. Colors that are adjacent to one another on the color
wheel are said to be “harmonious” colors that look good together. Choosing two
or three adjacent colors on a color wheel, and applying those colors to large areas
such as backgrounds and menus, can produce very pleasing aesthetic effects.
For greater vibrancy, we’ll want to select colors that are opposite one another on
the color wheel; such pairs of colors are said to be “complementary.” To find
more great color combinations for your designs, move an equilateral triangle
around the middle of a color wheel, and use combinations of the colors that lie
at the triangle’s corners.
Some graphics and web design programs include palettes and other interfaces to
allow you to select colors without knowing their RGB or hexadecimal codes.
These aids make it much easier to experiment with color combinations, and to
determine what works and what doesn’t.
Laying colored text over colored backgrounds can be especially problematic. A
process of trial and error can be incredibly time consuming, but often, the specific
3
http://www.color-wheel-pro.com/color-theory-basics.html
81
Licensed to siowchen@darke.biz
Chapter 5: Splashing Around a Bit of Color
effect we want isn’t achievable without some effort. However, help is available
on the Web! One of the best places I know of is Pixy’s Color Scheme Generator:
4
click on the different colors in the color wheel to view color schemes based on
your selection.
This tool also features a drop-down list of different kinds of color blindness, each
of which corresponds to a filter. By selecting one, you can see how your chosen
scheme will look to people with that kind of color blindness. After playing with
this drop-down list, you’ll realize that there are many different types of color
blindness that can cause people to have difficulty distinguishing between colors.
As well as avoiding color combinations that cause content to become unreadable,
it’s important to ensure that your site is not designed so that the only way users
can understand certain information is by its color. For example, using different
colored icons without accompanying text labels might mean that some users can’t
distinguish the difference between those icons. Another service that shows how
your site looks to colorblind users is Vischeck.
5
Discovering new color combinations that may defy conventional wisdom, but
work well together regardless, is one of the most interesting areas of creative ex-
ploration in web design. Don’t limit yourself to the accepted combinations that
everyone uses.
Setting body Color
Often, you won’t define a color for the body element either inline or in a style
sheet rule. By default, most browsers will display black text on a white or gray
background, and for many layouts, that’s fine. However, be aware that users who
have set their browser’s default background colors to something other than white
will see your page in that color. To remind themselves to set page background
colors in CSS, many designers set their own browsers’ default backgrounds to
garish colors!
But, if you need to define a different color combination, you can define a color
for all the text that appears on a page using a style sheet entry like this:
body {
color: red;
}
4
http://wellstyled.com/tools/colorscheme2/index-en.html
5
http://www.vischeck.com/
82
Licensed to siowchen@darke.biz
Không có nhận xét nào:
Đăng nhận xét