更新日2024年9月24日

CSSハック一覧 - IE, Firefox, Safariなどなど

異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！

Internet Explorer

IE6 以下

#help_me {
  _color: blue;
}

* html #help_me {
  color: red;
}

IE7

*:first-child + html #help_me {
  color: red;
}

* + html #help_me {
  color: red;
}

IE6, IE7

#help_me {
  /color: blue;
}

IE8

#help_me {
  color: blue9;
}

IE7, IE8

#help_me {
  color/***/: blue9;
}

IE6 以外

#help_me {
  color/**/: blue;
}

IE6, IE7 以外

html>/**/body #help_me {
  color: red;
}

IE6〜IE8 以外

:root * > #help_me {
  color: red;
}

モダンブラウザ

Firefox

#help_me,
x:-moz-any-link {
  color: red;
}

Firefox 3.0 以上

#help_me,
x:-moz-any-link,
x:default {
  color: red;
}

Safari 2-3

html[xmlns*=""] body:last-child #help_me {
  color: red;
}

Safari 2 - 3.1

html[xmlns*=""]:root #help_me {
  color: red;
}

Safari 2 - 3.1, Opera 9.25

*|html[xmlns*=""] #help_me {
  color: red;
}

Safari 3 以上, Chrome

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #help_me {
    color: red;
  }
}

Safari 3 以上, Chrome, Opera 9 以上, Firefox 3.5 以上

body:nth-of-type(1) #help_me {
  color: red;
}

body:first-of-type #help_me {
  color: red;
}

Opera 9.25 以上

body #help_me {
  color: red;
}

html: 66irst-child #help_me {
  color: red;
}

Opera 8, 9 以外

body[class|="hypen-ated"] #help_me {
  color: red;
}

iPhone

iPhone のみ CSS を変える場合は iPhone 用 CSS を作成して読み込ませます。

<link
  media="only screen and (max-device-width: 480px)"
  href="iphone.css"
  type="text/css"
  rel="stylesheet"
/>

ブックマークしていた CSS ハックのサイトの中に iPhone 用ハックもありました。

@media screen and (max-device-width: 480px) {
  #help_me {
    color: red;
  }
}

これでたくさんありすぎてごちゃごちゃしていたブックマークが整理できる。。なるべく CSS ハックを使わないですむようなデザインができれば一番いいんですけどね。