网页前端设计

CSS Crib Sheet

It's clear to anyone who has tried building a site or two with CSS that browser support still isn't perfect. In fact, depending on the complexity of your work, you may end up banging your head on your desk and swearing off Web design forever, for the sake of a nice, simple job like city planning or nuclear physics.

In that vein, it's important to realize that you're not alone. A whole community is working out the problems with standards-based design and sharing the knowledge with one another.

Coordinated by coauthor Dave Shea, one of the many resources now available is called the CSS Crib Sheet. Designed as a one-stop resource for common problems and solutions, the Crib Sheet is duplicated below. The most recent version is available at www.mezzoblue.com/css/cribsheet.

When in doubt, validate - 若不确信，那么就去验证

When debugging, you may save yourself headaches by simply validating your code first. Improperly formed XHTML/CSS will cause many a layout glitch. Validation is an important tool for learning how to find and correct mistakes. The W3C hosts both XHTML and CSS validators, available at http://validator.w3.org and http://jigsaw.w3.org/css-validator respectively.

Note that errors early on in the document may cause further errors elsewhere due to improper nesting or other reasons, which are often not true errors. We recommend fixing a few obvious errors and re-validating; you might find the total error count drastically reduced.

Build and test your CSS in the most advanced browser available before testing in others, not after - 创建并测试css时，首先在最高级，最先进的浏览器中进行，然后再考虑其它浏览器

If you build a site by testing it in an older browser, your code will end up relying on the less advanced and potentially broken rendering of that browser. You will likely be frustrated when a more standards-compliant browser renders it improperly, which is completely backward.

Instead, start with perfection and then test for the less able browsers. Your code will be more standards-compliant from the start, and you won't need to go to great lengths to support other browsers. Today this means you should test in Mozilla (Firefox), Safari, or perhaps Opera first, and then correct for Microsoft Internet Explorer.

When relying on floats for layouts, make sure they clear properly - 若用浮动实现布局，请确保正确地清除了浮动

Floats are tricky, and they don't always do what you expect. If you run into a situation where a floated element extends past the border of its containing element or just doesn't behave properly, make sure that what you're attempting to do is correct. See Eric Meyer's tutorial on the matter at his Complex Spiral Consulting Web site (www.complexspiral.com/publications/containing-floats).

Margins collapse; apply padding or a border to avoid - 为元素应用内边距或边框来避免外边距重叠

You may struggle with extra white space where you don't want any, or no white space where you actually want some. If you're using margins, collapsing is most likely the culprit. Andy Budd explains what you can expect on his Web site (www.andybudd.com/archives/2003/11/no_margin_for_error).

Try to avoid applying padding/borders and a specific width or height to an element - 避免同时为元素指定明确的内边距、边框值与宽度、高度值

Internet Explorer 5.0 and 5.5 for Windows get the box model wrong, which often causes problems when relying on width or height values. There are ways around this (see http://tantek.com/CSS/Examples/boxmodelhack.html), but it's best to sidestep the issue if possible by simply applying a margin to child elements if a parent requires a specific width/height, or applying padding to the parent if the child requires the width/height.

Avoid the "Flash of Unstyled Content" in Internet Explorer 6 for Windows - 避免IE6“无样式内容瞬间”现象

If you rely on @import alone for external style, sooner or later you'll notice that Internet Explorer 6 for Windows "flashes" plain, unformatted HTML briefly before applying CSS. This can be avoided by linking your style sheet, or adding a script element to your page. See BlueRobot.com's "Flash of Unstyled Content" page (www.bluerobot.com/web/css/fouc.asp).

Don't rely on min-width/min-height - 不要依靠min-width或min-height属性

IE/Win doesn't support either. But it does treat width and height as if they were min-width or min-height, to a certain degree, so with a bit of filtering specific to Internet Explorer for Windows, you can achieve the same end result using width or height alone. For a specific example, see "min-height: fixed" at mezzoblue.com (mezzoblue.com/archives/2004/09/16/minheight_fi).

When in doubt, decrease percentage values - 尝试减少百分比值

Sometimes rounding errors will cause 50% + 50% to add up to 100.1%, which ends up breaking layouts. Try bumping the values down from 50% to 49%, or even 49.9%.

Content not showing up properly in Internet Explorer? - IE中没有完整的显示出内容

You may be suffering the "Peekaboo bug," especially if it shows up when the user hovers the pointer over a link. See Position Is Everything (www.positioniseverything.net/explorer/peekaboo.html) for the fix.

Make sure your desired effect actually exists - 确保要实现的效果确实存在

There are browser-specific CSS extensions that aren't in the official spec. Filters and scroll-bar formatting are proprietary code elements that won't work in anything but Internet Explorer, for example. If the validator tells you the code you're using isn't defined, chances are it's proprietary and won't work consistently across other browsers.

Remember "LoVe/HAte" linking - 牢记LoVe/HAte(爱恨)链接规则

When specifying link pseudo-classes, always do so in this order: link, visited, hover, active. Any other order won't work consistently. Consider using :focus as well, and modify the order to LVHFA (and remember this sequence with Matt Haughey's suggested mnemonic "Lord Vader's Handle Formerly Anakin").

Remember "TRouBLed" shorthand - 牢记TRouBLED(麻烦的)边框简写顺序

border, margin, and padding shorthand assumes a specific order, clockwise from the top: top, right, bottom, left. So margin: 0 1px 3px 5px; results in no top margin, a 1-pixel right margin, and so on. Remember the mnemonic "TRouBLe" and you'll always get the correct order.

Specify units for non-zero values - 为非零值标明单位

CSS requires you to specify units on all values of fonts, margins, and sizes. (The only exception is line-height, which doesn't require a unit but can accept one anyway.) The behavior of any particular browser when sizes aren't specified should not be relied upon. Zero is zero, however, be it px, em, or anything else; no units are necessary when the value is 0. Example: padding: 0 2px 0 1em;

Test different font sizes - 测试不同字体的大小显示

Advanced browsers like Mozilla and Opera allow the user to resize text no matter which sizing unit is used. Some users will assuredly have a differently sized default than you; try to accommodate as wide a range as possible to account for these variations.

Match cases between your HTML and CSS - 在HTML和CSS中统一大小写

CSS, and most browsers, are case-sensitive. Applying a class like 'homePage' is fine, provided you are consistent with your letter case across both CSS and HTML. Applying style rules to 'homepage' instead will cause problems in user agents that closely follow the CSS specification (like Mozilla).

Test embedded; launch imported - 测试时实用嵌入样式，发布时再改为外部链接方式

If you develop with a style sheet embedded between style tags within your HTML source, you eliminate any potential caching errors while testing. This can be very important when working with some older browsers. But make sure to move your CSS to an external file before launching, imported with @import or link; otherwise, the benefits of external CSS are lost.

Add obvious borders to help debug layouts - 用明显的边框辅助调试布局

A universal rule like * {border: solid 1px #f00;} can go a long way toward pinpointing a layout problem. Adding a border to specific elements can help identify overlapping and extra white space, which might not otherwise be obvious.

Don't use single quotation marks around paths for images - 指定图片路径时不要实用单引号

When placing a background image, quote marks are unnecessary, and Internet Explorer 5 for Macintosh won't pick up the image. Use double quotes, or none at all.

Be careful when styling links if you're using anchors - 若实用了锚点(anchor)，那么在为超链接应用样式时要格外小心

If you use a classic anchor in your codea name="anchor"you'll notice that it picks up :hover and :active pseudo-classes. To avoid this, you'll need to use an id for anchors insteaddiv id="anchor"or style with a slightly more arcane syntax, :link:hover and :link:active. See www.dbaron.org/css/1999/09/links.

Don't link to empty style sheets as "placeholders" for future style sheets (like handheld or print media style sheets) - 不要链接空的样式表作为“占位符”（例如手持设备或应用于打印的样式表）

Internet Explorer 5 for Mac takes issue with the empty style sheet, and the page load time increases. Instead, have at least one rule (or perhaps even a comment) in the style sheet, or simply don't link to it.

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)