CSS tips [favorites]

Document directory

• More Info

The onestab is disabled. I hope it is not permanent. Fortunately, I made an image and received several articles worth adding to my favorites. CSS tips

Last Updated: 2004.03.05
Translation: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. Invalid XHTML format/CSS may cause many layout errors.

Test in other browsersBeforeFirst, write and test CSS code in the most advanced browser, 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 Filter)Or the scroll bar specifies the style, you use private code, except for IEIt does not work 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.

Avoid adding padding/borderAndThe fixed width is applied 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 @importTo enter the external style sheet, and IE will be "blinking" in the morning and evening. Unformatted HTML before applying CSS stylesText appears for a short time. This can be avoided.

Don't count onmin-widthIt is useful in IE.

IE does not support it, but it widthAs min-widthSo some ie filtering techniques can achieve the same final effect.

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%.

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 ( <a name="anchor">), You will notice :hoverAnd :activeA pseudo class also acts on it. To avoid this situation, you can use idOr use the little-known Syntax: :link:hover, :link:active

Remember the "love/hate" link rules

You must specify the pseudo-category of a hyperlink in the following order: Link, visited, hover, and 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;It 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, It is strange that it does not need units ). 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 @importOr <link>Introduction.

Adding a clear border helps layout debugging.

Image div {border: solid 1px #f00;}Global rules, such. Adding borders to a specific element can help you find difficult overlapping or blank issues.

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, if you do not do this, ie5/MacWill crash.

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)

Assume that you have created .smallblueClass. Later, I plan to change the text size to red, and the class name will no longer have any meaning. Instead, you can use a descriptive name such .copyrightAnd .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 the traditional FIR will cause problems in the screen reader and the [browser] for disabling image display. There are other solutions to this problem. You should use it with caution based on the actual situation.

More Info

• Interview with Dave Shea, master of CSS zen garden
• Debug web pages with Mozilla
• CSS problem-solving
• CSS zen garden
• Read more articles on mezzoblue.