CSS :disabled 疑似クラスと[disabled]属性セレクタのどちらを使うべきか、意見の相違は？

質問

無効化された入力にスタイルを設定しようとしています。私は使用することができます。

.myInput[disabled] { }

または

.myInput:disabled { }

属性セレクタは現代のCSS3の方法で、今後進むべき道なのでしょうか？以前は擬似クラスを使っていたのですが、古い方法でサポートされないのか、どちらも同等で一番好きなものを使えばいいのか、情報が見つかりません。

古いブラウザをサポートする必要はないので (イントラネットのアプリケーションです)、そうしています。

• 属性はより新しく、より優れています。
• 擬似クラスはまだ行くべき道です
• 好きなほうを選ぶ
• 技術的な理由でどちらか一方を使う

どのように解決するのですか？

属性セレクタは、現代のCSS3の方法であり、今後進むべき道なのか？

• 属性はより新しく、より良い

いいえ、実は属性セレクタは CSS2 の頃からあり、また disabled 属性自体は HTML 4 . 私の知る限りでは :disabled 擬似クラスが導入されたのは セレクタ 3 で導入され、擬似クラスはより新しいものになりました。

• どちらかを使う技術的な理由がある。

はい、ある程度は。

属性セレクタでは、スタイリングしているドキュメントが disabled 属性が使用されているという知識に依存しています。理論的には、HTML でないものをスタイリングする場合、無効化されたフィールドは disabled 属性を用いて表現されないかもしれません。例えば、それは enabled="false" のようなものです。HTML の将来のエディションでは、有効/無効の状態を表すために異なる属性を使用する新しい要素が導入される可能性があり、それらの要素は それらの要素は [disabled] 属性セレクタにはマッチしないでしょう。

は :disabled 擬似クラスは、セレクタを作業中のドキュメントから切り離します。仕様では、単に無効になっている要素を対象とし、要素が有効か無効か、あるいはそのどちらでもないかは の代わりにドキュメント言語によって定義されます。 :

何が有効な状態、無効な状態、そしてユーザーインターフェースの要素を構成するかは、言語に依存しています。典型的な文書では、ほとんどの要素は :enabled でもなく :disabled .

つまり、擬似クラスを使用すると、UAはスタイリングしている文書に基づいてどの要素にマッチするかを自動的に判断するので、どのようにマッチするかを指示する必要がありません。逆に、属性セレクタは disabled 属性を持つあらゆる要素にマッチし、その要素が実際に有効か無効かをサポートしているかどうかに関係なく、例えば div . このような非標準的な動作に依存する多くの最新のフレームワークを使用している場合、属性セレクタを使用する方がよいでしょう。

DOMの観点では、私は disabled プロパティを設定すると、その HTML 要素の disabled 属性も変更されます。つまり、どちらのセレクタでも DOM 操作に違いはありません。ブラウザ依存なのかどうかは分かりませんが はここでいじくる で、すべての主要なブラウザの最新バージョンでそれを実証しています。

// The following statement removes the disabled attribute from the first input
document.querySelector('input:first-child').disabled = false;

ほとんどの場合、HTMLをスタイリングすることになるでしょうから、このどれもがあなたにとって何の違いもないかもしれませんが、もしブラウザの互換性が問題でなければ、私は :enabled と :disabled 以上 :not([disabled]) と [disabled] というのは、擬似クラスは属性セレクタにはないセマンティクスを持っているからです。私はそのような純粋主義者なのです。