こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

safari,firefoxでスタイルシートを使いたい。

safari,firefoxでスタイルシートを使いたい。

お世話になっております。
link要素で、以下のような感じで、
ブラウザごとにスタイルシートを使い分けたいのですが、
どうもsafariとfirefoxは、link要素は認識してくれないようです。(opera、chromeは未確認)
(私の勘違い?)

safariとfirefoxは、スタイルシートのファイルを指定するのは、
どのようにするのでしょうか。
ご存知の方、ご教授ください。よろしくお願いします。

↓-----------------------
(OSの判定は省略)
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'>");
↑-----------------------

投稿日時 - 2010-09-10 11:01:01

QNo.6171787

すぐに回答ほしいです

質問者が選んだベストアンサー

補足ありがとうございます。
残念ながらcssに大いに問題アリです。

cssセレクタの名前は「アルファベットで始まり、アルファベット、数字、ハイフン/アンダースコア(およびUnicodeの一部)のみで構成される、ただし最初の文字には"数字/ハイフンは使えない"」となっております。

つまり数字から始まっているためセレクタとしてきちんと認識されていなかったということですね。

むしろこれで動いたブラウザがあることが驚きです。
わたしの環境ではどのブラウザでもこのクラスが適用されることはありませんでした。

ちなみにこれは定義はプログラムの変数とかの名前も同じです。
cssではあまり意識しないかもしれませんが、プログラムの場合最初を数字にしてしまうと、
整数リテラルとして認識してしまうので、使えません。
ハイフンではじめた場合は減算の代数演算子として扱われてしまいます。

cssの中で演算をすることはできませんが、数字やマイナスの数値を扱いますし、
多分、同じような内部的な事情でこのような制約がcssにもあるのでしょう。


ということで、セレクタ名を規則通りに変更すれば解決ですね。

投稿日時 - 2010-09-14 13:53:44

お礼

>ただし最初の文字には"数字/ハイフンは使えない
ご指摘の通りでした。
残るは、cssファイルの中身だけだと思ってましたが、基本的な文法ルールの問題ですね。
アルファベットに変えて、無事解消しました。
しかしながら、cssセレクタの先頭文字が数字であっても、IEでは動くのですね。

しかしながら、最初から、cssファイルの中身を質問欄に記述しておけば、imaimasan様のお手をここまで煩わすことはなかったですのに。
さらに、わたくしの無知により、本当にお手数をおかけしました。
(ちなみに、言い訳にもなりませんが、この「cssセレクタの名前」は、どこからコピペしたものでした。)

このたびは勉強になりました。ありがとうございました。

投稿日時 - 2010-09-14 14:27:07

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(7)

おっと。。。マックでしたか。。当方では残念ながら再現できませんね;

document.writeで出力して分ける方法は広く出回っているので、大丈夫だと思いますし、
なおかつ、きちっと判別自体はできているわけですし。。。
もしかしたら灯台下暗しというか、思わぬところでつまづいているのかもしれませんね。(環境かcss?)

お力になれず申し訳ないです。

投稿日時 - 2010-09-13 20:07:33

お礼

ご多忙中の所、度々のご回答ありがとうございます。

ちなみに、今回のcssファイルの中身は、それぞれ、以下の通りです。


↓winIE.css=======================
 :
.14px {
font-family: "MS Pゴシック", "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: "MS Pゴシック", "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==========


問題ないと思うのですが・・・。

投稿日時 - 2010-09-14 10:32:46

うへ、DOCTYPE宣言のとこ切れちゃってますね。
無くても良いので消しといてください。。

投稿日時 - 2010-09-10 17:26:47

ありゃ、こちらこそ早とちり失礼しました。

文法は同じですね。まれに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;
}

きちっと判定ができてて無理というのは謎ですね。

投稿日時 - 2010-09-10 17:22:22

補足

度々、ご丁寧なご回答ありがとうございます。

誠に恐縮ですが、また、当方の記載漏れになってしまいますが、
わたくしの方で確認したsafariとfirefoxのosは、winではなく、macです。
これって、重要な情報だったでしょうか。
macでもcssは認識できますよね。

投稿日時 - 2010-09-13 06:49:37

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に振り分けられます。
まぁ、レタリングエンジンが殆ど同じなので意識する必要はあまりなとおもいますし、
めんどくさいので直しません。。

投稿日時 - 2010-09-10 16:10:41

補足

>こんな関数はwindowオブジェクトにはないです。
大変失礼しました。
質問欄への記入漏れです。
自作関数の部分は、ソースにはちゃんと書いております。
変数「browser」の中身も、ちゃんとブラウザによって、値が異なるのを確認済みです。
わたくしの説明不足でした。

なお、未だに、cssが認識しない件は未解決です。
ブラウザが変われば、cssファイルの文法が変わるのでしょうか。(そんなことないですよね。)
いずれにせよ、引き続き調査中です。

投稿日時 - 2010-09-10 16:26:03

ANo.2

「テストしたの」意味違い(タイポ)

「テストしたの」=>「テスト↓」で私がテストしたという
意味でした。

投稿日時 - 2010-09-10 14:42:14

ANo.1

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;}

投稿日時 - 2010-09-10 11:57:32

補足

>テストしたの
当然ですよ。
ieでmacNsc.cssを指定して、認識するのを確認の上での質問ね。

投稿日時 - 2010-09-10 12:32:55

あなたにオススメの質問