- ベストアンサー
safari,firefoxでスタイルシートを使いたい
- ブラウザごとにスタイルシートを使い分ける方法を教えてください。
- safariとfirefoxではlink要素を使ってスタイルシートを指定することができないようです。
- ブラウザ判定を行い、適切なスタイルシートを適用したいです。
- asakichi00
- お礼率57% (61/106)
- JavaScript
- 回答数7
- ありがとう数6
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
補足ありがとうございます。 残念ながらcssに大いに問題アリです。 cssセレクタの名前は「アルファベットで始まり、アルファベット、数字、ハイフン/アンダースコア（およびUnicodeの一部）のみで構成される、ただし最初の文字には"数字/ハイフンは使えない"」となっております。 つまり数字から始まっているためセレクタとしてきちんと認識されていなかったということですね。 むしろこれで動いたブラウザがあることが驚きです。 わたしの環境ではどのブラウザでもこのクラスが適用されることはありませんでした。 ちなみにこれは定義はプログラムの変数とかの名前も同じです。 cssではあまり意識しないかもしれませんが、プログラムの場合最初を数字にしてしまうと、 整数リテラルとして認識してしまうので、使えません。 ハイフンではじめた場合は減算の代数演算子として扱われてしまいます。 cssの中で演算をすることはできませんが、数字やマイナスの数値を扱いますし、 多分、同じような内部的な事情でこのような制約がcssにもあるのでしょう。 ということで、セレクタ名を規則通りに変更すれば解決ですね。
その他の回答 (6)
おっと。。。マックでしたか。。当方では残念ながら再現できませんね； document.writeで出力して分ける方法は広く出回っているので、大丈夫だと思いますし、 なおかつ、きちっと判別自体はできているわけですし。。。 もしかしたら灯台下暗しというか、思わぬところでつまづいているのかもしれませんね。(環境かcss?) お力になれず申し訳ないです。
お礼
ご多忙中の所、度々のご回答ありがとうございます。 ちなみに、今回のcssファイルの中身は、それぞれ、以下の通りです。 ↓winIE.css======================= ： .14px { font-family: "ＭＳ Ｐゴシック", "Osaka"; font-size: 14px; color: #333333; letter-spacing: 1px; line-height: 16px; white-space: normal; word-spacing: 0px; word-break: break-all; } ： ↑winIE.css======================= ↓macSaf.css、macNsc.css========== ： .14px { font-family: "ＭＳ Ｐゴシック", "Osaka"; font-size: 6px; color: #333333; letter-spacing: 1px; line-height: 16px; white-space: normal; word-spacing: 0px; word-break: break-all; } ： ↑macSaf.css、macNsc.css========== 問題ないと思うのですが・・・。
うへ、DOCTYPE宣言のとこ切れちゃってますね。 無くても良いので消しといてください。。
ありゃ、こちらこそ早とちり失礼しました。 文法は同じですね。まれにcssハックと呼ばれるようなものとか、対応してないプロパティとか、ありますけども。 私の環境ではサファリとファイヤーフォックスできちっとcssが分かれますね。 環境： winXP safari4.0.4 firefox3.6.8 ソース： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript"> function getBrowserName() { var aName = navigator.appName.toUpperCase(); var uName = navigator.userAgent.toUpperCase(); if (uName.indexOf("SAFARI") >= 0) return "Safari"; if (uName.indexOf("OPERA") >= 0) return "Opera"; if (uName.indexOf("FIREFOX") >= 0) return "Firefox"; if (aName.indexOf("NETSCAPE") >= 0) return "Netscape"; if (aName.indexOf("MICROSOFT") >= 0) return "Explorer"; return ""; } var browser = getBrowserName(); if (browser == "Firefox") dirName = "Firefox.css"; if (browser == "Safari") dirName = "Safari.css"; document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>"); </script> </head> <body> <div></div> </body> </html> Safari.css ===================== div{ width:30px; height:30px; background:#666666; } Firefox.css ===================== div{ width:30px; height:30px; background:#FF0000; } きちっと判定ができてて無理というのは謎ですね。
補足
度々、ご丁寧なご回答ありがとうございます。 誠に恐縮ですが、また、当方の記載漏れになってしまいますが、 わたくしの方で確認したsafariとfirefoxのosは、winではなく、macです。 これって、重要な情報だったでしょうか。 macでもcssは認識できますよね。
getBrowserName(); こんな関数はwindowオブジェクトにはないです。 誰かの自作関数ですよ。 function getBrowserName() { var aName = navigator.appName.toUpperCase(); var uName = navigator.userAgent.toUpperCase(); if (uName.indexOf("SAFARI") >= 0) return "Safari"; if (uName.indexOf("OPERA") >= 0) return "Opera"; if (uName.indexOf("FIREFOX") >= 0) return "Firefox"; if (aName.indexOf("NETSCAPE") >= 0) return "Netscape"; if (aName.indexOf("MICROSOFT") >= 0) return "Explorer"; return ""; } var browser = getBrowserName(); if (browser == "Netscape") dirName = "macNsc.css"; if (browser == "Explorer") dirName = "winIE.css"; if (browser == "Safari") dirName = "macSaf.css"; document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>"); 足りてない部分を足すと、こんな感じですね。 ちなみにこのままだと、chromeはsafariに振り分けられます。 まぁ、レタリングエンジンが殆ど同じなので意識する必要はあまりなとおもいますし、 めんどくさいので直しません。。
補足
>こんな関数はwindowオブジェクトにはないです。 大変失礼しました。 質問欄への記入漏れです。 自作関数の部分は、ソースにはちゃんと書いております。 変数「browser」の中身も、ちゃんとブラウザによって、値が異なるのを確認済みです。 わたくしの説明不足でした。 なお、未だに、cssが認識しない件は未解決です。 ブラウザが変われば、cssファイルの文法が変わるのでしょうか。（そんなことないですよね。） いずれにせよ、引き続き調査中です。
- yyr446
- ベストアンサー率65% (870/1330)
「テストしたの」意味違い（タイポ） 「テストしたの」＝＞「テスト↓」で私がテストしたという 意味でした。
- yyr446
- ベストアンサー率65% (870/1330)
safariは調べてないですが、 ご提示の document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>"); の部分は、firefox（3.6）Chrome、IE で、ちゃんと反映されてます。 OSの判定とかCSSの中身に問題があるんじゃなかろうか？ テストしたの <body> <p>Hello World</p> <script type="text/javascript"> var dirName="/gomi.css"; document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>"); </script> </body> gomi.css p {color:red;}
補足
>テストしたの 当然ですよ。 ieでmacNsc.cssを指定して、認識するのを確認の上での質問ね。
お礼
＞ただし最初の文字には"数字/ハイフンは使えない ご指摘の通りでした。 残るは、cssファイルの中身だけだと思ってましたが、基本的な文法ルールの問題ですね。 アルファベットに変えて、無事解消しました。 しかしながら、cssセレクタの先頭文字が数字であっても、IEでは動くのですね。 しかしながら、最初から、cssファイルの中身を質問欄に記述しておけば、imaimasan様のお手をここまで煩わすことはなかったですのに。 さらに、わたくしの無知により、本当にお手数をおかけしました。 （ちなみに、言い訳にもなりませんが、この「cssセレクタの名前」は、どこからコピペしたものでした。） このたびは勉強になりました。ありがとうございました。