nicht angemeldet
Browserweiche via CSS mit @media
Servus!
Ich möchte folgendes machen:
Für NN 4.75 oder kleiner ein Formatierung für Seite, für IE 5.5 oder größer eine Formatierung und nach Möglichkeit noch eine für den Mac.
Ich dachte ich mache es über JavaScript, was ja aber eigentlich nicht gut ist. Denn wenn jemand JS deaktiviert hat, hat das ja Einfluss auf das CSS - also eher schlecht so eine Browserweiche zu machen.
Deshalb habe ich hier mal nachgelesen und bin über das @media gestolpert. Im Beispiel geht es ja einwandfrei, ich habe glaube ich bloss einen anderen Verständnisfehler.
Wenn ich es wie folgt mache
<style type="text/css">
<!--
body { background-color: black;
@media all
{
body { background-color: red; }
}
-->
</style>
sollte doch beim NN 4.75 der Hintergrund schwarz sein und beim IE 5.5 rot. Richtig? Macht er aber nicht. Wo finde ich denn eine Übersicht welcher Browser das @media versteht und welcher nicht? Liegt es daran das der IE5.5 das auch noch nicht kann oder was mache ich falsch?
Grüße,
mic
-
Hallo,
u.U. eine fehlende Klammer?
Egal, probier doch einfach * für bzw. zum verstecken vor Netscape 4
body { background-color: black;}
* body { background-color: red; }
Grüsse
Cyx23
-
Hi,
u.U. eine fehlende Klammer?
Nein, das kanns nicht sein. Da habe ich beim tippen die eine vergessen. In meinem Script ist sie drinn - mein Fehler, sorry.
Egal, probier doch einfach * für bzw. zum verstecken vor Netscape 4
Hmm. Ich habe es jetzt so:
<style type="text/css">
<!--
body { background-color: green;}
* body { background-color: red;}
-->
</style>Und nichts tut sich im NN 4.75. Den Cache habe ich mal auf 0 gestellt. Ich glaube solangsam, daß die Installation vom NN 4.75 eine Macke hat. Das obige Beispiel sollte doch ohne Probleme beim NN 4.75 gehen, oder?
mic
-
hi,
* body { background-color: red;}
Das obige Beispiel sollte doch ohne Probleme beim NN 4.75 gehen, oder?netscape 4 reagiert zuweilen sehr allergisch auf spaces zwischen eigenschaft und wertzuweisung.
probiere also mal
* body { background-color:red; }gruss,
wahsaga-
Hallo,
Das obige Beispiel sollte doch ohne Probleme beim NN 4.75 gehen, oder?
netscape 4 reagiert zuweilen sehr allergisch auf spaces zwischen eigenschaft und wertzuweisung.Das ist ein bisher unbewiesenes Maerchen.
MfG, Thomas
-
Servus,
netscape 4 reagiert zuweilen sehr allergisch auf spaces zwischen eigenschaft und wertzuweisung.
Das ist ein bisher unbewiesenes Maerchen.
Hmm, das habe ich jedoch auch schon live beobachten können. Ist zwar schon eine Weile her aber es schien daher zu kommen.
Bei meinem aktuellen problem hilft es mir aber leider nicht weiter. Hat denn niemand von euch den 4.75 drauf und kann das schnell testen? Ich komme hier leider gerade nicht an einen Webspace, sonst hätte ich es schnell online gestellt...Wie könnte ich denn sonst die Browserunterscheidung mit CSS angehen?
mic
-
Hallo,
Hmm, das habe ich jedoch auch schon live beobachten können. Ist zwar schon eine Weile her aber es schien daher zu kommen.
Ich wuerde es zu gern mal live betrachten ...
MfG, Thomas
-
Hi,
Bei meinem aktuellen problem hilft es mir aber leider nicht weiter. Hat denn niemand von euch den 4.75 drauf und kann das schnell testen?
Folgenden Code habe ich eben mal getestet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
<style type="text/css">
<!--
body { background-color:black; }
@media all
{
body { background-color:red; }
}
-->
</style>
</head>
<body>
<p>Test</p>
</body>
</html>Ergebnis:
IE6 unter WinXP: Hintergrund ist rot
NN4.78 unter WinXP: Hintergrund ist schwarzViele Grüße
Torsten--
Feed your ears: http://www.siechfreds-welt.de/alchemist.html-
Hallo Torsten,
Folgenden Code habe ich eben mal getestet:
[ ... ]
Ergebnis:
IE6 unter WinXP: Hintergrund ist rot
NN4.78 unter WinXP: Hintergrund ist schwarzich kenne keinen 4.x der sich da anders verhält, nun soll es aber ja gerade der von dir auch nicht geteste 4.75 sein, immerhin kann mic den Code mal mit seinem 4.75 komplett testen.
Aber weil du hier, natürlich erstmal richtig und dazu passend zur Ausgangsfrage, @media all verwendet hast, möchte ich nochmals grundsätzlich auf *, also hier * body, als Netscape 4 -Weiche hinweisen, weil es für den Zweck einfacher und hinsichtlich IE 4 eindeutiger ist.
Grüsse
Cyx23
-
Hi Cyx23,
der Vollständigkeit halber:
[...] möchte ich nochmals grundsätzlich auf *, also hier * body, als Netscape 4 -Weiche hinweisen, weil es für den Zweck einfacher und hinsichtlich IE 4 eindeutiger ist.
[...]
<style type="text/css">
<!--
body { background-color:black; }
* body { background-color:red; }
-->
</style>
[...]Ergebnis ist das gleiche.
Viele Grüße
Torsten--
Feed your ears: http://www.siechfreds-welt.de/alchemist.html-
Hallo Torsten,
[...]
<style type="text/css">
<!--
body { background-color:black; }
* body { background-color:red; }
-->
</style>
[...]Ergebnis ist das gleiche.
besten Dank!
Grüsse
Cyx23
p.s.:
/*/*//*/
.leftbox{marginright:200}
body{fontsize:.75em}
/* */
-
-
-
Hi,
Habe den Code von Siechfried auch eben mal getestet:
Ergebnis mit Windos 98 SE:
IE 5.5: Hintergrund ist rot
Mozilla 1.1. Hintergrund ist rot
NN 4.75: Hintergrund ist schwarzUnd dasselbe Ergebnis mit
body {background-color: black;}
* body {background-color: red;}Gruesse,
erikaHauptsache dem Hund geht's gut
-
-
-
-
-
Hallo,
<style type="text/css">
<!--
body { background-color: green;}
* body { background-color: red;}
-->
</style>Und nichts tut sich im NN 4.75. Den Cache habe ich mal auf 0 gestellt. Ich glaube solangsam, daß die Installation vom NN 4.75 eine Macke hat. Das obige Beispiel sollte doch ohne Probleme beim NN 4.75 gehen, oder?
zumindest sollte es beim NN 4.x schon grün werden, wenn in den Voreinstellungen JavaScript und CSS aktiviert, und ein body vorhanden ist.
Grüsse
Cyx23
-
-
-
Hi,
Deshalb habe ich hier mal nachgelesen und bin über das @media gestolpert.
mich wundert hier, daß du dich so auf @media versteifst.
denn gerade wenn du umfangreiche formatierungen für moderne browser und für den ns4 (und andere saurier) verträgliche formatierungen bereitstellen willst, werden style-angaben in der html-datei doch schnell unübersichtlich. wieso nicht komplett alles auslagern?<link rel="stylesheet" type="text/css" href="normal.css" />
<style type="text/css">@import url(modern.css);</style>versteckt zumindest für ns4.x alle angaben unter modern.css.
beim mac ie habe ich z.b. in der modern.css mit dem kleinen hack
#IdName/* */ { position:fixed; top:0px; ...}
die position:fixed angabe verstecken können.freundliche Grüße
Ingo-
Hallo Ingo,
versteckt zumindest für ns4.x alle angaben unter modern.css.
das wird zwar oft, und natürlich auch von etwas militanteren Netscape4-Hassern, so empfohlen, ist aber häufig m.E. nicht sinnvoll.
Denn für den noch häufig genutzten Netscape 4 reichen bei üblichen, auch dem IE5 zugänglichen Seiten, oft wenige Korrekturen für ein stimmiges, ähnliches Layout.
Das kann dann übersichtlicher per * erfolgen, und ggf. ergänzt werden.Z.B.:
img {float:left;}
* img {margin:10px}falls NN4 mit dem float (für img, sonst kann man float etwa bei divs sehr schön für Netscape 4 einsetzen) alleine klarkommt, wird das hier in der Kombination beim Image problematische margin vor ihm versteckt.
Und so kann, wegen der Auskommentierung valide, für NN4 auch in Netscapesyntax im gleichen Stylesheet ergänzt werden:
/*/*//*/
#content{marginright:200}
body{fontsize:.75em}
/* */Grüsse
Cyx23
-
Hi,
Denn für den noch häufig genutzten Netscape 4 reichen bei üblichen, auch dem IE5 zugänglichen Seiten, oft wenige Korrekturen für ein stimmiges, ähnliches Layout.
Das kann ich zumindest bei meinen Seiten überhaupt nicht sagen. Mag sein, daß der NS4 bei Tabellenlayouts mit etwas CSS-Formatierung oder bei absolut positionierten Seiten geringere Probleme macht. Ich bin jedenfalls dazu übergegangen, dem NS4 lediglich die Grundformatierungen zu geben und inkauf zu nehmen, daß die Seite von ihm zwar völlig zerpflückt wird, aber dennoch lesbar und voll zugänglich ist. Dazu kommt dann ein entsprechender Hinweis für den NS4 und die Browser, die @import oder display:none nicht unterstützen.
Dies mache ich bewußt und nicht zuletzt auch deshalb, um dazu beizutragen, daß die Nutzer dieser veralteten Browser zum Wechsel motiviert werden. Nur mal am Rande: Meine Mutter (über 70) kam mit ihrem NS4.x gut zurecht und wollte nichts anderes - bis eine Ihrer Favoriten, der Stern, auf CSS umstellte - zunächst noch ohne Rücksicht auf Uralt-Browser. (Ok, jetzt hat sie leider das Problem, daß es für ihren alten Mac mit OS9 wohl keinen wirklich guten und absturzsicheren Browser gibt...)freundliche Grüße
Ingo-
Hallo,
Denn für den noch häufig genutzten Netscape 4 reichen bei üblichen, auch dem IE5 zugänglichen Seiten, oft wenige Korrekturen für ein stimmiges, ähnliches Layout.
Das kann ich zumindest bei meinen Seiten überhaupt nicht sagen.
ich habe daraufhin http://www.1ngo.de/web/ extra angeschaut.
Mit zwei, drei Anweisungen steht das Layout für Netscape 4.
Ingesamt sind 75 Zeichen in deiner 1goxtra.css nötig, dann ist es sogar W3C valide inkl. Browserweiche.
Nahezu pixelgenau usw. muss es laut deiner Seite ja nicht sein, sonst kommen noch ein paar Zeilen dazu.
Also nochmals:
für den noch häufig genutzten Netscape 4 reichen ... wenige Korrekturen für ein stimmiges, ähnliches Layout.
Grusse
Cyx23
-
Hi,
ich habe daraufhin http://www.1ngo.de/web/ extra angeschaut.
Mit zwei, drei Anweisungen steht das Layout für Netscape 4.
Ingesamt sind 75 Zeichen in deiner 1goxtra.css nötig, dann ist es sogar W3C valide inkl. Browserweiche.danke, daß Du Dir mal die Mühe gemacht hast, hier reinzusehen. Mich würde dabei aber schon interessieren, was an diesem CSS nicht valide sein sollte (ich bekomme nur 3 Warnungen wegen Vorder-/Hintergrundfarben, die aber an anderer Stelle definiert sind).
Grundsätzlich hast Du bei diesen (meinen eigenen) Seiten recht, diese könnte ich (zumindest jetzt noch) ohne allzu viel Aufwand für den ns4 anpassen. Mit
Das kann ich zumindest bei meinen Seiten überhaupt nicht sagen.
meinte ich allerdings weniger diese Seiten (sorry, daß ich mich da nicht ganz deutlich ausgedrückt habe), sondern eher solche:
http://www.e-k-i-r.de/gerresheim/senioren/sen-1.htm oder
http://www.td-rot-weiss-duesseldorf.de/news/news030714.html ,
da würde eine Umsetzung schon deutlich schwieriger bis unmöglich sein, oder?freundliche Grüße
Ingo-
Hallo,
ich habe daraufhin http://www.1ngo.de/web/ extra angeschaut.
Mit zwei, drei Anweisungen steht das Layout für Netscape 4.
Ingesamt sind 75 Zeichen in deiner 1goxtra.css nötig, dann ist es sogar W3C valide inkl. Browserweiche.danke, daß Du Dir mal die Mühe gemacht hast, hier reinzusehen. Mich würde dabei aber schon interessieren, was an diesem CSS nicht valide sein sollte (ich bekomme nur 3 Warnungen wegen Vorder-/Hintergrundfarben, die aber an anderer Stelle definiert sind).
_es_ meint die Anpassung, wenn die Korrektur für Netscape 4 noch kürzer ausfallen sollte als die erwähnten 75 Zeichen, dann gäbe es funktionierende, aber nicht ganz konforme Möglichkeiten.
Ansonsten ist hier schon das für Netscape 4 vmtl. anspruchsvollste Problem, float und margin auf img gleichzeitig anzuwenden, zu sehen.
Grundsätzlich hast Du bei diesen (meinen eigenen) Seiten recht, diese könnte ich (zumindest jetzt noch) ohne allzu viel Aufwand für den ns4 anpassen. Mit
Eben. Und so schaut es bei den meisten Seiten aus die Netscape 4 angeblich nicht zu vermitteln sein sollen, bis hin zu Beispielseiten beim W3C mit tableless layout, die Netscape 4 eigentlich, allerdings braucht er da ein klein wenig zusätzlichen Code, auch ordentlich zeigen kann.
Das kann ich zumindest bei meinen Seiten überhaupt nicht sagen.
Die sind m.E. nach erstem Blick auf den Code eigentlich auch nicht unbedingt anspruchsvoller, sondern eher unübersichtlicher. Da du ja mit Zitat: '<div class="clear"></div>' schon beim float offenbar sowieso nachhilfst, wäre es womöglich sogar recht einfach.
Grüsse
Cyx23
-
-
-
-
-