IEちゃんとは長い付き合いだけど、そろそろ潮時別れたい

さすがに今更IE対応に注力するのは時間の無駄。基本はChrome等で作業して、最終確認時にIEでちらっと見て崩れがあったらIEハックでちょろっと直す感じ。対応バージョンももはや11だけでいいでしょ、みたいなところに落ち着く。本当は完全に縁を切りたいけど、まだ状況によっては「IEだと崩れてます！」って突っ込まれる……。

IEハック

css

_:-ms-input-placeholder, :root ここに適用したいセレクタ {
  css宣言
}

IE10と11に適用されるハック。いろんなハックを調べて見比べて最終的にこれにたどり着く。
何も考えずにこれを使うだけで実務上は問題ない。けど、仕組みを理解しないで使うのもなんともいえない気持ち悪さがあったから、なんでこれでIEハックになるのかも調べてみる。

最初の「_（アンダースコア）」

理屈の上ではCSSを適用するサイトに影響しないセレクタなら何でもいい。ただ「_（アンダースコア）」や「-（ハイフン）」は予約語やらベンダープレフィックスの仕様上単体で使われることはまずない、ということでこうなってるっぽい。

「:-ms-input-placeholder」

IE10と11が理解できる疑似クラス。

各ブラウザは理解できないコードに出くわすと、その宣言ブロックかCSS宣言をまるっと無視する。

css

/* IE以外だと、宣言ブロックがまるっと無視される */
_:-ms-input-placeholder {
  color: #000;
}

css

/* IE以外だと、CSS宣言がまるっと無視される */
.test {
  -ms-writing-mode: tb-rl;  /* この行が無視される */
  writing-mode: vertical-rl;
}

これを利用して、IEのみに適用する宣言ブロックを作っている。

つまり、最初の「_:-ms-input-placeholder」はIEのみが理解できる、サイトには存在しないセレクタを表しているっぽい。
あとは「,」でつないで、本命のセレクタを記述すればめでたくIEハックの完成。これ最初に考えたひとはどんな頭してるんだ……天才か。

「:root」

適用するドキュメントのルート=<html>扱いになる。普通あまり使わない（当たり前といえば当たり前）。じゃあなんで使うのかというと詳細度を上げるためらしい。ぶっちゃけ、IEハックをCSSの最後に付け足すとかであれば、なくても問題なく動作する。ただ、どこに書かれるかははっきりしないから、どこに書いても大丈夫（な可能性が高いだろう）ということで付けてるっぽい。

これらの細かいテクニックの積み重ねにより、仕組みを理解する必要もなく手軽にIEハックを実現できてしまう。すごいんだけど、数年後には「そんなこともやってたね～あはは」みたいなテクニックになってしまうのは世知辛いですね。