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 Validation Service の説明や CSS Validation Service に通るハック（valid）とエラーになるハック（invalid）のことも併記してあると、便利だなぁと感じました。
[…] とのことです。 詳細こちらです。 […]
[…] CSSハック一覧 窶骭 IE, Firefox, Safariなどなど | Webクリエイターボックス (tags: css) […]
確かに。。。チェックしてみようかな
[…] CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ […]
CSSハックまとめ…
使わない方がいいと思いつつも使ってしまうCSSハック毎回検索してIE8が載ってないとかIE8はあるのにSafariがないとか何度も検索するのも面倒なんで自分用にメモしてお…
[…] CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ […]
[…] よく使うんだけど、ちゃんと覚えてないものの典型。 ・CSSハック一覧 窶骭 IE, Firefox, Safariなどなど きっとこれが決定版。 […]
[…] WordPressの覚え書きというか、カンニングペーパーです。コードなんぞをまとめました。他にもWordPressのチートシートはいたるところで記事にされていますが、CSSハックやCSS小技集に続き、これもまた自分用まとめだったり…。例文も私がよく使うものをコピペしやすいように置いてます。A4サイズの印刷用も作ってみたので、「これ使えるかも！」と思った方は印刷してデスクに置いておくと便利です :) […]
safariのCSSハック探してたら、またこのサイトに…
何でもありますね、ココ(ﾋ・陂)/
[…] http://www.webcreatorbox.com/tech/css-hack-list/ […]
[…] CSSハック一覧 窶骭 IE, Firefox, Safariなどなど | Webクリエイターボックス (tags: css ie browser) […]
[…] CSSハック一覧 窶骭 IE, Firefox, Safariなどなど | Webクリエイターボックス (tags: css hack tips browser ie webdesign iphone) […]
[…] http://www.webcreatorbox.com/tech/css-hack-list/ Posted in 日常 | No Comments » Leave a Comment […]
[…] http://www.webcreatorbox.com/tech/css-hack-list/ […]
とても参考になりました。ありがとうございます＾＾
お役に立ててよかったです！
#div{
;;html>body{margin:20px;} /*Opera用*/
margin:0;
}
これで(たぶん)opera11にだけmargin:20px;の効果がありました。
[…] CSSハック一覧 窶骭 IE, Firefox, Safariなどなど | Webクリエイターボックス →ﾂ黴http://www.webcreatorbox.com/tech/css-hack-list/ […]
[…] | エンタープライズ | マイコミジャーナル CSSハック一覧 窶骭 IE, Firefox, Safariなどなど | Webクリエイターボックス 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) […]
[…] http://www.webcreatorbox.com/tech/css-hack-list/ […]
古い記事ですしわかってらっしゃる方も多いと思いますが、
IE8
#help_me { color: blue\9; }
は間違ってるかと・・・
[…] ブラウザ毎のハックがまとまってあるサイト↓CSSハック一覧 ﾂ黴IE, Firefox, Safariなどなど | Webクリエイターボックス […]
[…] 滋賀WordPressの覚え書きというか、カンニングペーパーです。コードなんぞをまとめました。他にもWordPressのチートシートはいたるところで記事にされていますが、CSSハックやCSS小技集に続き、これもまた自分用まとめだったり…。例文も私がよく使うものをコピペしやすいように置いてます。A4サイズの印刷用も作ってみたので、「これ使えるかも！」と思った方は印刷してデスクに置いておくと便利です […]
いやあってみるみたいですよ？
Win IE8で確認しましたがOKでした。
[…] CSSハック一覧 – IE, Firefox, Safariなどなど│Webクリエイターボックス […]
実用 CSSハック 一覧 竏驤 web tips 追加…
web tips サンプルを追加しました。 実用 CSSハック 一覧CSSハックって、必要悪という気もしますが、ブラウザが複数．．．、特にIEが存在する限り利用せざるを得ませんので、上手に付き合うようにしています。多種存在するCSSハックですが、私が現場で利用するCSSハックはおおよそこの範囲に限られます。JUGEMテーマ：ＷＥＢデザイン：ホームページ制作…
[…] screen and (max-device-width: 480px) { セレクタ { プロパティ: 値; } } 参考：CSSハック一覧 窶骭 IE, Firefox, SafariなどなどHTML+CSS Coding BEST […]
[…] CSSハック一覧 窶骭 IE, Firefox, Safariなどなど […]
[…] CSSハック一覧 – IE, Firefox, Safariなどなど | Webクリエイターボックス […]
[…] CSSハックの一覧は以下のサイトがとても役立ちます。 ・CSSハック一覧 窶骭 IE, Firefox, Safariなどなど | Webクリエイターボックス […]
コメントに載っていたいとは。。ありがとうございます。。。なぜかハックがかからなくて、試行錯誤をしておりました。正しくは、↓になりますか？
html>/**/body #help_me { color: blue9; }
[…] Opera 8, 9以外 ソースを表示 […]
[…] Webクリエイターボックス | CSSのハック一覧、「CSS ハック」で検索すると結構古い情報がヒットする中2010年10月8日現在一番間違いないと思われるサイト […]
[…] CSSハック一覧 – IE, Firefox, Safariなどなど Webクリエイターボックス http://www.webcreatorbox.com/tech/css-hack-list/ […]
[…] これによりブラウザに対応したCSSになります。 CSSハック一覧表はWEBクリエイターボックスで紹介されています。→ http://www.webcreatorbox.com/tech/css-hack-list/ […]
[…] http://www.webcreatorbox.com/tech/css-hack-list/ […]