19

現在、ARIA タグなどを使ってアクセシブルなサイトを作ろうとしています。クラスaria-invalidを使用するのではなく、などの属性をCSS の対象にするのに適したセレクターであることに気付きました。.error

これの利点は、よりスリムで意味のある HTML であり、CSS (および JS) から簡単にフックできます。とはいえ、これが他の場所で行われているのを見たことがないので、スタイリングにアクセシビリティ タグを利用することにはマイナス面があるのではないかと疑っています。制約のない属性セレクターを使用すると CSS のパフォーマンスが低下すると思われますが、考慮していない他の欠点はありますか?

4

2 に答える 2

18

属性セレクターは常に0-0-1-0.

[aria-*]セレクターは、スタイリング フックとして使用するのにまったく問題ありません。カスタム[data-*]属性を使用して、1 回限りの必要があるギャップを埋めることもお勧めします。確かにクラス セレクターは引き続き使用する必要がありますが、属性セレクターを使用して非常に洗練されたスタイル拡張を行うことができます。

[data-foo] {
    color: red;
}
[data-foo="bar"] {
    color: blue;
}
[data-foo="fizz"] {
    color: green;
}

これらの各セレクターには同じ特異性があり、カスケードによってスタイルを適切に適用できます。

[attr~="value"]必要に応じて、セレクターを使用して独自の形式のクラスを作成できます。

「属性を含む」セレクターを使用すると、私が「上品なイメージ」と呼ぶテクニックに役立ちます。

クラスよりも属性を使用することの隠れた利点の 1 つは、JavaScript でのパフォーマンスの向上です。要素にクラスが存在するかどうかをチェックする必要がない (これは非常に間違いやすい) 代わりに、ブラウザーはgetAttribute、hasAttribute、およびsetAttributeを長い間サポートしてきました。

于 2013-08-08T00:40:39.393 に答える