Internet Explorer のせいで病気にかかってたよ!

IE6を切り捨てたことで分かったこと。それは、言うなればIE病とでも言うべき病気にかかっていたという事実。

例えば、以下のようなリストがあったとして、

<!-- HTML -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

項目2にだけ何かスタイルを設定したいとき、どうしてます?

おそらく、IE6をサポートする場合にはHTML側にclassを追加しますよね?

<!-- HTML -->
<ul>
  <li class="item-1">項目1</li>
  <li class="item-2">項目2</li>
  <li class="item-3">項目3</li>
</ul>
 
/* CSS */
li.item-2 {}

でもね、CSS3を先行実装しているブラウザなら、classを追加しなくてもnth-child疑似クラスなんかを使ってスタイルを設定できるんですよ。

<!-- HTML -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>
 
/* CSS */
li:nth-child(2) {}

もしも、CSS3を先行実装していないIE7を(しかたなく)サポートする場合でも、first-child疑似クラスと隣接セレクタを組み合わせることで、nth-child疑似クラスを再現できるんです。

/* CSS */
li:first-child+li {}

HTML5を例に挙げるなら、header要素やfooter要素がいくつも出てくるような場合、結構くどいソースになりがちです。

<!-- HTML -->
<section>
  <header class="section"></header>
  <article>
    <header class="article"></header>
    <footer class="article"></footer>
  </article>
  <aside>
    <header class="aside"></header>
    <footer class="aside"></footer>
  </aside>
  <footer class="section"></footer>
</section>
 
/* CSS 其之壱 */
header.section {}
footer.section {}
header.article {}
footer.article {}
header.aside {}
footer.aside {}
 
/* CSS 其之弐 */
section header {}
section footer {}
article header {
  section header のプロパティをリセット
}
article footer {
  section footer のプロパティをリセット
}
section header {
  section header のプロパティをリセット
}
section footer {
  section footer のプロパティをリセット
}

でも、IE6をサポートしなければ子供セレクタが使えるのでスッキリできます。

<!-- HTML -->
<section>
  <header></header>
  <article>
    <header></header>
    <footer></footer>
  </article>
  <aside>
    <header></header>
    <footer></footer>
  </aside>
  <footer></footer>
</section>
 
/* CSS */
section>header {}
section>footer {}
article>header {}
article>footer {}
aside>header {}
aside>footer {}

IE病っていうのは、気づかないうちにファットで汚いソースを書くことに慣れてしまっているという病気です。言うなればIEメタボリックシンドロームです。結構患者さん多いんじゃないんですか?