Hatena::ブログ(Diary)

MOMIZINE

2009年01月08日

Operaだけに適応させたいCSSハック

Operaだけってのが見つけられなかったので、エントリーかいてみました。といっても他のCSSハックの複合技でOperaだけ普通に表示させているだけです。しかも「ほぼ」で完全にではないんです。今回やりたかったのはOpera9.x系統、firefox3.x、safari3.x、IE5.5〜6、IE7をCSSで区別したかっただけで、ネタ用なんでまじめにレイアウト調整などするなら回りくどいことしなくていいと思います。多分それ以外のブラウザを使っている人はどんなに他のブラウザ進めたって乗り換えたりしないでしょ。レイアウト崩れとかどーでもいいんでしょ。

事前準備として、HTML側の構成はOperaブラウザで閲覧すると「Operaサイコォオー」と表示され、それ以外のブラウザでは「Opera使いなさいよぉ!」と表示させることにします。

<html>
<head></head>
<body>
<div class="none">
<p>Opera使いなさいよぉ!</p>
</div><!-- opera -->
<div class="opera">
<p>Operaサイコォオオオー</p>
</div><!-- opera -->
</body>
</html>

確認としてCSSハックのおさらいです。


firefoxだけに適応するCSSハック

div.none,x:-moz-read-only {display:block !important;}

Firefox 1.0, 1.5, 3.0 用の CSS ハック

http://www.yomotsu.net/lab/css/csshack_firefox


safariだけに適応するCSSハック

@media screen and (-webkit-min-device-pixel-ratio:0){
div.none {display:block !important;}
}

Safariのこれまで使われてきたhtml[xmls*=""]ってのがうまく動いてくれなかったので、@mediaで指定してその中に記載しています。@mediaって言ってる時点でCSSハックでは無い気がしてきたぞ。同じようなことがmozilla系のブラウザでも出来たような気がします。

[CSS]Safari3.X用CSSハック

http://tenderfeel.xsrv.jp/css/91/


IE4〜6に適応するCSSハック(アンダースコアハック)

div.nonoe {_display:block !important;}

IE7に適応するCSSハック(スターハック)

*:first-child+html div.none {display:block !important;}

CSSハック | 謎解きウェブ | BLOG × WORLD ENDING

http://blog.worldending.jp/web/css-hack.php


全部まとめるとこんな形になります。

/* Opera */
.none {display:none;}                               /* デフォルトでOpera使えを非表示 */
/* firefox */
.none,x:-moz-read-only {display:block !important;}  /* Opera使えを表示       */
.opera,x:-moz-read-only{display:none;}              /* Operaサイコーを非表示 */
/* safari */
@media screen and (-webkit-min-device-pixel-ratio:0){
.none {display:block !important;}                    /* Opera使えを表示       */
.opera{display:none;}                                /* Operaサイコーを非表示 */
}
/* IE */
.none {_display:block !important;}                   /* Opera使えを表示       */
.opera {_display:none;}                              /* Operaサイコーを非表示 */
*:first-child+html .none {display:block !important;} /* Opera使えを表示       */
*:first-child+html .opera {display:none;}            /* Operaサイコーを非表示 */

完成形はこんな感じです。自分の環境では問題ありませんが、不具合があったら教えていただければと思います。

今日の結論:Opera使いなさいよぉ。


ここまで書いて、見つけちゃった。これは知らなかった・・・。Opera9.63、Opera10アルファで無事動いてました。

Opera9に対応させるCSSハック

p:not(\*|*) { color: red ; }

Opera 9.51ハック。

http://ykhr.jp/blog/2008/07/opera_951.html

このCSSハックを使うともっとすっきりします。

今日の反省:Operaハックって単語は造語?

余談ですが、googleのChromeはエンジンがwebkitなのでSafari系のハックで対応できると思います。もういいよ自分のメモで。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/momizine/20090108/1231397816
Connection: close