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

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


↓私が10年以上利用している会計ソフト!

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

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

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

シェアする

コメント

“CSSハック一覧 – IE, Firefox, Safariなどなど” への37件のフィードバック

  1. Mighty Works より:

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

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

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

  4. Webクリエイターボックス より:

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

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

  6. CUBIC4 より:

    CSSハックまとめ…

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

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

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

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

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

  11. […] CSSハック一覧 窶骭€ IE, Firefox, Safariなどなど | Webクリエイターボックス (tags: css ie browser) […]

  12. […] CSSハック一覧 窶骭€ IE, Firefox, Safariなどなど | Webクリエイターボックス (tags: css hack tips browser ie webdesign iphone) […]

  13. […] http://www.webcreatorbox.com/tech/css-hack-list/ Posted in 日常 | No Comments » Leave a Comment […]

  14. hiro より:

    とても参考になりました。ありがとうございます^^

  15. Webクリエイターボックス より:

    お役に立ててよかったです!

  16. MAxUra より:

    #div{
    ;;html>body{margin:20px;} /*Opera用*/
    margin:0;
    }

    これで(たぶん)opera11にだけmargin:20px;の効果がありました。

  17. […] CSSハック一覧 窶骭€ IE, Firefox, Safariなどなど | Webクリエイターボックス →ツ黴€http://www.webcreatorbox.com/tech/css-hack-list/ […]

  18. […] | エンタープライズ | マイコミジャーナル CSSハック一覧 窶骭€ IE, Firefox, Safariなどなど | Webクリエイターボックス 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) […]

  19. れい より:

    古い記事ですしわかってらっしゃる方も多いと思いますが、

    IE8

    #help_me { color: blue\9; }

    は間違ってるかと・・・

  20. […] ブラウザ毎のハックがまとまってあるサイト↓CSSハック一覧  ツ黴€IE, Firefox, Safariなどなど | Webクリエイターボックス […]

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

  22. ジャン より:

    いやあってみるみたいですよ?
    Win IE8で確認しましたがOKでした。

  23. […] CSSハック一覧 – IE, Firefox, Safariなどなど│Webクリエイターボックス […]

  24. s-ej blog より:

    実用 CSSハック 一覧 竏驤€ web tips 追加…

    &nbsp;web tips サンプルを追加しました。 実用 CSSハック 一覧CSSハックって、必要悪という気もしますが、ブラウザが複数...、特にIEが存在する限り利用せざるを得ませんので、上手に付き合うようにしています。多種存在するCSSハックですが、私が現場で利用するCSSハックはおおよそこの範囲に限られます。JUGEMテーマ:WEBデザイン:ホームページ制作…

  25. […] screen and (max-device-width: 480px) { セレクタ { プロパティ: 値; } } 参考:CSSハック一覧 窶骭€ IE, Firefox, SafariなどなどHTML+CSS Coding BEST […]

  26. […] CSSハック一覧 窶骭€ IE, Firefox, Safariなどなど […]

  27. […] CSSハック一覧 – IE, Firefox, Safariなどなど | Webクリエイターボックス […]

  28. […] CSSハックの一覧は以下のサイトがとても役立ちます。 ・CSSハック一覧 窶骭€ IE, Firefox, Safariなどなど | Webクリエイターボックス […]

  29. コメントに載っていたいとは。。ありがとうございます。。。なぜかハックがかからなくて、試行錯誤をしておりました。正しくは、↓になりますか?
    html>/**/body #help_me { color: blue9; }

  30. […] Opera 8, 9以外 ソースを表示 […]

  31. […] Webクリエイターボックス  | CSSのハック一覧、「CSS ハック」で検索すると結構古い情報がヒットする中2010年10月8日現在一番間違いないと思われるサイト […]

  32. […] CSSハック一覧 – IE, Firefox, Safariなどなど  Webクリエイターボックス http://www.webcreatorbox.com/tech/css-hack-list/ […]

  33. […] これによりブラウザに対応したCSSになります。 CSSハック一覧表はWEBクリエイターボックスで紹介されています。→ http://www.webcreatorbox.com/tech/css-hack-list/ […]

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)