79

無効な入力のスタイルを設定しようとしています。使うことができます：

.myInput[disabled] { }

また

.myInput:disabled { }

属性セレクターは最新の CSS3 の方法であり、前進する方法ですか? 以前は疑似クラスを使用していましたが、それらが古い方法でサポートされないかどうか、または両方が同等であり、好きなものを使用できるかどうかについての情報が見つかりません。

古いブラウザーをサポートする必要はありません (これはイントラネット アプリケーションです)。

  • 属性が新しくて優れている
  • 疑似クラスはまだ道のりです
  • あなたが一番好きな方
  • どちらか一方を使用する技術的な理由があります
4

3 に答える 3

82

属性セレクターは最新の CSS3 の方法であり、前進する方法ですか?

  • 属性が新しくて優れている

いいえ; 実際、属性セレクターはCSS2から存在しており、disabled属性自体はHTML 4から存在しています。私の知る限り、:disabled疑似クラスはSelectors 3で導入されたため、疑似クラスが新しくなりました。

  • どちらか一方を使用する技術的な理由があります

はい、ある程度。

disabled属性セレクターを使用すると、スタイリングしているドキュメントが属性を使用して無効なフィールドを示すという知識に依存しています。理論的には、HTML 以外のスタイルを設定している場合、無効なフィールドはdisabled属性を使用して表現されない可能性がありますenabled="false"。HTML の将来の版でも、さまざまな属性を使用して有効/無効状態を表す新しい要素が導入される可能性があります。[disabled]これらの要素は属性セレクターと一致しません。

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

有効な状態、無効な状態、およびユーザー インターフェイス要素を構成するものは、言語に依存します。典型的なドキュメントでは、ほとんどの要素はどちら:enabledでもありません:disabled。

つまり、疑似クラスを使用すると、UA はスタイルを設定しているドキュメントに基づいて、一致する要素を自動的に判断するため、その方法を伝える必要はありません。disabled逆に、属性セレクターは、その要素が実際に有効化または無効化をサポートしているかどうかに関係なく、属性を持つ任意の要素 ( など) と一致しますdiv。このような非標準の動作に依存する多くの最新のフレームワークの 1 つを使用している場合は、属性セレクターを使用したほうがよい場合があります。

DOM に関しては、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]いいえ。私はそのような純粋主義者です。

于 2013-11-22T14:12:39.283 に答える