Web-Design Beispiel zu den Tutorien JavaScript für alle Browser und
CSS für alle Browser,
Netscape 4
Warum im Jahre 2004 oder nochmals nochmals an der richtige Einbindung von Stylesheets für Netscape 4 arbeiten? Folgende Punkte sprechen dafür: Netscape 4 ist immer noch etwas verbeitet, eine Styleanpassung ist oft recht einfach möglich. Die Anforderungen an HTML und CSS haben sich seit dem Ausgangstext von 2002 etwas verändert, zu verschiedenen Methoden liegen mittlerweile weitere Erfahrungen vor.
Wie in "CSS für alle Browser" teilweise ausgeführt liegt der Vorteil von JSS weniger darin dass Netscape intern mit dem Format arbeitet, also ein Übersetzungschritt entfällt, sondern in den umfangreichen Möglichkeiten ein geladenes Stylesheet nach seinen Daten abzufragen und anhand dieser Information z.B. position:right automatisch anzupassen. Ein JSS muss also im Idealfall bei Änderungen im CSS nicht nochmal bearbeitet werden.
1 2 3 4 5 6 7 8 9 10 11 12
<style type='text/javascript'>
/* Kristof Lipfert Duesseldorf (c) 2001 -2002 */
function header(hx, kx, kt){
with(tags[hx]){
if(borderColor&&width){
if(!fontSize){
fontSize = kx;
Der Beispielcode prüft ob zu einem Tag im vorher geladenen normalen Style borderColor und width angegeben wurden und wählt im weiteren Verlauf automatisch eine passende Strategie zu Korrektur der Schriftgrösse, die ja u.U. bei bestimmten Stylekombinationen z.B. bei Überschriften besonders angepaßt werden muß.
In der Praxis sind aber auch Nachteile bei JSS möglich, z.B. bei nachfolgenden unsauberen Stylanweisungen, weil der Browser gewissermaßen in einen JSS-Modus umgeschaltet hat und ggf. dort bleibt. Ausserdem wird der Vorteil des einen vom Netscape 4 auch gelesenen CSS geringer wenn umfangreiche Anpassungen oder Filter nötig sind. Eine generelle Empfehlung für JSS ist daher unangebracht, auch wenn bei richtiger Anwendung beste Ergebnisse und hoher Wartungskomfort möglich sind.
Vor allem wegen der besseren Übersichlichkeit empfehle ich eigentlich die Verwendung eines Stylesheets mit CSS-Weichen. Bei zunehmenden Möglichkeiten von CSS 3, komplexeren oder umfangreichen Styles aber hat es auch Vorteile für Netscape 4 ein separates Stylesheet zu verwenden, zumal oft sowieso ein reduzierter Leistungsumfang für Netscape 4 reicht oder aus Sorge um die Stabilität ein möglichst einfaches CSS verwandt werden soll.
Die eigentlich schöne Lösung per if(document.ids)document.write('<link src= empfehle ich nicht, da möglicherweise beim ersten Seitenaufbau die Styledatei noch nicht geladen wird, besonders wenn nur eine CSS-Datei eingebunden wird scheint diese Gefahr zu bestehen.
1 2 3 4 5 6 7
/* Kristof Lipfert Duesseldorf (c) 2001 -2004 */
if(document.layers){
document.write("<link type='text/css' rel='stylesheet'"+
So ist es schon sicherer: if(document.ids)document.write('<style>.. Nachteilig hier das alle Browser den Code erstmal laden.
1 2 3 4 5 6 7 8 9
/* Kristof Lipfert Duesseldorf (c) 2001 -2004 */
if(document.layers){
document.write("<style> body {"+
"background-color:white; color:black;"+
Der schöne Effekt JSS als Browserweiche zu benutzten läßt sich nicht für normales Styledateien anwenden, bestenfalls JavaScripte welche erst nach onload ausgeführt werden sind abgesehen von JSS selbst mit dieser Methode einsetzbar. Zugleich läßt sich eine JSSS-Deklaration noch als Weiche für Opera zweckentfremden, was aber hier nicht weiter ausgeführt wird. Bei der Suche nach Einbindungsmöglichkeiten für Netscape 4 wollte ich aus den zuvor genannten Gründen aber sowieso noch Alternativen zu JSS suchen.
1 2 3 4 5
<link rel="stylesheet" type="text/javascript"
href="./scripte/demo4.jss">
Per Entitäten kann sehr schön nur für Netscape 4 eingebunden werden. Eigentlich eine Empfehlung, allerdings könnten einige Browser doch die Existenz der Datei abfragen und Fehlermeldungen beim Server verursachen. Validität nach W3C ist möglich mit der Warnung character "&" is the first character of a delimiter but occurred as data
1 2 3 4 5 6 7
<-- Kristof Lipfert Duesseldorf (c) 2001,2002 -->
<link href="nn-b.css" rel="&{'stylesheet'};"
type="&{'text/css'};" media="&{'screen'};" />
Die Einbindung von JSS, damit sind Mozilla und IE schonmal vom Code ausgeschlossen und verursachen keien Traffic, läßt Operas noch an den Code. Der Einsatz der Entität kann auch Opera ausschliessen und validiert als XHTML, wenn auch mit Warnung:
1 2 3 4 5 6 7
<-- Kristof Lipfert Duesseldorf (c) 2002 -->
<link href="nn-b.jss" rel="&{'stylesheet'};"
type="text/javascript" media="screen" />
Leider erzeugt diese Vorgehensweise einen Eintrag in der Site Navigation Bar des Mozilla &{'stylesheet'}; und ist daher in dieser Form nicht empfehlenswert. Die ganz normale Ausführung als JSS-Einbindung verursacht keine Fehler, der geringe zusätzliche Traffic von Besuchern mit Opera ist zumindest solange in Kauf zu nehmen wie Opera Software bei neuen Produkten das Browserverhalten nicht korrigiert.
Hier ist die Möglichkeit den Useragent abzufragen eigentlich zu unsicher, doch manche andere Lösungen können so ergänzt werden um den Traffic etwas zu reduzieren.
1 2 3 4 5 6 7
/* Kristof Lipfert */
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} ^Mozilla/4.*
RewriteRule ^yxz\.html$ xyz.NC4.html
Diese Methode hatte ich schon 1999 entwickelt und bislang wegen einiger Einschränkungen nicht angewandt. Nun ist es mit abnehmender Verbreitung des Netscape 4 immer interessanter bei der Einbindungen anderen Browsern die Sonderlösungen komplett vorzuenthalten um unnötige Dateianforderungen und Traffic zu vermeiden.
Die Einbindung erfolgt per Styleanweisung. Dabei ist zu beachten dass eine Einbindung einer CSS-Datei oder als CSS in einen Styleblock scheitert. Der Vorgang ist der Funktion load() vergleichbar, der Code einer HTML-Datei wird unmittlebar eingebunden, das Problem der Verarbeitungebenen wie beim erst per write() und JavaScript erzeugtem Verweis auf eine externe datei besteht also wahrscheinlich nicht.
1 2 3 4 5 6 7
<!-- 2001 Kristof Lipfert Duesseldorf -->
<style type="text/css"
style="include-source:url('css.htm')"></style>
Interessanterweise sind beim Link-Tag im Head Style-Attribute valide. Somit kann jetzt ein Link-Tag als Weiche Netscape 4 und andere Browser differenzieren.
Duchr eine Weiche per media-Attribut wird Netscape 4 zunächst vom externen Style ferngehalten. Damit ist eine klare Trennung der Styles gegeben, und Netscape hat weniger Probleme bei der HTML-Struktur nach der Einbindung.
Hier verwende ich ein media-Attribut screen, und zwar doppelt. Netscape 4 wird ferngehalten, das Medium screen bleibt für moderne Browser beim Link-Tag verwendbar.
1 2 3 4 5 6 7
/* Kristof Lipfert Duesseldorf (c) 2001 */
<link href="main.css" rel="stylesheet"
type="text/css" media="screen,screen" />
Die Style-Einbindung erfolgt über das Styleattribut. Dieser ungewöhnliche Weg hat viel Vorteile, einige Nachteile.
1 2 3 4 5 6 7
<-- Kristof Lipfert Duesseldorf (c) 2001 -2004 --> <link href="main.css" rel="stylesheet" type="text/css" media="screen,screen" style="/*/*//*/includesource:url(nn-css.htm)/* */" />
Die Lösung validiert. Die Lösung funktioniert bei bisherigen Tests zuverlässig. Die Lösung ist sparsam im Code. Für Netscape 4 ergibt sich aber ein erzeugter Layer mit Zeilensprung. Der Layer kann nicht erfolgreich versteckt werden, deswegen habe ich den Body mit position:absolute korrigiert.
Daraus ergeben sich einige Besonderheiten, das Margin wird so etwas angepasst, aber Tabbed-Browsing erschwert, was aber bei layoutorientierten CSS-Lösungen eigentlich immer, etwa durch float, passieren dürfte. Ausserdem werden vorherige und nachfolgende Styles nicht befolgt.
Eine solche Einbindung über eine Styleeigenschaft kann auch beim Body-Tag erfolgen, beim gut geeignetem Style-Tag ist die fehlende Validatät bei ID oder Styleattribut das Problem.
1 2 3 4 5 6 7
/* Kristof Lipfert Duesseldorf (c) 2001 -2004 */
@import url(main.css) screen;
/*/*//*/\{! i{} body{includesource:url(nn-css.htm)} *}{}/* */
9/ 2001 © Copyright Kristof Lipfert Düsseldorf 2002, 2003 Rel. 2004