CSS tips_CSS/HTML

When using CSS to build a website, you must have encountered various layout problems, and you may have been overwhelmed in the end. The purpose of this article is to make your design process easier and provide you with a quick reference when you get stuck.

When in doubt, verify first
When debugging, verifying your code first can often save a lot of trouble. Malformed XHTML/CSS can cause many layout errors.
Write and test your CSS code in the most advanced browser before testing it in other browsers, not the other way around.
If you write and test in a broken browser, your code has to rely on the poor display of that broken browser, and then test it in a standards-compliant browser and see that the display results in "unusual" Sometimes, you will be very frustrated. Instead, you should polish your code first and then try to prepare it for lower-level browsers. This way your code is standards-compliant from the start, and you don't have to worry about supporting other browsers. Of course, the current standards-compliant browsers are undoubtedly Mozilla, Safari or Opera.

Make sure the effect you want actually exists
Many browser-specific CSS extensions do not exist in official standards. If you specify styles for filters or scrollbars, you are using private code that will have no effect in any browser other than IE. If the validator tells you that the code is not defined, it is most likely that you are using private styles, which will make it difficult to achieve consistent results in different browsers.

If you must use floating objects in your layout, don’t forget to use the clear attribute in a timely manner.
Floating objects may seem easy, but it is difficult, and not always what you want. If you find that floats extend beyond the bounds of the container or don't appear as you expect, check that your expectations are correct. Regarding this issue, please see Eric Meyer’s tutorial

Margin merging: padding or border can be used to avoid it.
You may be overwhelmed by extra (or unwanted) white space. If you use margins, margin merging may be the source of the problem. Andy Budd’s explanation may help.

Avoid applying padding/border and fixed width to the same element at the same time.
IE5’s block model is wrong and it breaks things. There are workarounds for this, but it is better to work around this problem and specify padding for the parent element when the width of the child element is fixed.

Avoid flickering of unspecified style content under IE.
If you only rely on @import to input external style sheets, sooner or later you will find that IE has a "flickering" problem. Unformatted HTML text appears briefly before CSS styles are applied. This can be avoided.

Don't expect min-width to be useful in IE.
IE does not support it, but it treats width as min-width, so through some IE filtering techniques, the same final effect can be achieved.

Use CSS filters as a last resort CSS techniques and filters allow you to selectively apply (or not apply to) certain elements. Wherever possible, you should find standard cross-browser solutions to achieve the effect you want rather than resorting to filters at every turn. Think of it as a life-saving tool when you are desperate. A ton of CSS filtering tips can be found here. [Annotation: Don’t confuse the filters here with the filters in IE. Since each browser has different levels of support for CSS standards, people have found many techniques to block style sheets or rules that the browser cannot interpret or misinterprets. This is called a CSS filter or trick. ]

If anchors are used, be especially careful when applying hyperlink styles.
If you are using traditional anchors () in your code, you will notice that the :hover and :active pseudo-classes also work with it. To avoid this, you can use id, or use the little-known syntax: :link:hover, :link:active

Remember the "LoVe/HAte" (love/hate) links Rules
Specify hyperlink pseudo-classes in the following order: Link, Visited, Hover, Actve. Any other order is inappropriate. If :focus is used, the order should be LVHFA ("Lord Vader's Handle Formerly Anakin", suggested Matt Haughey).

Remember the "TRouBLED" borders .
The abbreviated order of border, margin and padding is: clockwise starting from the top, that is, Top, Right, Bottom, Left. For example, margin: 0 1px 3px 5px; means the top margin is zero, the right margin is 1px, and so on.

Specify the unit for non-zero values.
When specifying fonts, margins, or sizes with CSS, you must specify the units used. Some browsers handle unspecified units poorly. Zero is zero, whether it's px or em or whatever, it doesn't need a unit. For example: padding: 0 2px 0 1em;

Test different font sizes.
Advanced browsers like Mozilla and Opera allow scaling of fonts regardless of the units you use.Some users will definitely have a different default font size than yours, do your best to accommodate them.

Use embedded testing and change to input when publishing.
Embedding stylesheets in your HTML source code can eliminate many caching errors when testing, especially on some Mac browsers. But before publishing, be sure to remember to move the style sheet to an external file and introduce it with @import or .

Adding obvious borders is helpful for layout debugging.
Global rules like div {border: solid 1px #f00;} can temporarily catch layout issues for you. Adding borders to specific elements can help you find hard-to-find interlacing or whitespace issues.

Do not use single quotes for the image path.
When setting a background image, stick to double quotes. Although it may seem redundant, if you don't do this, IE5/Mac will choke.

Don’t leave “empty spaces” for future style sheets (such as handheld device or printing style sheets).
Mac IE5 is not interested in empty style sheets, which will increase the loading time of the page. It is recommended that there should be at least one rule (even a comment) in the style sheet to prevent MacIE from choking.
It is also worth mentioning that although they are not specific to certain functions, there are some theories that should be paid attention to during the development process:

Organize your CSS files well
Appropriately Comment CSS in blocks, group similar CSS selectors into a group, develop consistent naming habits and whitespace format (for cross-platform considerations, it is recommended to use whitespace characters instead of tabs.) and appropriate order.

Name the class and ID based on functionality (not appearance)
Suppose you create a .smallblue class and later plan to make the text larger and the color red, this class Names no longer have any meaning. Instead, you can use more descriptive names like .copyright and .pullquote.

Combining selectors
Keeping CSS short is important to reduce download time. Try to group selectors, leverage inheritance, and use shorthand to reduce redundancy.

Consider affinity when using image replacement technology
It has been found that traditional FIR will cause problems in screen readers and browsers that turn off image display. There are other solutions to this problem, which should be used with caution based on the specific situation.