jeder browser eine eigene css datei

FR0SCH

hey leute
ich hab noch ne frage:

Ist es möglich, für jeden Browsertyp eine eigene CSS-Datei zu verfassen, die dann jeweils geladen wird?

ich hoffe irh könnt mir helfen

bye

PS: ich habe nichts mitz der suchfunktion gefunden

Ronald

Moin!

Gegenfrage: wozu soll das gut sein?

Wenn man einen einigermassen W3C-konformen Quelltext baut, dann paßt das in allen Browsern.

Ich habe jedenfalls bei meinen diversen HPs nirgends das Problem, daß ich für verschieden Browser eigene Styles brauche, es sieht in allen Browsern annähernd gleich aus.

G.a.d.M.

Ronald

FR0SCH

antwort auf die gegenfrage:
ich brauche das damit mein menü( das mit css geschrieben ist) bei jedem browser an der selben stelle ist

mb bye

Ronald

Dass du ein Menü komplett mit CSS geschrieben hast ist eigentlich unmöglich.
Ich vermute einmal, daß du es mit Stylesheets formatiert hast und wenn man das richtig macht, dann paßt es bei allen Browsern.
Man muß im Zweifel nur konsequent alles mit CSS formatieren und nicht nur einen Teil der Seite.

G.a.d.M.

Ronald

FR0SCH

stimmt
aber ich habe ein tabelle mit css so eingerichtet, dass diese tabelle, wenn man auf den dazugehörigen menüpunkt klickt, neben dem menüpunkt erscheint!
gibt es da noch eine andere möglichkeit das einzurichten?

hoffe auf hilfe

bye

GreenRover

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var detect = navigator.userAgent.toLowerCase();
var OS,browser,total,thestring;
var version = 0;


if (checkIt('konqueror'))
{
	browser = "Konqueror";
	OS = "Linux";
}
else if (checkIt('safari'))  browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera'))   browser = "Opera"
else if (checkIt('webtv'))   browser = "WebTV";
else if (checkIt('icab'))    browser = "iCab"
else if (checkIt('msie'))    browser = "Internet Explorer"
else if (!checkIt('compatible'))
{
	browser = "Netscape Navigator"
	version = detect.charAt(8);
}
else browser = "An unknown browser";


if (!version) version = detect.charAt(place + thestring.length);


if (!OS)
{
	if (checkIt('linux')) OS = "Linux";
	else if (checkIt('x11')) OS = "Unix";
	else if (checkIt('mac')) OS = "Mac"
	else if (checkIt('win')) OS = "Windows"
	else OS = "an unknown operating system";
}


function checkIt(string)
{
	place = detect.indexOf(string) + 1;
	thestring = string;
	return place;
}


// -->


switch (browser)
 {
  case 'Internet Explorer':   document.write('<link href="IE.css" rel="stylesheet" type="text/css" />'); break;
  case 'Netscape Navigator':  document.write('<link href="NE.css" rel="stylesheet" type="text/css" />'); break;
  case 'Opera':               document.write('<link href="OP.css" rel="stylesheet" type="text/css" />'); break;
  default: 					document.write('<link href="default.css" rel="stylesheet" type="text/css" />'); 
 }


</SCRIPT>
</head>


<body>


<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
document.write('<p class="accent">You\'re using ' + browser + ' ' + version + ' on ' + OS + '!</p>');
alert(navigator.userAgent);
alert(navigator.appName);
alert(navigator.appVersion);
// -->
</SCRIPT>


</body>
</html>

Alles anzeigen

stefan999

Zitat von GreenRover

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var detect = navigator.userAgent.toLowerCase();
var OS,browser,total,thestring;
var version = 0;


if (checkIt('konqueror'))
{
	browser = "Konqueror";
	OS = "Linux";
}
else if (checkIt('safari'))  browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera'))   browser = "Opera"
else if (checkIt('webtv'))   browser = "WebTV";
else if (checkIt('icab'))    browser = "iCab"
else if (checkIt('msie'))    browser = "Internet Explorer"
else if (!checkIt('compatible'))
{
	browser = "Netscape Navigator"
	version = detect.charAt(8);
}
else browser = "An unknown browser";


if (!version) version = detect.charAt(place + thestring.length);


if (!OS)
{
	if (checkIt('linux')) OS = "Linux";
	else if (checkIt('x11')) OS = "Unix";
	else if (checkIt('mac')) OS = "Mac"
	else if (checkIt('win')) OS = "Windows"
	else OS = "an unknown operating system";
}


function checkIt(string)
{
	place = detect.indexOf(string) + 1;
	thestring = string;
	return place;
}


// -->


switch (browser)
 {
  case 'Internet Explorer':   document.write('<link href="IE.css" rel="stylesheet" type="text/css" />'); break;
  case 'Netscape Navigator':  document.write('<link href="NE.css" rel="stylesheet" type="text/css" />'); break;
  case 'Opera':               document.write('<link href="OP.css" rel="stylesheet" type="text/css" />'); break;
  default: 					document.write('<link href="default.css" rel="stylesheet" type="text/css" />'); 
 }


</SCRIPT>
</head>


<body>


<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
document.write('<p class="accent">You\'re using ' + browser + ' ' + version + ' on ' + OS + '!</p>');
alert(navigator.userAgent);
alert(navigator.appName);
alert(navigator.appVersion);
// -->
</SCRIPT>


</body>
</html>

Alles anzeigen

In dem Code sind einige Fehler drin. Insbesondere die Abfrage nach dem OS ist fehlerhaft, wird aber für die CSS-Auswahl auch nicht benötigt. Endscheideni ist folgender Fehler:

Während Mozilla-Browser völlig ignoriert werden, wird bei Netscape nicht nach Versionen unterschieden. Aner die CSS-Unterstützung unterscheidet sich zwischen NN4 und NN7 doch erheblich.

Hier mal eine verbesserte Version des Codes:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<link rel="stylesheet" type="text/css" href="minimal.css">




<script type="text/javascript">
if (document.layers)
{
  document.write '<link rel="stylesheet" type="text/css" href="nn4.css">';
}
</script>




<style type="text/css">
@media screen {
@import url("modern.css");
}
</style>




<!--[if ie 4]>
<link rel="stylesheet" type="text/css" href="ie4.css">
<![endif]-->


<!--[if gte ie 5]>
<link rel="stylesheet" type="text/css" href="ie5.css">
<![endif]-->
</head>
<body>.......</body></html>

Alles anzeigen

Man beachte, dass alle CSS-fähigen Browser "minimal.css" laden. NN4 lädt zusätzlich noch "nn4.css".

Der IE lädt dann drei Stylesheety, in "ie4.css" bzw. "ie5.css" muss alles überschrieben werden, was in "modern.css" definiert, aber inkompatibel zum Ie ist, z.B. Korrektur des Box-Model-Bugs.

Tags