CSS tip _ experience exchange

Onestab [2004.03.09]
Original article: mezzoblue CSS Crib Sheet

When using CSS to build a website, you must have encountered various layout problems and may be overwhelmed. The purpose of this article is to make your design process easier and provide you with quick reference when you encounter difficulties.

If you have any additional information, please share your comments here.

Other language editions of this article: French, German, Spanish, and Hungary. Other translations are welcome.

Verify if you have any questions.
When debugging, first verifying your code can save a lot of trouble. Incorrect XHTML/CSS format may cause many layout errors.
Before testing in other browsers, write and test CSS code in the most advanced browsers, instead of the opposite.
If you write and test your code in a worn-out browser, you have to rely on the poor display of the worn-out browser and then test it in a compliant browser, you will be frustrated when you see that the result is "abnormal. Instead, you should first improve your code, and then try to plan for a lower-level browser. In this way, your code is compliant with the standard from the very beginning, and you do not have to worry about supporting other browsers. Of course, the browsers that currently comply with the standards are definitely Mozilla, Safari or Opera.
Make sure the effect you want exists.
Many specific browser-specific CSS extensions do not exist in official standards. If you specify a style for the filter or scroll bar, you use private code, except for IE, Which is useless in other browsers. If the validators tell you that the Code is not defined, it is very likely that you use a private style and do not expect consistent results in different browsers.
If you must use floating objects in the layout, do not forget to use the clear attribute in due time.
Floating elements seem to be easy to implement and difficult to control. If you find that the floating object extends the container boundary or is not displayed as expected, check whether your expectation is correct. For more information, see Eric Meyer's tutorial.
Margin merge: it can be avoided by padding or border.
You may be overwhelmed by unnecessary (or unwanted) spaces. If you use margins, margin merging may be the root cause of the problem. Andy Budd may explain this to you. Here we will add the structure of PJblog. If Flash is used, check whether margins are set in the Xml file.
Avoid applying padding/border and fixed width to the same element at the same time.
The block model with incorrect IE5 is the culprit, because it makes things messy. Although there is a remedy, it is best to bypass this problem. When the width of the child element is fixed, specify the padding for its parent element.
Avoid flickering of unspecified style content in IE.
If you use @ import to enter an external style sheet, you may find that IE is "blinking. Before applying the CSS style, unformatted HTML text will appear for a short time. This can be avoided.
Do not expect min-width to be useful in IE.
IE does not support it, but it WidthAs Min-widthSo some IE filtering techniques can achieve the same final effect. This is depressing. I cannot implement this Skin now.
Try to reduce the width when there is no route
Due to the rounding error, sometimes 50% plus 50% equals 100.1%, damaging the layout in Some browsers. Try to reduce 50% to 49% or even 49.9%. Also, if you use a border (border), remember to add its width. If the 500px frame is added with a 1 px frame, it is 502px.
Is it abnormal in IE?
It may be that Peekaboo bugs are playing tricks, especially when the mouse goes through the hyperlink, it can be displayed normally. For the repair method, see Position is Everything.
If you use an anchor, be especially careful when applying the hyperlink style.
If you use a traditional anchor ( ), You will notice : HoverAnd : ActiveA pseudo class also acts on it. To avoid this situation, you can use the id or the little-known Syntax: : Link: hover,: link: active
Remember the "LoVe/HAte" link rules
To specify the pseudo category of a hyperlink in the following order: Link, Visited, Hover, Acitve. Any other order is inappropriate. If : FocusThe order should be LVHFA ("Lord Vader's Handle Formerly Anakin", recommended by Matt Haughey ).
Remember the "TRouBLED" border.
Border (border), margin (margin), and padding (padding) are abbreviated in the order that Top, Right, Bottom, and Left start clockwise. For example Margin: 0 1px 3px 5px; Indicates that the top margin is 0, and the right margin is 1px.
A non-zero value indicates the unit.
When you use CSS to specify the font, margin, or size, you must specify the unit used (the only exception is line-height, which is strange and does not require a unit ). Some browsers depend on the processing method of unspecified units. Zero is zero, whether it is px or em. Specify the Unit for other non-zero values. For example: Padding: 0 2px 0 1em;
Test different font sizes.
Advanced browsers like Mozilla and Opera allow you to change the font size, no matter What font unit you use. The default font size of some users must be different from yours. Try your best to satisfy them.
Embedded style is used for testing, and external input is used for publishing.
Embedding a style sheet in your HTML source code can eliminate many cache errors during testing, especially in some browsers on Mac. Before publishing a style sheet, remember to move it to an external file using @ import or Introduction.
Adding a clear border helps layout debugging.
Global rules such as p {border: solid 1px # f00;} can detect layout problems for you temporarily. Adding borders to a specific element can help you find difficult overlapping or blank issues. This method is very practical. You must try it.
Do not use single quotation marks for the image path.
When setting a background image, use double quotation marks. Although this seems to be the case, IE5/Mac will crash if you do not. This seems to be the easiest thing to ignore.
Do not "occupy the seat" for future Style Sheets (such as hand-held devices or printed style sheets ".
Mac IE5 empty style sheets catch a cold and increase the page loading time. We recommend that you have at least one rule (even a comment) in the style sheet, so that MacIE cannot hide it.

Some suggestions, although not specific to some features, are worth noting during the development process:

Organize your CSS files
Properly add block comments to CSS, and combine similar CSS separators into a group to form consistent naming conventions and blank formats (for cross-platform consideration, we recommend that you use blank characters instead of tabs .) And the appropriate order.
Name the class and ID with the function (rather than the appearance)
If you have created a. smallblue class and want to increase the text size and change the color to red, the class name will no longer make any sense. Instead, you can use more descriptive names such as. copyright and. pullquote.
Combination Selector
Keeping CSS short is very important to reduce the download time. Try to group the selector, use inheritance, and use shorthand to reduce redundancy.
Affinity should be considered when using image Replacement Technology
It has been found that traditional FIR may cause problems in screen readers and browsers that disable image display. There are other solutions to this problem. You should use it with caution based on the actual situation.