CSSのIE8対策覚書。

IE8、いつになったら使う人が消えてくれるんでしょうかね？

今時のコーディングは、IE10以上最新版対応が当たり前になっている。スマホやタブレットへの対応を念頭にコードを書かなきゃならないから、正直古いバージョンのIEは対応したくないし、色んな意味で面倒くさいし。

特に擬似セレクタと言われるもの。

これ、使えるようになるとトコトン便利なんですよね。

ホントに今まで苦労していた事が、ほんのちょっと書き込むだけでサクサク思い通りに動いてくれるのがもう感動モノでした。

がしか～～し！Internet Explorer、これがまともに動いてくれない。

出来る事ならCSSだけでサクサク動かしたい、余計なものを書きたくない、徹底したシンプル主義の私にはもうIE対策を考えるだけでウンザリ。

とりあえず、使っても大丈夫なのは「first-child」。

これだけで多少は何とかなるようになったから、気持ち的に落ち着いてきてますが。

できれば、他の擬似セレクタも使えるようになってくれないだろうか。

せめて「nth-child」、これが追加されると非常に有り難い。できれば、jQuery使わずに！

jQuery使えばIE8でもそれ以下でも何とかなるのは知っている。

でも、それを使うな！という指示の環境で仕事しなきゃならない場合、出来る限りCSSだけで何とかしなきゃならないのですわ。

ということで、大抵使う羽目になるパターンとして「リスト」についての覚書。

あくまで自分のための覚書なので、優秀な方々には意味のない話でございます。

なので批判等々は無視させていただきます。

どちらにしても他の方に比べたら全然スキル低いので、生ぬるい目で見てもらえれば有り難いです。

新着情報等に使う事が多い、下線などの装飾。

これを一番下だけ無い状態にする場合、私は逆に上にborder、あるいはbackgroundで設定しています。

で「:first-child」でborderまたはbackgroundを消す（表示しない）という方法をしています。

横並べリストで余白を入れたい場合でも同じ方法で、今度はmargin（またはpadding）を設定しています。

が・・・リストの最後で他と違うやり方をしなきゃならない場合が稀に出てくる。

その場合は、通常なら「:last-child」か「:nth-child(n)」で問題ないのだけれど、IE8が反応しない。

「ul > *:first-child + * + * + * + * {}」で対応できるのは重々承知しているのです。

でもこれじゃ、リストの数が増えるたびにいちいち設定し直さなきゃならないし、大抵納品した後でそういう予想外の事が起きるので、私の預かり知らずなところで変な改変がされる羽目になるんですよね。

公開されてから見に行くと、せっかく頑張ったコーディングソースが弄られて全然違うモノになっていたりすると悲しいので、他者に弄られる必要のない状態で納品できればいいな、ということで。

「li」タグにクラス設定して対応することにしています。

一番最後のデータは恐らく改変は無いだろうし。たぶん。

ソースが変に汚くなるのが私的に許せないモノがありますが、やむを得ない事情というのもありますし。

一番良いのはIE8がサッサと消えて無くなるのが最良なのですけどね。

リスクを追ってまで古いバージョンを使う意味が私には理解できない。

といいつつ、一般の人はそういうの全然考えないよねぇ・・・、バージョン管理なんてサッパリ分からないだろうし。

専業主婦とか中高年齢の方々は余計頭使わないし。

もうちょっと冒険できる環境に、早く世の中なってくれないかなぁ・・・。