編集(管理者用) | 編集 | 差分 | 新規作成 | 一覧 | RSS | 表紙 | 検索 | 更新履歴

GoodCSSHack

Good CSS Hackの、大雑把な翻訳です。

The Attributes of a Good CSS Hack

(良いCSSハックの属性)

As new CssHacks appear constantly, we must make sure that, if we must use them, our CSS hacks will not do more harm than good. This document outlines some qualities of a "good" CSS hack. A good CSS hack...

新しいCssHacksは絶えず現れてきますが、私たちは、もし私たちがCSSハックを使用しなければならない(must)のならば、それらが利益以上の危害を与えないことを確実にしなければなりません。 このドキュメントは「良い」CSSハックのいくつかの品質について概説します。 良いCSSハックとは…

Does not penalize browsers with better CSS parsers (future-proof)

(より良いCSSパーサを持つブラウザを罰しない(将来に渡る安全))

Have in mind an ideal style sheet (meaning what you would serve to a 100% compliant browser) and make sure more compliant parsers will always result in use of your ideal values, rather than fudged ones.

理想的なスタイルシート(100%仕様に準拠したブラウザにそれを提供すること意味します)を考えてください。そして、より仕様に準拠したパーサが、何かをごまかすのではなく、常にあなたの理想的な値の使用をもたらすのを確かめてください。

In simple selector hacks, always have the ideal ruleset applied to the most specific selector, and use equal care not to invalidate your SS when taking advantage of comment and escaped character parsing bugs.

単純なセレクタハックでは、常に、理想的な規則集合を最も詳細度の高いセレクタに適用させてください、そして、コメントやエスケープ文字を解析する際のバグを利用するとき、あなたのスタイルシートを無効にしないよう、等しい注意を働かせてください。

The following hack is future-proof because all future (more compliant) UAs will apply the second rule.

以下のハックでは、全ての未来の(より仕様に準拠した)ユーザエージェントは2番目の規則を適用するため、将来に渡って安全です。

body {
  margin: -10px 0 0 -10px; /* fudged value */
}
html body {
  margin: 0; /* ideal value by more specific selector */
}

Uses valid syntax, and standard properties and values

(妥当な構文、標準のプロパティ及び値の使用)

Although UAs should ignore rules with non-standard properties or unrecognized values, this is not always the case due to lenient and less-fault-tolerant parsers.

ユーザエージェントは、標準的でないプロパティや許可されていない値を持つ規則を無視するべき(should)ですが、寛大かつ耐障害性の少ないパーサにより、これはいつもそうであるというわけではありません。

The following ruleset is on the fence because the non-standard value "hand" could potentially lead to an error in an otherwise compliant parser.

標準でない値"hand"は、別の仕様に準拠したパーサでは潜在的に誤りを導くかもしれないので、以下の規則集合はどっちつかずです。

#myPointer {
  cursor: hand; /* for IE/win */
  cursor: pointer; /* ideal value */
}

# 訳注: CSS仕様では、ユーザエージェントは未知のプロパティや不正な値を含むスタイル規則を無視しなければならない(must)と定められています。また、仕様では同じ優先度・詳細度の規則が2つある場合は、後の位置で指定された規則が適用されることとなっているため、仕様に準拠したパーサは上記の規則を"cursor: pointer;"として解釈するはずです。--北村

Does not leave a style sheet difficult to maintain

(保守が困難なスタイルシートを放置しない)

This is more of a usability issue for CSS authors. For a style sheet to be maintained by a human, it must remain human-understandable. Strange-looking hacks (like most versions of the BoxModelHack) should be well-documented, and, in general, all the values of the "ideal" style sheet should be clear.

これはむしろ、CSS作者のためのユーザビリティの問題です。 スタイルシートが人間によって保守されるためには、人間が理解可能な状態で残っていなければなりません。 奇妙に見えるハック(BoxModelHackのほとんどのバージョンのような)はきちんと文書化されるべきです。そして、一般に、「理想的な」スタイルシートのすべての値が明確であるべきです。

body {
  margin: -10px 0 0 -10px;
  /* ideal: */} html body {
  margin: 0;
}

In particular, although the ImportHack is very useful, it can leave the set of "ideal" rulesets scattered across 2 or more files, creating somewhat of hassle for the author. Making a change to the linked SS may or may not affect compliant browsers, so the author is forced to view the imported file to see if the property is defined there.

特に、ImportHackは非常に役に立ちますが、「理想的な」規則集合が2つ以上のファイルに散在するままにしておくことができてしまいます。作者に多少の苦労を残して。リンクされたスタイルシートへの変更を行うと、仕様に準拠したブラウザが影響され、またはされない(may or may not)かもしれません。そのため作者は、プロパティがそこで定義されていたかどうかを見るため、止むを得ずインポートされたファイルを見なければなりません。

As CSS authoring tools improve, this will be less of an issue. For example, when viewing a linked SS, a tool could automatically display the "compliant" value (computed by correctly parsing multiple CSS files) next to the currently selected rule.

CSSオーサリングツールが向上するにつれ、これは問題でなくなるでしょう。例えば、リンクされたスタイルシートを見るとき、ツールは自動的に、現在選択された規則の横で「仕様準拠の」値(複数のCSSファイルを正しく解析することにより計算された)を表示するかもしれません。