Meaningful markup provides the developer with several important benefits. Meaningful pages are much easier to work with than presentational ones. For example, say you need to change a quotation on a page. If the quotation is marked up correctly, it is easy to scan through the code until you find the first blockquote element. However, if the quotation is just another paragraph element, it will be a lot harder to find. For a more complicated, but no less realistic example, say that you needed to add an extra column to your homepage. You could simply drop the content in at the right point and then update the widths in your CSS. To do the same in a table-based layout you’d need to add an extra column in your table, change the colspan settings, alter the widths on all the cells, and change the ... (查看原文)
When naming your IDs and classes, it is important that you keep the names as “unpresentational” as possible. For instance, if you want all of your form notification messages to be red, you could give them a class of red. This is fine as long as there are no other red elements on the page.
However, say you wanted to style required form labels red as well. You are now forced to guess to which element that class could refer, and things are already starting to get confusing. Imagine how confusing the code could become if you used presentational elements across the whole site?
This gets even more complicated if you decide to change the presentation of your form notifications from red to yellow. Now, you either have to go back and change all your class names, or you have an element called red th... (查看原文)
At the same time, they can be overused and even abused. Novice CSS authors often add classes to nearly everything in an attempt to get fine-grained control over their styles. Early WYSIWYG editors also had the tendency to add classes each time a style was applied. Many developers picked up this bad habit when using generated code to learn CSS. This affliction is described as classitis and is, in some
respects, as bad as using table-based layout because it adds meaningless code to your document. (查看原文)
In the preceding example, each element is identified as being part of a news story by using an individual news-related class name. This has been done to allow news headlines and text to be styled differently from the rest of the page. However, you don’t need all these extra classes to target each individual element. Instead, you can identify the whole block as a news item by wrapping it in a div (code) with a class name of news. You can then target news headlines or text by simply using the cascade. (查看原文)
When browser manufacturers started to create standards-compliant browsers, they wanted to ensure backward compatibility. To accomplish this, they created two rendering modes: standards mode and quirks mode. In standards mode, the browser renders a page according to the specifications, and in quirks mode pages are displayed in a looser, more backward-compatible fashion. Quirks mode typically emulates the behavior of older browsers such as Microsoft Internet Explorer 4 and Netscape Navigator 4 to prevent older sites from breaking.
The most obvious example of the difference between these modes revolves around the Internet Explorer (IE) on Windows proprietary box model. When Internet Explorer 6 debuted, the correct box model was used in standards mode, while the older, proprietary box model wa... (查看原文)
With even a moderately complicated style sheet, it is likely that two or more rules will target the same element. CSS handles such conflicts through a process known as the cascade. The cascade works by assigning an importance to each rule. Author style sheets are those written by the site developers and are considered the most important. Users can apply their own styles via the browser and these are considered the next most important. Finally, the default style sheets used by your browser or user agent are given the least importance so you can always override them. To give users more control, they can override any rule by specifying it as !important even a rule flagged as !important by the author. This is to allow for specific accessibility needs such as using a medium contrast user style ... (查看原文)
One interesting way to use specificity is to apply a class or an ID to the body tag. By doing this,you can then override styles on a page-by-page or even a site-wide basis. For instance, if you wanted all your news pages to have a specific layout, you could add a class name to the body element and use it to target your styles: (查看原文)
If you are using an Apache server, talk to your hosts about installing mod_gzip or mod_deflate. All modern browsers can handle files compressed with GZIP, and decompress them on the fly. These Apache modules will detect whether your browser can handle such files, and if it can, send a compressed version. Server-side compression can reduce your HTML and CSS files by around 80 percent, reducing your bandwidth and making your pages much faster to download. If you don’t have access to these Apache modules, you still may be able to compress your files by following the tutorial found at http://tinyurl.com/8w9rp (查看原文)
older versions of Internet Explorer, along with IE 6 in quirks mode, use their own,nonstandard box model. Instead of measuring just the width of the content, these browsers take the width property as the sum of the width of the content, padding, and borders. This actually makes a lot of sense, because in the real-world boxes have a fixed size, and the padding goes on the inside. The more padding you add, the less room there will be for the content. However,despite the logic, the fact that these versions of IE disregard the specification can cause significant problems. (查看原文)
Inline boxes are laid out in a line horizontally. Their horizontal spacing can be adjusted using horizontal padding, borders, and margins (see Figure 3-9). However, vertical padding, borders, and margins will have no effect on the height of an inline box. Similarly, setting an explicit height or width on an inline box will have no effect either. The horizontal box formed by a line is called a line box, and a line box will always be tall enough for all the line boxes it contains. There is another caveat, though—setting the line height can increase the height of this box. Because of these reasons, the only way you can alter the dimensions of an inline box is by changing the line height or horizontal borders, padding, or margins. (查看原文)
Say you have a picture that you want to float to the left of a block of text. You want this picture and text to be contained in another element with a background color and border. You would probably try something like this: (查看原文)
However, because the floated elements are taken out of the flow of the document, the wrapper div takes up no space. How do you visually get the wrapper to enclose the floated element (查看原文)
If you choose to use this technique, make sure that you only use it on things that are actually links and don’t update the server. Otherwise, you may experience some undesirable results. When Google accelerator launched, people found that content in their CMS or web application was mysteriously disappearing. Sometimes, the entire contents of a site would vanish overnight. It turns out that the authors of these tools had used anchor links rather than form elements for their delete buttons. Google accelerator would spider these links in order to cache them and inadvertently delete the content! Search engines spiders can have the same effect, recursively deleting vast swathes of data. For that reason, you should never use links to make changes on the server. Or to put it in technical terms, l... (查看原文)
If you set a background position using pixels, the top-left corner of the image is positioned from the top-left corner of the element by the specified number of pixels. With percentage positioning, it is the corresponding point on the image that gets positioned. So if you set a vertical and horizontal position of 20 percent, you are actually positioning a point 20 percent from the top left of the image, 20 percent from the top left of the parent element (see Figure 8-17). (查看原文)
Frameworks have another disadvantaged in the fact that they enforce a specific grid structure on your designs. This is fine if your designs happen to fit the widths and margins defined by the framework. However, just as it’s unacceptable for your programming framework to dictate the user experience of your website, it’s unacceptable for your CSS framework to dictate the design of your site. By selecting a specific framework, the danger is that you’ll end up using it for every project and thus painting yourself into a corner. Or, as the saying goes, if you only have a hammer, everything looks like a nail. (查看原文)
If you ever come across a CSS rule that just doesn't seem to be working, you could be suffering from a specificity clash. Try making your selectors more specific by adding the ID of one of its parents. if that fixes the problem, you'll probably find that there is a more specific rule someware in your style sheet overriding what you're trying to do (查看原文)
To avoid too much confusion, I try to make sure my general styles are very general while my specific styles are as specific as possible and never need to be overridden. If I find that I have to override general styles several times, it’s simpler to remove the declaration that needs to be overridden from the more general rules and apply it explicitly to each element that needs it. (查看原文)
Breaking your CSS into multiple style sheets used to be a common approach and was the method I recommended in the first edition of this book. However, recent browser benchmarking has shown that importing style sheets can be slower than linking to them (查看原文)
