Working With Keywords and Percentages
| To better harness the advantages of working with keywords in combination with percentages, you need to keep a few things in mind. The following should help with the adjusting of percentages, and we mention a caveat regarding the results from nesting percentages. SETTING AN IN-BETWEEN KEYWORD BASEOne useful trick when setting your base text size is to adjust the keyword value slightly using an all-encompassing <div>. Often when building CSS-based layouts, we may use a containing <div> for various design-related -reasons (see Chapter 8: Fluid Layouts), but you can also take advantage of that element to set a percentage on the base keyword that will affect the entire page. For example, let's imagine that you were working with a markup structure like this: <body> <div > <h1>This is a Title</h1> <p>This is body text at default base size.</p> </div> </body> We could set a base keyword value, as we have done previously in the chapter, as well as a larger percentage for <h1> elements: body { font-size: small; } h1 { font-size: 150%; } But if we thought that the value small was a little large for our liking (when viewed with default browser settings), we could knock it down a bit by using a percentage on the #container that also encompasses every bit of text on the page: body { font-size: small; } h1 { font-size: 150%; } #container { font-size: 95%; } As Figure 1.9 illustrates, we've shaved a slight amount of size off the default, which affects the size of the page title as well. Figure 1.9. Here's a comparison of using the base keyword small versus shaving off a bit of that base by setting a container to 95%.
On the top, we've added the rule to render font-size of the #container at 95%, while on the bottom we see the page rendered using just the keyword value small. The difference here is very slight. It's a useful way to give yourself a bit more precision in sizing text when your goal is something in between two keyword values. Using an existing <div> that wraps the rest of the page, you can go up or down from the keyword, creating a custom base size. It's best not to get too caught up in extreme detail here, however, because slight variation is always a possibility among different browser-platform combinations. The important thing is that users will still have control over the size using their built-in browser controls. BE CAREFUL WHEN NESTING PERCENTAGESYou have to be cautious when nesting percentages, as with the previous example where we set a base keyword of small for the entire page and then knocked that down to 95% of small using the container <div>. When you set a percentage on elements inside #container, things can get a little confusing. For example, earlier we declared that all <h1> elements should be set at 150%. And since <h1> elements are lower in the document treeinside and beneath #container in the cascadethen what we're really saying is not 150% of the initial small value, but rather 150% of 95% of small. Figure 1.10 illustrates how the nesting of elements in the document tree relates to the percentage values as well. Figure 1.10. Here's how percentages are calculated along with their elements when nested.
Confused? Perhaps replacing the small keyword with a numerical value will help. If our base on the <body> element equaled the number 10 (rather than small), then anything inside #container would equal 9.5 (or 95% of10). <h1> headings live inside #container, and we've assigned a font-size of 150% for those elements. 150% of our original base of 10 would equal 15, but since <h1>'s parent element is #container, the math would be: 150% of 9.5 equals 14.25.This gets increasingly more complex the more levels down you choose to nest percentages. Confusing math aside, the moral of the story here is to be aware of any parent percentages that are already assigned when declaring new ones. Personally, I rarely nest more than a level or two when building a page, but understanding how the cascade affects percentages can avoid confusion when sizes aren't looking quite the way you thought they would. tip
EXPERIMENT WITH PERCENTAGE VALUES FOR CONSISTENCYExperimenting with percentage values can lead to more consistent sizing across various browsers and platforms. Assuming users are viewing the page with default browser text size settings (all bets are off should they increase or decrease from the default), it's useful to experiment when assigning percentage valuesespecially those at small sizes. If we use the previously mentioned note class as an example, we can compare setting the font-size for the class at both 85% and 90%. Some browsers will only recognize percentages in powers of 10 (70, 80, 90, etc.), whereas others recognize more specific values ending in 5 (75, 85, 95, etc.). For example, by comparing Figures 1.12 and Figure 1.13, we can see Safari on the left and IE6/Win on the right. There is no noticeable difference between 85% (top) and 90% (bottom) in IE6/Win, yet there is a small increase on the Safari side between the two values. For this particular case, I'd most likely opt to use 90%, where the sizing between the two popular browsers is more closely matched. Figure 1.12. This shows the note class compared in Safari and IE6/Win at 85%. Figure 1.13. Here the note class is compared in Safari and IE6/Win at 90%. We're splitting hairs here, but we encourage you to experiment when assigning various font-size percentages. A change of 5% can mean that little extra difference across browsers and may lead you to consistency. |
EAN: N/A
Pages: 97