HTML5フォームのセレクタとCSSのエラー処理

Firefox Hacksに、HTML5フォームに関する記事が掲載されています。新しいinputタイプや、フォームとコントロールの分離、値のvalidationについての紹介など、盛り沢山な内容になっています。

• Firefox 4: HTML5 Forms

さて、記事の中に「New CSS selectors」というセクションがあります。HTML5仕様では、いくつかの新しいフォーム関連セレクタ（擬似クラス）が定義されているのですが、記事では検証に関わる:requiredや:valid, :invalid、およびinput, textareaのplaceholder属性のスタイルを変更するセレクタを紹介しています。

HTML5仕様では、プレースホルダのスタイルを変更することに関しては何も言及がありません。そこで、WebKit, Geckoはそれぞれ固有拡張として::-webkit-input-placeholder, :-moz-placeholderというセレクタを用意しています（記事ではWebKitのものが::-webkit-placeholderとありますが、これは誤りですね）。

さて、入力必須なフォームのプレースホルダに色をつける場合、次のように書いてしまうことがあるのではないでしょうか。

input:required::-webkit-input-placeholder,
input:required:-moz-placeholder {
  color: rgba(192, 0, 0, 0.4)
}

しかし、これではWebKit, Geckoどちらにもスタイルが適用されません。

これは、Geckoでは-webkit-な擬似要素が、WebKitでは-moz-な擬似クラスが不明のセレクタと認識されパースされず、結果としてそのあとのブロック全体が無視されてしまうからです。ですから、記事にある例では、::-webkit-input-placeholderと:-moz-placeholderについて、それぞれ別のブロックでスタイルを定義しています。

今回は:-moz-placeholderや::-webkit-input-placeholderという接頭辞つきセレクタを例に取りましたが、これに限った話ではありません。:requiredや:invalidといったHTML5のセレクタでも、はたまた:not()や:nth-of-typeといったCSS3のセレクタでも起こりうる話です。

プロパティであれば、不正であってもそのプロパティだけが無視されるだけで済みますが、セレクタではルールセット自体が無視されるので影響が大きくなります。セレクタは特に意識せずまとめて書かれることが多いと思いますが、対応状況にばらつきのあるセレクタが入ってくるとこういった問題が起こりやすくなります。

CSS3が今以上に使われ始めると、こうしたCSSの基本的なエラー処理で混乱することが多くなるのではないかと感じています。