CSS Tips_Experience Exchange

翻訳: onestab [2004.03.09]
原文: mezzoblue CSS Crib Sheet

CSS を使用して Web サイトを構築するとき、さまざまなレイアウトに遭遇したことがあると思います。問題が発生し、疲弊してしまう可能性があります。この記事の目的は、設計プロセスを容易にし、行き詰まったときにすぐに参照できるようにすることです。

何か追加したいことがありましたら、ここにコメントを投稿してください。

この記事は他の言語でもご覧いただけます: フランス語、ドイツ語、スペイン語、ハンガリー語。 追加の翻訳も歓迎します。

疑わしい場合は、最初に検証してください
デバッグするとき、最初にコードを検証すると、多くの場合、多くの問題を回避できます。不正な形式の XHTML/CSS は、多くのレイアウト エラーを引き起こす可能性があります。
他のブラウザでテストする前に、最も高度なブラウザで CSS コードを作成してテストしてください。その逆ではありません。
壊れたブラウザで作成してテストする場合、コードはその壊れたブラウザの貧弱な表示​​に依存してから、標準に準拠したブラウザでテストする必要があります。「イライラするでしょう」を参照してください。結果が「正常ではない」と表示されたとき。代わりに、まずコードを洗練してから、低レベルのブラウザー用に準備する必要があります。こうすることで、コードは最初から標準に準拠しており、他のブラウザーのサポートについて心配する必要はありません。もちろん、現在標準に準拠しているブラウザは間違いなく Mozilla、Safari、または Opera です。
必要な効果が実際に存在することを確認してください
ブラウザ固有の CSS 拡張機能の多くは、公式の標準には存在しません。 フィルターまたはスクロールバーのスタイルを指定すると、IE 以外のブラウザーでは効果のないプライベート コードを使用することになります。バリデーターによってコードが定義されていないことが示された場合は、プライベート スタイルを使用している可能性が高く、ブラウザー間で一貫した結果は期待できません。
レイアウト内でフローティング オブジェクトを使用する必要がある場合は、必要に応じて clear 属性を使用することを忘れないでください。
フローティング要素は簡単なようで制御が難しく、制御するのが困難です。フロートがコンテナの境界を超えて伸びている場合、または期待どおりに表示されない場合は、期待が正しいかどうかを確認してください。この問題については、Eric Meyer のチュートリアルを参照してください。
マージンのマージ: パディングまたはボーダーを使用して回避できます。
余分な (または不要な) 空白に圧倒されるかもしれません。マージンを使用する場合、マージンの結合が問題の原因となる可能性があります。 Andy Budd この説明は理解に役立つかもしれません。 PJblog の構造にいくつかの追加情報を追加したいと思います。 Flash を使用する場合は、Xml ファイルにマージンが設定されているかどうかを確認してください。
同じ要素にパディング/ボーダーと固定幅を同時に適用しないようにしてください。
IE5 の誤ったブロック モデルが原因で、事態が混乱します。 改善策はありますが、この問題を回避し、子要素の幅が固定されている場合は親要素にパディングを指定することが最善です。
IE での未指定のスタイル コンテンツのちらつきを回避します。
@import を使用して外部スタイル シートを入力すると、遅かれ早かれ IE に「ちらつき」の問題があることがわかります。 CSS スタイルが適用される前に、書式設定されていない HTML テキストが短時間表示されます。 これは回避可能です。
IE では min-width が役立つことは期待できません。
IE はこれをサポートしていませんが、width を min-width として扱うため、いくつかの IE フィルタリング手法を通じて、最終的に同じことを達成できます。効果。 これはとてもイライラします、今はこのスキンを実現できません
どうしても困ったら幅を小さくしてみてください
丸め誤差があるため、場合によっては 50 % プラス 50% が 100.1% になり、一部のブラウザではレイアウトが崩れます。 50% を 49%、あるいは 49.9% に減らしてみてください。 また、境界線を使用する場合は、その幅を忘れずに追加してください。500 ピクセルのフレームに 1 ピクセルの境界線を追加すると、その幅は 502 ピクセルになります。
IEで表示がおかしくなっていませんか？
Peekaboo のバグである可能性があります。特にマウスがハイパーリンク上を通過すると、正常に表示されます。See Position is Everything for the repair method.
If anchors are used, be especially careful when applying hyperlink styles.
If you are using traditional anchors () in your code, you will notice :hover and :active Pseudo-classes will also act on it. To avoid this, you can use id, or use the little-known syntax: :link:hover, :link:active
Remember "LoVe/HAte" (Love/Hate) Link Rules
Specify hyperlink pseudo-classes in the following order: Link, Visited, Hover, Active. Any other order is inappropriate. If :focus is used, the order should be LVHFA ("Lord Vader's Handle Formerly Anakin", suggested by 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 to be used (the only exception is line-height, which strangely does not require units). Some browsers handle unspecified units poorly. Zero is zero, whether it's px or em. All other non-zero values ​​must have units explicitly specified. For example: padding: 0 2px 0 1em;
Test different font sizes.
Advanced browsers like Mozilla and Opera allow you to change the font size regardless of what font units you use. Some users' default font sizes are bound to be different from yours, so do your best to accommodate them.
Use embedded styles when testing, and change to external input when publishing.
Embedding style sheets in your HTML source code can eliminate many errors caused by caching during 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 helps layout debugging.
Global rules like div {border: solid 1px #f00;} can temporarily detect layout issues for you. Adding borders to specific elements can help you find hard-to-find overlap or whitespace issues. This method is very practical, everyone must try it
Do not use single quotes in the image path.
When setting a background image, stick to double quotes. Although it may seem unnecessary, if you don't do this, IE5/Mac will choke. This seems to be the easiest to overlook
Do not "take space" 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.

There are also some suggestions that, although not specific to certain features, are worth noting during the development process:

Organize your CSS files well
Comment CSS in blocks appropriately, 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 change the text size to red. , this class name no longer has any meaning. Instead, you can use more descriptive names like .copyright and .pullquote.
Combined Selectors
Keeping CSS short is very important to reduce download time. Please try to reduce redundancy by grouping selectors , using inheritance , and using shorthand .
Consider accessibility when using image replacement techniques
We have found traditional FIR in screen readers, as well as browsers that turn off image display Something will go wrong. There are other solutions to this, which should be used with caution according to the specific situation.