私はhtml5boilerplateでそのようなコードを見つけました:
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
住所は?それは何に影響しますか?次の例のように属性が非表示になっている要素?
<div hidden></div>
はい、あなたの例とまったく同じです。セレクターは、属性を持つ任意の要素に一致しhidden
ます (属性セレクターの前に暗黙のユニバーサル セレクターがあります)。
このhidden
属性は HTML 仕様に新しく追加されたものであるため、古いブラウザーではサポートされていません。そのルールをスタイルシートに追加することで、その属性のネイティブな動作を効果的にポリフィルします (これは、設定と同様に、要素を非表示にすることは明らかですdisplay: none
)。
IE6 の「既知の問題」は、IE6 が属性セレクターをサポートしていないことが原因です。
接頭辞「data-」を使用して独自の属性を作成することもできます。たとえば、Jquery Mobile はそれを使用します。
例 :
あなたのHTML
<div data-role="header" data-position="top">
// content here
</div>
あなたのCSS
[data-role=header]
{
font-family:arial;
font-size:20px;
}
[data-position=top]
{
top:5px;
}
適切な説明はこちらにあります。