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

  • 2010年02月18日
  • Share

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

ワードプレス（WordPress）で企業サイトを構築するならオーツービジネス テーマ

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: blue\9; }

IE7, IE8

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

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用ハックもありました。iPhone持ってないのでテストできませんが… 一応載せておきます。

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

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




記事のトップへ。

関連する記事

コメント

コメントする

  1. CSS Validation Service の説明や CSS Validation Service に通るハック（valid）とエラーになるハック（invalid）のことも併記してあると、便利だなぁと感じました。

  2. 確かに。。。チェックしてみようかな

  3. safariのCSSハック探してたら、またこのサイトに…
    何でもありますね、ココ(ˆˆ)/

トラックバック

トラックバックする

  1. [...] とのことです。 詳細こちらです。 [...]

  2. [...] CSSハック一覧 – IE, Firefox, Safariなどなど | Webクリエイターボックス (tags: css) [...]

  3. [...] CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ [...]

  4. CSSハックまとめ…

    使わない方がいいと思いつつも使ってしまうCSSハック毎回検索してIE8が載ってないとかIE8はあるのにSafariがないとか何度も検索するのも面倒なんで自分用にメモしてお…

  5. [...] CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ [...]

  6. [...] 　よく使うんだけど、ちゃんと覚えてないものの典型。 　 ・CSSハック一覧 – IE, Firefox, Safariなどなど 　きっとこれが決定版。 　 [...]

  7. [...] WordPressの覚え書きというか、カンニングペーパーです。コードなんぞをまとめました。他にもWordPressのチートシートはいたるところで記事にされていますが、CSSハックやCSS小技集に続き、これもまた自分用まとめだったり…。例文も私がよく使うものをコピペしやすいように置いてます。A4サイズの印刷用も作ってみたので、「これ使えるかも！」と思った方は印刷してデスクに置いておくと便利です :) [...]

コメントする

Eメールアドレスは公開されません。





トラックバックURL

記事のトップへ。

サブカテゴリー

CSS JavaScript jQuery Webサイト制作 Webデザイン Web関連記事 Wordpress お知らせ インスピレーション フリーランス マーケティング ユーザビリティ 便利ツール

人気の記事

    アンケート

    無料配布されているもので、あったら嬉しいものは？(3つまで)

    結果を見る

    Loading ... Loading ...