ブラウザ切り替え

締切済

質問者：te398e
質問日時：2012/04/04 01:29
回答数：5件

CSSでブラウザごとにデザインを切り替えることはできますか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： history0612
回答日時：2012/08/16 13:14

他の方たちはCSSハックのことを説明していますが、対応しない場合があります。

そこでjavascriptを使用します
<script>
myBsr = navigator.appName; // getting browser name
myAgent = navigator.userAgent; // infomation
myTop = myAgent.indexOf("Opera",0); // OP
if (myTop == -1){ // OP
myTop = myAgent.indexOf("MSIE",0); // IE
if (myTop == -1){ // IE
myTop = myAgent.indexOf("Mozilla/",0); // NN
if (myTop == -1){ // NN
myVersion = "";
}else{ // NN
myLast = myAgent.indexOf(" ",myTop);
myVer = myAgent.substring(myTop+8,myLast); // NN
myVersion = " Version " + myVer;
}
}else{ // IE
myLast = myAgent.indexOf(";",myTop);
myVer = myAgent.substring(myTop+5,myLast); // IE
myVersion = " Version " + myVer;
}
}else{ // OP
myBsr = "Opera";
myLast = myAgent.indexOf(" ",myTop+6);
myVer = myAgent.substring(myTop+6,myLast); // OP
myVersion = " Version " + myVer;
}
</script>
をhead内に書きます、
後の処理は簡単です。
<script>
if (myBsr == "Opera") {

document.write("<link rel='stylesheet' type='text/css' href='オペラで使うスタイルのURL'>");

}
if (myBsr == "Netscape") {

document.write("<link rel='stylesheet' type='text/css' href='ファイアフォックスやサファリで使うスタイルのURL'>");

}
if (myBsr == "Microsoft Internet Explorer") {

document.write("<link rel='stylesheet' type='text/css' href='IEで使うスタイルのURL'>");

}
</script>
をheadかbodyに入れます。
これで使い分けることが出来ると思います

- 0
- 件

通報する

No.4

回答者： lilillllililili
回答日時：2012/04/04 12:07

CSSハックを利用することにより簡単に実現できます。

私はよくIEだけに反映させるために、 _color: blue; のようにアンダーバーを入れたりします。
たとえば、次のようにするとFireFoxのみスタイルシート（color: red）が反映されます。
<style>
#help_me, x:-moz-any-link { color: red; }
</style>

CSSハックの一覧は次のサイトが見やすいかと思います。
> http://www.webcreatorbox.com/tech/css-hack-list/

ただし、ブラウザの仕様変更などにより利用できなくなる可能性もあります。
より確実に切り替えたい場合、JavaScriptでブラウザごとに表示を変えるような仕組みにするべきだと思います。該当するブラウザの出力に document.write('<style>#help_me { color: red; }</style>'); などとすると手軽に切り替えられます。
> http://d.hatena.ne.jp/Naotsugu/20110927/1317140891

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2012/04/04 08:39

　そもそも

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　ですから、ユーザーエージェントごとにスタイルシートを変えるのは一般的に行われています。たとえば、『6.13 出力メディア ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』にあるように、screen,tty,tv,projection,handheld,print,braille,aural用にスタイルシートを用意しておく。特に印刷用のスタイルシートや携帯電話用のスタイルシートは用意しておくべきでしょう。方法は「14.4.1 メディア依存のカスケード ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」、さらに携帯電話、スマートフォンとか。
　ブラウザが、上で言うscreenメディア用のブラウザと言うことでしたら、スマートフォンのブラウザもscreenメディアに分類されますから、ディスプレイの巾に合わせてスタイルシートを切り替えるなども行われています。
　さらに、パソコン用のブラウザによって切り替えるなら、サーバーへの要求ヘッダに記載されているHTTP_USER_AGENTを参照してサーバーで動的にHTMLを作成し、<HEAD>内の<LINK>要素を書き換えることや、javascriptを使って<LINK>の内容を書き換えることもできるでしょう。いずれにしても、サーバー側、ないしjavascriptひとつを書き換えれば、すべてのページに適用させることもできます。
　代替スタイルシートを用意してユーザー側に切り替えてもらっても良い。

　結論は「可能です」かな

- 0
- 件

通報する

No.2

回答者： taloo
回答日時：2012/04/04 06:49

CSSハックを駆使すれば可能ですが、

CSSハック自体、ブラウザのアップデートで使えなくなる可能性の方が高いですから、
Firefox11は独特の表示になっていたのにFirefox12でChromeと同じになった、ということも起こりえます。
また、ブラウザバージョンアップでそのバージョン用のハックがなくなる可能性もありますので、
CSSだけで行おうというのは、現実的ではないと思います。