option 要素が disabled しないブラウザの話

投稿

CSS昔話 Advent Calendar 2015(www.adventar.org)の20日目の記事です。

あるとき Amazon で Kindle コミックを購入しようとして、「配信先」のプルダウンがおかしなことに気付きました。5種類登録されているうち、ひとつだけ選択できない項目があるのですが、なぜかフォントが太字だったり、文字の開始位置が少しずれているのです。

オリジナル画像
Kindle 本の「配信先」プルダウンを Chrome で表示したところ

HTMLソースコードを見て納得。選択できない項目は <option disabled> ではなく <optgroup label=""> を使っていたのです。簡略化するとこんな感じに。

<select>
  <option selected="">選択肢1</option>
  <option>選択肢2</option>
  <optgroup label="選択肢3（選択できない）"></optgroup>
  <option>選択肢4</option>
  <option>選択肢5</option>
</select>

なぜこんなことをしているのか。おそらく IE 8 対策でしょう。そう、IE 8 以前は option 要素の disabled 属性を認識しない(msdn.microsoft.com)のです。

一方、 optgroup 要素は option 要素をグループ化するもので、 label 属性に指定した文字列が画面に表示されます。ここで注目したいのは次の点です。

  • optgroup 要素は必ずしも中身に option 要素を含める必要はない（中身が空の状態は HTML として正当）
  • optgroup 要素自体を選択することはできない

これらは HTML 5.1 仕様書にも明記(W3C)されており、どのブラウザでも共通した挙動となっています。まあそんな特性を利用して、 optgroup 要素を「選択できない option 要素」代わりに使っているのだと思います。

しかし、このテクニックは optgroup 要素に適用できるスタイルに制約があるという問題があります。具体的にはこんなことが。

  • IE 9 以下は font-style が効かず、斜体で表示されてしまう
  • Chome 47 や Edge 25, IE 11 等は font-weight が効かず、太字で表示されてしまう
  • Chome 47 や Edge 25, IE 11 等は margin, padding が効かず、 select > option と比べて文字列の表示位置がずれてしまう

Amazon としては、多少見た目に問題があるとしても、選択できてはいけない項目が古いブラウザで選択できてしまうという問題の解消を重視したのではないでしょうか。

こんな厄介な問題を抱えた IE 8 も終焉が迫っています。素敵な愛称を付けられたり、専用のカウントダウンサイトが作られたり、葬儀まで行われた IE 6 たんと比べて、なんというかその、お別れ感のなさがありますね。まあ安らかにお眠りください。さようなら。