diary

cssハックを利用してプラウザごとにcss分け

2010年06月28日(月)

ここの所為にならないちょこっとカジリのサイト作成TIPSを投下しまくっていて心からほとばしるキャラへの愛が皆無なので、がんばって出してみるとですね、ターンエーガンダムは、敵側のパイロットになったり(月の使者なのに地球側に立って月側と戦う)女装したり男に惚れられたりする、ガンダム至上一番しごく全うな性格付けにも係わらずすんごい環境設定をされてる子だと思うのです。
あと、仮面キャラが敵にならず普通に味方。ユニヴァァァァァァースッ!

プラウザ毎に反映されるものが違うのは既知として、今回どうしても改善できないレベルでの致命的な違いが出てしまった為検索した所、荒業でハックを使用することに。以前からbiv要素に対するmarginやborder解釈が違ったものの、デザイン的に大したことないので放置してましたが、商用レベルだととても放置できない為色んなプラウザに対応させるべく奮闘開始。
・・・商用とはいっても、親の自営業のです。元々頼むという選択はないですが、以前親が持ちかけられたのは一万円~というもの。・・・知識ないって恐ろしい。巷にはプラウザによって壮絶なアレをかましてるようなデザインもあるというのに、自鯖借りてドメイン取って自分で営業した方が年間2000円掛からないですよ?
それはおいといて、今回チェックの為にOpera、IE67、SafariダウンロードしたYO。8からダウングレード出来ないから、一々削除してインストールしたYO!劇重、しかし壮観。折角だからこのサイトもチェックしたYO!このサイトは問題なかったYO!ただしFirefoxOperaSafariChromeは最新バージョンでのみの確認、現在サポート終了しているプラウザは確認しませんでした。5年使用のPCが耐えられない!悪しからずや。
商用の方はどうもFireFox+Chrome+Safari/IE/Operaで表示が違う。三つ分けるべく奮闘。
http://www.atmarkit.co.jp/fwcr/design/index/index_csshack.html
このサイトの表が役に立ちました。とはいっても実際は違ったりしたので参考までに記述は以下。表の項目をみて差引したところOperaとそれ以外で分けてみたら上手くいった。/* for プラウザ名 */は注説。この部分にタグ記入。
#menu{
/* for Opera */
width:600px;
_width:640px; /* for IE6 */
}

html:not(:nth-child(n)) #menu{
/* for FireFox or GoogleChrome or Safari */
}
否定Nth Child疑似クラスハックでFirefox、Chrome、Safariのみ適応

*+html>/**/body #menu{
/* for IE8 */
}

*:first-child+html #menu{
/* for IE7 */
}

世間のシェアはIEの次が火狐、Chromeだそうです。以下メモ

  1. InternetExplorer8○
  2. InternetExplorer6○
  3. InternetExplorer7○
  4. Safari○
  5. Opera○
  6. Netscape
  7. FireFox○
  8. その他(Chrome○)