|
|
|
|
Interpretation von CSS in IE und Netscape/Mozilla
und Praxistutorials
SS ist ein mächtiges Instrument zur Formatierung von HTML Dokumenten, doch was von dem, das man an Style Sheets im Quellcode anlegt, wird vom Browser des Anwenders interpretiert? An dieser Stelle ein weiterer Anlass, auf die doch sehr unvollständige Interpretation der aktuellen CSS Standards durch 4er Generationen des Netscape einzugehen; auch ein Grund warum dieser Browser mittlerweile gegenüber dem moderneren IE arg ins Hintertreffen geraten ist.
Zwar ist auch Netscape inzwischen mit den Versionen 6/7 seines Browsers herausgekommen und auch Mozilla erfreut sich seit den ersten 1.x Releases durchaus wachsender Beliebtheit, jedoch ist wohl zu vermuten, dass diese Browser auf absehbare Zeit weiterhin noch Randerscheinungen bleiben werden. Aber es soll nicht verschwiegen werden, dass die Mozilla-Gemeinde und damit auch Netscape 6 und höher, der auf der Gecko Engine von Mozilla basiert, inzwischen stark aufgeholt hat, ja, den Internet Explorer in einigen speziellen Bereichen in Bezug auf CSS Unterstützung sogar überholt haben.
Ein guter Grund, mal einen Vergleich anzustellen, wie die verschiedenen Browser gängige und verbreitete CSS Anweisungen interpretieren. Herangezogen werden hierbei in erster Linie Beispiele, die sich als Style Sheet Anweisungen bereits im Quellcode der aktuellen Version 5.0 meiner Homepage, dem El Fabi Universe finden.
Es werden ein paar Beispiele aufgeführt und mit Screenshots gezeigt, wie sie im jeweiligen Browser aussehen und wie dein eigener Browser diese CSS Answeisungen interpretiert.
|
II. 3-D Rahmen z.B. für Tabellen
|
|
Einer der Effekte die ich gerne einsetze sind Style Sheet Attribute, die Tabellen oder andere beliebige HTML Objekte mit einem 3D-Rahmen versehen. Der NS4 ignoriert diese Vorgaben leider völlig (ausgenommen bei der Anwendung in einem <DIV>-Tag), die Gecko Engine von Mozilla/Netscape indes generiert eine Tabelle, die derjenigen im IE sehr ähnlich ist.
weitere Rahmeneffekte neben outset sind:
inset
ridge
dotted
dashed
double
groove
Einfach mal rumprobieren. ;)
|
Verwendeter Quellcode:
<TABLE
STYLE="border-width:4px;
border-style:outset;
border-color:#9999cc;
background:
url(../images/textarea.jpg)">
<TR>
<TD>
Beispieltabelle
</td>
</tr>
</table>
|
Beispiele
|
Ansicht im IE ab 4.0
|
Ansicht in Netscape 4.x
|
|
|
|
Ansicht in Mozilla/Netscape ab 6.0
|
Ansicht in deinem Browser
|
|
|
|
III. Individuelle Formatierung von Formular-Buttons
|
|
Wer kennt sie nicht, die "Senden" und "Abbruch" Buttons in Webformularen, immer Grau mit schwarzer Schrift. Mit CSS lassen sie sich individuell an das Gesicht der Seite anpassen. Seit Netscape 6/7 und Mozilla kommt auch die Netscape Gemeinde in diesen Genuß...
|
Verwendeter Quellcode:
<Form>
<INPUT style="
font-weight:bold;
margin:3px;
border-style:solid;
border-width:1px;
border-left-color:#7A7A7C;
border-top-color:#7A7A7C;
border-bottom-color:#242A5A;
border-right-color:#242A5A;
background-image:
url(../images/input.jpg);"
TYPE="reset" NAME="reset"
VALUE="Formularbutton">
</form>
|
Beispiele
|
Ansicht im IE ab 4.0
|
Ansicht in Netscape 4.x
|
|
|
|
Ansicht in Mozilla/Netscape ab 6.0
|
Ansicht in deinem Browser
|
|
|
|
IV. Individuelle Formatierung von Texteingabefeldern
|
|
Selbige sind wir eigentlich als weiße Felder gewohnt, bei Textarea-Feldern auch meistens noch mit einer Antiproportinalschrift. Muß aber nicht sein und paßt mitunter auch zu einer in Schwarz gehaltenen Seite nicht so gut.
Wie wär's statt dessen mit einem gediegenen Hellblau als Hintergrund, Gelb als Rahmen und Comic Sans als Schriftart...!? ;)
|
Verwendeter Quellcode:
<form>
<TEXTAREA STYLE="
font-family:comic sans ms;
margin:3px;
border-style:outset;
border-width:3px;
border-color:#ffffcc;
background-image:
url(../images/textarea.jpg);
background-repeat:repeat-x;}
WRAP=VIRTUAL
NAME="comment" ROWS="6" COLS="30">
</TEXTAREA>
</form>
|
Beispiele
|
Ansicht im IE ab 4.0
|
Ansicht in Netscape 4.x
|
|
|
|
Ansicht in Mozilla/Netscape ab 6.0
|
Ansicht in deinem Browser
|
|
|
|
V. Individuelle Formatierung von Dropdownmenüs
|
|
Da wir uns ja schon bei Formular-Elementen aufhalten wenden wir uns natürlich auch noch den Select-, oder Dropdownmenüs zu, die ja auch recht beliebt sind. Auch diese müssen, wenn man über einen modernen Browser verfügt, nicht im klassischen Schwarz-Weiß gehalten bleiben. Hier einmal die Darstellung des Dropdownmenüs meiner Page in den verschiedenen Browsern...
|
Verwendeter Quellcode (im HEAD-Bereich)
<STYLE>
.font {
font-size:9pt;
font-family:Arial, sans-serif;
color:#ffffaa;
}
option.qbar {
font-weight:bold;
background-color:#000066;
}
option.rbar {
background-color:#000000;
}
option {
background-color:#333333;
}
</STYLE>
|
Beispiele
|
Ansicht in IE4/5
|
Ansicht in Netscape 4
|
|
|
|
Ansicht in Mozilla 5/ Netscape 6
|
Ansicht in deinem Browser
|
|
Klicke auf den Dropdownbutton.
|
|
VI. Individuelle Einfärbung von Scrolleisten (nur im IE ab 5.5!)
|
|
Tja, seit der Einführung des IE 5.5 bietet Microsofts Browser ein nettes Feature: mit den entsprechenden CSS Angaben im Body {} Bereich läßt sich den Scrolleisten, die in einem Webprojekt auftreten (annähernd) jede beliebige Farbe zuweisen. Mal wieder ein völliger Eigenweg von M$ und in CSS Level 2 nicht vorhanden, jedoch meines Erachtens ein schöner Einfall, wird einem doch hier erstmals die Möglichkeit gegeben, die bisher unabänderlich grauen Scrolleisten wenigstens der Farbgebung der Webseiten anzupassen. Dabei können dann, wenn man's nicht übertreibt recht "harmonische" Scrollbalken herauskommen. Und so geht's:
|
Verwendeter Quellcode
(einsetzen im HEAD-Bereich oder in einem .css File)* :
body {
scrollbar-base-color:#343434;
scrollbar-arrow-color:#E4D459;
scrollbar-face-color:#26275D;
scrollbar-highlight-color:#686C93;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#131732;
scrollbar-track-color:#343434;
}
*) beim Einsetzen im Head-Bereich ist der obige Code natürlich mit den bereits erwähnten Tags <style> ... </style> zu umschließen.
|
Beispiele
|
Ansicht im IE ab 5.5
|
|
|
Da der IE 5.5 und seine Nachfolgeversionen die einzige Browser sind, die farbige Scrolleisten unterstützen (also auch nicht
der IE 5.0x), sind Screenshots im Aussehen anderer Browser überflüssig, da die entsprechenden
CSS Anweisungen sonst nirgends unterstützt werden. Der Einsatz lohnt sich aber dennoch, denn der Marktanteil
der IE Browser Versionen ab 5.5 hat inzwischen schon deutlich die 70% Marke überschritten.
|
|
VII. Individuelle Konfiguration des Cursors innerhalb des Webseitenbereichs (nur IE 6.0!)
|
Seitdem der Internet Explorer 6 eine gewisse Verbreitung erlangt hat, machen zahlreiche Webdesigner die unliebsame Erfahrung, dass der IE
ihre einstmals so schön per CSS definierten x-resize Cursor keinesfalls mehr so anzeigt wie gewohnt. Statt etwa einen nach rechts zeigenden waagrechten Pfeil zu zeigen, wie es die IE von 4.0 bis 5.5 bei der Definition cursor:e-resize getan hat kommt nun ein eher unästhetischer Doppelpfeil.
Ein Grund, den IE 6 in die Wüste zu schicken? Mitnichten, denn die Version 6 von Microsofts Browser wartet mit einem Feature auf, das die merkwürdige Neuinterpretation der x-resize Cursor mehr als vergessen lässt: dem Webdesigner wird nämlich nun die Möglichkeit in die Hand gegeben, das Aussehen des Cursors innerhalb seiner Webseiten selbst zu bestimmen, und zwar mit einer sogenannten Cursor-Datei (Endung *.cur), die auf dem eigenen Webspace abgelegt wird, per CSS definiert werden kann und dann vom IE verwendet wird.
*.cur Dateien lassen sich nicht mit allen der gängigen Grafikprogramme erstellen. Ich erinnere mich, dass die Version 3 von PhotoImpact das mal beherrschte, vielleicht ist das jetzt ja auch noch so. Der Photoshop jedenfalls unterstützt *.cur Dateien nicht. Photoshop User können aber auf ein externes Programm wie etwa den Cursor Editor von Axialis zurückgreifen, um sich eigene *.cur Dateien zu erstellen. Natürlich kann man aber auch schon vorhandene *.cur Dateien etwa aus dem eigenen Windows-Verzeichnis oder von Downloadangeboten im Web verwenden.
Nebenstehend nun eine Beschreibung, wie sich individuelle Cursor für die eigene Webseite definieren lassen. Folgende Cursor werden definiert und danach wie auf dieser Seite hier im IE 6 angezeigt:
 pfeil2.cur als Standardcursor
 hand.cur beim Überfahren von Links
|
Verwendeter Quellcode
(einsetzen im HEAD-Bereich oder in einem .css File)* :
body
{cursor:url('pfeil2.cur');}
A:hover
{cursor:url('hand.cur');}
*) beim Einsetzen im Head-Bereich ist der obige Code natürlich auch hier wieder mit den bereits erwähnten Tags <style> ... </style> zu umschließen.
Weiterhin zu beachten: die obige Syntax ist nur gültig, wenn die *.cur Dateien sich im selben Verzeichnis wie die CSS-Definitionen befinden. Ansonsten - vor allem bei externen Style Sheets kann sich das Problem einstellen, dass der IE die *.cur Files nicht findet. Wer diese über ein externes Style Sheet definieren möchte, sollte die *.cur Files in seinem Hauptverzeichnis ablegen und entprechend referenzieren: {cursor:url('/hand.cur');} (beachten: der Unterschied zu der oben genannten Definition ist der Slash "/" vor hand.cur).
Noch ein abschließender Hinweis: bitte seid zurückhaltend mit der Wahl des Cursors. Er sollte sich nicht zu sehr von den gewohnten Standardymbolen unterscheiden, auch keine abartig bunten Farben haben oder eine völlig abwegige Form (wie etwa der Dinosaurier in diesem einem Windows Theme). Die meisten User mögen solche Sperenzchen nicht und werden auf solch einen Klamauk eher ablehnend reagieren. Insbesondere der Einsatz von animierten Cursors (*.ani) sollte sorgfältig abgewägt werden, da diese mitunter sehr entnervend sein können.
|
Beispiele
|
Ansicht in IE 6
|
|
|
Auch bei diesem Beispiel gilt: von allen Browsern in der großen weiten Welt ist meines Wissen der IE 6 bisher der einzige der mit Cursordefinitionen was anfangen kann.
|
|
VIII. Linkunterstreichungen unabhängig vom Link farblich anpassen
|
Wie schon in Punkt 1 erwähnt, ist der Rollover-Effekt bei Links ein beliebtes Gestaltungsmittel. Jedoch
kann man die Farbe der Linkunterstreichung nicht separat von Textlink gestalten - beide haben dieselbe Farbe. Eine Möglichkeit ist zwar, dem Link noch mit dem <Font>-Tag eine eigene Farbe zuzuzuweisen, dann jedoch funktioniert
der Rollover-Effekt nur noch bei der Textunterstreichung und nicht mehr beim Textlink - außerdem ist das nicht sehr elegant. ;)
Wie aber kann man es anstellen, dass sowohl der Textlink als auch die Unterstreichung beim Rollover die Farbe ändern, und das separat?
Dazu behelfen wir uns eines kleinen Tricks, in dem wir für die Links eine border definieren, deren borderlines jedoch unsichtbar machen - bis auf die bottom-border. Dadurch sieht diese Borderdefinition am Ende wie
eine Linkunterstreichung aus - obwohl sie keine ist. Und wir haben damit die Möglichkeit in die Hand bekommen, diesr "Pseudo-Textdecoration" beliebige Farbwerte zuzuweisen.
|
Verwendeter Quellcode
(einsetzen im HEAD-Bereich oder in einem .css File)* :
body {}
A:hover
{
text-decoration:none;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#1E3577;
}
eingerückte Zeilen im Quellcode ohne Zeilenumbruch
*) beim Einsetzen im Head-Bereich ist der obige Code natürlich auch hier wieder mit den bereits erwähnten Tags <style> ... </style> zu umschließen.
|
Beispiele
|
Ansicht in IE 5/6 sowie
Netscape 6 und Mozilla
|
|
|
Für Beispiele hier klicken
|
Die Beispiele öffnen sich in einem separaten Popup-Fenster, da die CSS Definitionen der Beispiele mit den CSS Definitionen für Links im El Fabi Universe kollidieren würden.
|
|
IX. Transparenz von Elementen (IE und Mozilla/NS 6,7)
|
Man sieht das inzwischen immer mal wieder, so elegante halbtransparente Pulldownmenüs beispielsweise,
bei denen sich noch ganz leicht dahinter befindliche Seitenelemente ausmachen lassen. Transluzenz ist der allgemein für
diesen Effekt bekannte Begriff, der sich nicht zuletzt seit der Einführung von Mac OS X, wo der Transluzenz-Effekt überall anzutreffen ist, wachsender
Beliebtheit erfreut.
Warum also nicht auch auf der eigenen Webseite halbtransparente Elemente zum Einsatz bringen!? Bis zur Einführung des Mozilla Browsers und den darauf basierenden neuen Netscape-Versionen
verstand es zwar allein der Internet-Explorer, anhand einer proprietären CSS Anweisung, die Deckkraft eines Elementes (opacity: Lichtundurchlässigkeit) variabel zu gestalten. Mozilla hat jedoch nun
sein eigenes (proprietäres) "Opacity"-Attribut, so dass der Effekt der Transluzenz auch hier erzielt werden kann. Es ist davon auszugehen, dass die CSS Anweisung "opacity:XX%" Bestandteil der künftigen
CSS3 Spezifikationen sein wird, so dass das "-moz-"-Anhängsel vor der Anweisung dann in späteren Mozilla-Versionen nicht mehr erforderlich sein wird.
|
Verwendeter Quellcode
(einsetzen im HEAD-Bereich oder in einem .css File)* :
.translucent {
position:absolute;
filter:alpha(opacity=50);
-moz-opacity:50%;
}
Die "filter:alpha..."-Zeile ist die Anweisung für den IE, "-moz-..." diejenige für Mozilla und die neuen Netscape Versionen. In beiden Fällen entpricht die Zahlenangabe dem Deckungsgrad des Elements (hier 50% Lichtundurchlässigkeit)
Im Qelltext dann aufrufen mit <tag class="translucent"> ... </tag> , wobei "tag" durch ein beliebiges HTML Attribut zu ersetzen ist.
|
Beispiele
|
Ansicht im IE und in Mozilla/Netscape 6,7
|
|
|
Der Transluzenz-Effekt wirkt natürlich nur dann, wenn irgendwelche konturbetonten Elemente übereinanderliegen, also beispielsweise eine herunterklappende, halbtransparente DHTML-Navigation.
Ebenfalls ein schöner Effekt ist es, wenn der Transluzenz-Effekt zum Ein- und Ausfaden eines bestimmtes Objektes, also beispielsweise Bilder, verwendet wird. Dies lässt sich allerdings nicht
allein mit CSS realisieren, hierfür ist zusätzlich auch noch etwas JavaScript erforderlich.
Eine schöne Referenzseite für solch ein Script, das den "Fade-In/Fade-Out"-Effekt sowohl im IE wie auch (mitunter etwas eigenwillig) in Mozilla-basierten Browsern ermöglicht, ist hier zu finden:
http://chrisken.utacm.org/code/alphaapi.phtml (englisch).
|
© 1997-2006 by Fabian Lorenzen. All rights reserved.
|
|
|
