nicht angemeldet
(CSS/JAVASCRIPT) Lösung: Auflösungsabhängig Stylesheet ändern
Hi zusammen,
vor einiger Zeit postete ich eine Frage zu folgendem Problem: wie bewerkstellige ich es, dass unter bestimmten Voraussetzungen (hier: ab einer gewissen Browserauflösung) das Stylesheet verändert wird (hier:die Textbreite beschränkt wird)? (http://www.teamone.de/selfhtml/sfarchiv/2000_3/t19651.htm)
Mit Hilfe von Carsten fand ich die Lösung, die ich Euch nicht vorenthalten möchte.
Das Prinzip: es wird standardmäßig ein externes Stylesheet referenziert. Bei entsprechend großer Auflösung wird außerdem ein zweites Stylesheet referenziert, das die Anweisungen des ersten Stylesheets ergänzt. Der Vorteil: auch ohne JavaScript wird zumindest das Standard-Stylesheet verwendet - bei einer kompletten JS-Lösung wie in http://www.teamone.de/selfaktuell/artikel/dyncss.htm wäre kein Stylesheet sichtbar, wenn JS deaktiviert ist (ich weiß, NS kann keine Stylesheets, wenn JS deaktiviert ist). Der Vorteil gegenüber einer <script> und <noscript>-Lösung ist, dass die hier gepostete Lösung prinzipiell HTML 4.01-validierbar ist (HTML 4.01 lässt keine <noscript>-Bereiche innerhalb des <head> zu); außerdem stürzt NS 4.0x zumindest unter NT ab, wenn JS deaktiviert, Formatvorlagen aber noch aktiviert sind und man ihm so in eine <noscript>-Referenz eines Stylesheets schickt.
So sieht die Lösung aus:
<html>
<head>
<title>bla</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<script type="text/javascript">
<!--
function writecss()
{
document.write('<link rel="stylesheet" type="text/css" href="/formate2.css">');
}
//-->
</script>
<script type="text/javascript">
<!--
if (window.innerWidth)
{
if(window.innerWidth > 800)
{
writecss();
}
else {}
}
else
{}
//-->
</script>
</head>
<body>>
<script type="text/javascript">
<!--
if (document.body.offsetWidth)
{
if(document.body.offsetWidth > 800)
{
writecss();
}
else {}
}
else
{}
//-->
</script>
...weitere Angaben...
</body>
</html>
Erklärung: es wird in herkömmlichem HTML eine externe CSS-Datei referenziert (formate.css). Darunter wird eine Funktion writecss() definiert, die eine zweite CSS-Datei refenziert. Darunter fragt ein Script im Falle der Existenz von window.innerWidth (also NS 4) die Fensterbreite ab; über 800 Pixel wird writecss() aufgerufen, also das zweite Stylesheet referenziert.
Innerhalb des Body fragt ein weiteres Skript im Falle der Existenz von document.body.offsetWidth (also IE >= 4) die Fensterbreite ab (muss im Body stehen, da die Eigenschaft des body-Elementes vorher noch nicht da ist); auch hier wird über 800 Pixel writecss() aufgerufen und das zweite Stylesheet referenziert.
Zu erwähnen noch: das zweite Stylesheet darf Angaben des ersten nicht überschreiben, sondern nur zusätzliche machen. Ansonsten stürzt NS gern ab. Danke nochmal an Carsten für diese Info!
Wer das Ganze live betrachten will: http://www.mandoline.de/neapel/gesch.htm (Testversion - die meisten Links funzen nicht). Bei Fenstergrößen bis 800 Pixel (bzw. bei Netscape 800 + ein paar Pixeln) ist der Mengentext schwarz und halt so breit wie das Fenster es hergibt. Bei Größen darüber ist er rot, auf 600 Pixel beschränkt und außerdem 200 Pixel vom linken Rand entfernt.
Beim Vergrößern/Verkleinern des Browserfensters müsst Ihr einen Reload machen, um Änderungen zu sehen - für den praktischen Einsatz muss die Sache mit einer Resize-Abfrage wie in http://www.teamone.de/selfhtml/sfausles/tsfa_tcc.htm#a2 kombiniert werden.
Getestet wurde das Ganze bisher mit NS 4.6 und IE 5 auf NT 4.0 - über Rückmeldungen auf Verhalten mit anderen Kombis würde ich mich freuen.
Und noch was: versucht nicht, die IE-Größenabfrage in eine Funktion des Head zu nehmen und die Abfrage über <body onLoad> zu machen - es ergibt sich bei mir in diesem Fall immer eine Endlosschleife ohne sichtbares Ergebnis.
Prinzipiell ist diese Lösung übrigens für alles mögliche zu verwenden - z.B. auch für CSS-Einbindungen, die Betriebssystemabhängig sind. Da kommt's dann nur auf die richtige if-Abfrage an...
Grüße,
Utz
-
hallo Utz!
Ich sage nur: Genial! Hut ab Dir und Carsten!
Beim Vergrößern/Verkleinern des Browserfensters müsst Ihr einen Reload machen, um Änderungen zu sehen -
Nicht immer. Bei Netscape (4.51) verhält es sich so, dass beim Verbreitern die Änderung automatisch geschieht, beim Verkleinern auf unter 800 ist allerdings ein Reload notwendig.
Ich hoffe, das Auslese-Team liest aufmerksam mit ;-)
Bis danndann
PAF (patrickausfrankfurt)<img src="/selfaktuell/extras/selfcomm.jpg" alt=""> http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view
<img src="http://www.atomic-eggs.com/selfspezial/atomicegg.gif" alt="Atomic Eggs - die humosophische Seite" style="cursor:hand;" onClick="window.location.href='http://www.atomic-eggs.com/'" onmouseover="status='http://www.atomic-eggs.com/';return true;" onmouseout="status='';return true;">
-
Hi PAF,
Ich sage nur: Genial! Hut ab Dir und Carsten!
Danke für die Blumen *rotwerd*
Beim Vergrößern/Verkleinern des Browserfensters müsst Ihr einen Reload machen, um Änderungen zu sehen -
Nicht immer. Bei Netscape (4.51) verhält es sich so, dass beim Verbreitern die Änderung automatisch geschieht, beim Verkleinern auf unter 800 ist allerdings ein Reload notwendig.
NS 4.6 verhält sich bei mir ähnlich - ich kann mir das nur so erklären, dass Netscape beim Versuch, den Resize-Bug in den Griff zu bekommen, möglicherweise eine Art onResize-Reload aus dem Arbeitsspeicher (o.s.ä.) reinimplementiert hat - denn in dem Code ist nichts, was dieses Verhalten verursachen würde.
Grüße,
Utz
-
Moin
Ich hoffe, das Auslese-Team liest aufmerksam mit ;-)
Wir tun den ganzen Tag nichts anderes :-) Mehr dazu demnächst in diesem Theater :-)
Viele Grüße
Swen
-