Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2010年11月 > HTML5フォームのセレクタとCSSのエラー処理

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2010年11月26日

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

フロントエンド・エンジニア 矢倉

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

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

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の基本的なエラー処理で混乱することが多くなるのではないかと感じています。