IEのクソにやられた

簡単なWeb技術なお話

<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

ただのセレクトボックス。Bの選択肢は非表示にするか～と思ったりした時どうしますか。
IEではoptionをCSSで非表示(display:none)にするのは動かなかったと思います。そのためhiddenを付与するのが一番シンプルなのではないでしょうか。

HTML 5 <option> Tag
http://www.quackit.com/html_5/tags/html_option_tag.cfm

optionのhiddenは、HTML5ではGlobal Attributesとのこと。うん、問題ないはず。
というわけで何も考えずボーンとhidden付与。

<select>
    <option>A</option>
    <option hidden>B</option>
    <option>C</option>
</select>

Chromeだと選択肢Bはしっかりと画面上から消え去ります。でもIEだと消えません。CSSの非表示がダメだからHTML5にしたのに、まさかのダブルアウトですよ。こんな単純なものでずっこけるとは予想すらしておらず、私の請け負っているWebサービスではこれちょっとヤバいなって緊急対応が必要になりました。対応内容としては、非表示は諦め、非表示にしたいイベントが起こったらjQueryで項目ごと削除するようにしました。消せば確実という判断。

※私はプライベートではFirefoxユーザーですが、お仕事のWeb開発では基本的にChromeをベースにしています。

あと、凄くどうでもいいけど、なんで私は急にフロントエンドのお仕事してるんですかね。
私、フロントエンドとは真逆の方のお仕事をすることが多いんですけど。Webはセキュリティを考えないといけないので仕事でやるのはダルいんだよなぁ。。。