Einheitliches CSS Design in IE, FF,…
Wie schreibt man CSS Dateien so, dass die zugehörige Homepage in allen gängigen Browser gleich dargestellt wird? Braucht man für jeden Browser eine eigene CSS Datei? Muss man ständig irgendwelche CSS Hacks anwenden? Macht es überhaupt Sinn seine Homepage an alle möglichen Browser anzupassen oder verlässt man sich einfach auf den Firefox?
Nun, eins vorweg… eine Homepage sollte in allen Browsern gleich angezeigt werden laut Google Analytics wird dieser Blog folgendermaßen besucht:
| Browser-Versionen | Besucher | Anteil |
|---|---|---|
| Firefox | 249 | 68,75% |
| Internet Explorer | 61 | 17,09% |
| Opera | 26 | 7,28% |
| Safari | 9 | 2,52% |
| Mozilla | 7 | 1,96% |
| Konqueror | 3 | 0,84% |
| Netscape | 1 | 0,28% |
| Mozilla Compatible Agent | 1 | 0,28% |
Auf weniger technisch orientierten Seiten sieht die Verteilung ganz anders aus. Dort liegt der Internet Explorer deutlich vor dem Firefox (siehe Web-Barometer)!
Wie kriegt man es nun also hin, dass eine Homepage ohne viel Aufwand in allen Browsern gleich angezeigt wird? Ich gehe mittlerweile nach folgenden 10 Prinzipien vor und muss so gut wie keine Zusatz Fixes oder Hacks mehr ausführen:
1. Das Problem mit den CSS Abständen (margin, padding…)
Jeder Browser hat seine eigene Vorstellung, welche XHTML Elemente welche Abstände zueinander haben. Da man sich auf keinen Fall darauf verlassen kann, dass dies immer gleich ist, resettet man diese Voreinstellungen gleich zu beginn der CSS Datei folgendermaßen:
* { margin: 0px; padding: 0px; border:0; }
Nun sitzen alle XHTML Elemente “direkt aufeinander”, es gibt keine Abstände mehr und man ist gezwungen Abstände immer anzugeben. Dies führt schon mal einen großen Schritt in Richtung einheitliches Design.
Wichtig bei Abständen ist auch, es gibt in XHTML inline Elemente und block Elemente. Inline Elemente (img, a, span,…) kennen keinen margin-top oder bottom! Das geht nur mit block Elementen (div, p, h1…) ausserdem machen block Elemente automatisch einen Zeilenumbruch.
Allerdings kann man mit der Anweisung display:block bzw. display:inline die jeweils gewünschte Wirkung erzielen (siehe: mehr über inline und block Elemente)
2. Das Problem mit der CSS Breite und dem Boxmodell
Nach W3C CSS Standard berechnet sich die Breite eines CSS formatierten XHTML Elementes zu width + padding + border + margin. Folgende div Box ist also 100 + 15 + 15 + 10 + 10 + 2 + 2 = 154px breit und nicht 100px! (siehe Details zum Boxmodell )
div { widht: 100px margin: 15px; padding: 10px; border: 2px solid black; }
Wäre das alles könnte man nun alle Elemente problemlos positionieren. Leider ist es so, dass der Internetexplorer bis Version 5.5 sich nicht an das Boxmodell hält, sondern anders rechnet, die Breite ergibt sich dort zu width + margin. Rahmenbreite (border) und Innenabstand (padding) werden nicht einbezogen, das div von oben hat dann eine Breite von 100 + 15 + 15 = 130.
Ein Trick um hier also zu einer einheitlichen Darstellung zu kommen wäre also alle Abstände soweit es geht erst mal durch margins zu lösen. Oder man stellt tatsächlich Fixes, Browserweichen oder ähnliches zu Verfügung. Man kommt aber mi der margin Variante schon sehr weit.
3.Strucktur und Übersicht in einer CSS Datei
Oft sehe ich CSS Dateien, welche übersät mit Klassen und Selektoren sind ohne dass es irgend eine Ordnung der Elemente gibt. Da ist es eigentlich klar, dass es zu Fehlern kommt, denn schnell hat man Eigenschaften überschrieben oder irgend etwas doppelt definiert. Beim schreiben einer CSS Datei sollte man daher immer einen gewissen Stil einhalten, was ich damit meine demostrieren ich hier an einem Code Beispiel, zunächst den body einer exemplarischen XHTML Datei:
<body> <div id="page"> <div id="header"> <img src="logo-css-tipps.png" /> </div> <div id="main"> <div id="content"> <h1>CSS und Browser</h1> <p>Kann es wirklich möglich sein <acronym title="Cascading Style Sheets">CSS</acronym> so zu verwenden, dass ohne viel Anstrengung die Seit ein allen Browsern gleich dargestellt werden?</p> </div> </div id="sidebar"> <ul> <li>CSS</li> <li>XHTML</li> <ul> </div> </div> <div id="footer"> <p> © 2007 <a href="http://www.ilimitado.de/">ilimitado OHG Tübingen</a> - 100% made with love </p> </div> </div> </body>
Nun geht man im Prinzip so vor, dass man die Struktur der Seite auch in die CSS Datei bringt:
#page{ width: 800px; height: 100%; } #header{ width: 100%; height: 50px; } #header img{ border:0; } #main{ border: 1px solid black } #main #content{ float:left; } #main #content h1{ font-size:16px; } #main #content p{ font-size:12px; } #main #sidebar{} #main #sidebar ul{} #main #sidebar ul li{} /* und so weiter...*/
Man erreicht eine einfache klare Struktur. Will man nachträglich im content Bereich eine H2 definieren, dann setzte man sie in der CSS Datei nicht ans Ende, sondern im Prinzip unter die H1 des contents. Natürlich können vor allem in Navigationsmenüs dadurch folgende Konstrukte entstehen:
#main #navigation ul li ul li a{ color:#022e75; }
Das ist zwar sehr lang, aber einfach eindeutiger und besser nachzuvollziehen, als hier zum Beispiel eine Klasse zu verwenden.
Vergleicht einfach mal unsere Blog CSS Datei, welche auf dem standard Wordpress Theme basiert und die völlig eigen erstellte CSS Datei der ilimitado Firmenseite. (Welche man, wie ich grade sehe, auch noch viel schöner hätte machen können, aber damals wars bissle spät in der Nacht…)
Zusätzlich zu dieser groben Strukturierung empfiehlt sich auch im kleinen eine gewisse Struktur beizubehalten. Dazu sei mal einfach die Graphik des Artikels Formatting CSS: File Structures to Property/Value Pairs empfohlen sich anzuschauen.
4. Das Problem mit der Vererbung und dem Überschreiben von Eigenschaften in CSS
Oftmals wundert man sich, warum beim positionieren auf einmal die angegebenen Werte nicht eingehalten werden. Nehmen wir mal folgendes Beipspiel an:
#navigation ul li{ margin-left: 10px; } #navigation ul li ul li{ margin-left: 5px; }
Der Listenppunkt auf der oberen Ebene hat 10px Abstand nach links, der Listenpunkt eine Ebene weiter unten hat 5px Abstand zum Listenpunkt darüber. Also insgesamt 15px Abstand nach außen. Eigenschaften werden also vererbt und nicht überschrieben, sondern ergänzt, in diesem Fall addiert. Treten also irgendwo unerklärliche Abstände oder Farben auf, ist es meist ein Vererbungsproblem. Durch den übersichtlichen Syntax lässt sich das schnell nachvollziehen, hat im oberen Fall das li Element (#navigation ul li ul li) eine unerwartete Formatierung wurde diese höchstwahrscheinlich in #navigation ul li festgelegt…
5. Für was setzt man denn nun Klassen ein in CSS
Klassen setze ich immer nur dann ein, wenn ich über meine IDs und Tags nicht mehr weiterkomme. Das ist immer dann der Fall, wenn etwas besonderes passieren soll. Wenn aus irgendwelchen Gründen in einem Text etwas rot markiert werden soll löse ich das mir einer Klasse:
.red{ color:red; }
Manchmal macht es aber auch Sinn eine solch Klasse nur dort zu definieren, wo man sie auch braucht:
#main #content p .red{ color:red; }
Globale Klassen, welche ich ständig brauche sind zum Beispiel:
.hidden{ display:none; } .clear{ clear:both }
Man kann einem XHTML Element beliebig viele Klassen zuweisen, einfach durch ein Leerzeichen getrennt, außerdem kann ein Element sowohl IDs als auch Klassen haben:
<div class="clear hidden"></div> <div id="footer" class="clear hidden"></div>
Wichtig ist nur, pro XHTML Dokument darf eine ID nur genau ein einziges Mal auftauche, Klassen können beliebig oft wiederholt und zugewiesen werden. Klassen kennzeichnen also sich wiederholende Design Elemente, IDs bringen Struktur ins Dokument…
6. Floatings und wie man richtig cleared
Oft sehen CSS formatierte Seiten auf einmal “komisch aus”. Dies kann an einem falschen clear von float liegen. Float nimmt ein Element aus dem normalen Textfluss herraus und lässt folgende Elemente um sich herum “fließen”. Clear stellt den normalen Fluss wieder her. Deswegen ist folgendes Beispiel falsch:
<div id="content"> <div>links gefloated</div> <div>rechts gefloated</div> </div> <div id="footer"> der footer hat ein clear:both </div>
Macht man eine Border um das div content sieht man, dass div liegt oberhalb der beiden internen divs. Erwartet hätte man einen Rahmen um die beiden inneren divs herum. Das kann aber nicht funktionieren, da das clear im Footer gar nichts zu suchen hat. Es ist zwar das nächst Element, ist aber gar nicht im div content drin! Folgende Lösung stellt das erwartete Ergebnis dar:
<div id="content"> <div>links gefloated</div> <div>rechts gefloated</div> <p class="clear"></p> </div> <div id="footer"> der footer hat KEIN clear:both </div>
Eine noch elegantere Lösung wird unter Einschließen von Floats ohne zusätzliches Markup vorgestellt.
7. Das erste Element einer Liste oder das erste p oder h1 im Content anderst formatieren
Oft hat man im Inhaltsbereich das Problem, dass die erste Überschrift, oder der erste Absatz einen anderen Abstand als der Rest haben soll. Das kann man durch eine Klasse oder aber durch den + Selektor hinbekommen.
<div id="content"> <h1>Der CSS + Selektor</h1> <p>Erster Absatz mit Abstand 20px nach oben<p> <p>zweiter Absaz und jeder weitere mit nur 10px<p> </div>
Zugehörige CSS Datei:
#content p{ margin-top:20px; } #content p + p{ margin-top:10px; }
Leider macht der Internetexplorer da aber nicht mit! Was irgendwie traurig ist 
8. Wie baut man denn Homepages die auch gut in allen Browsern skalieren?
Damit man die Schriftgröße oder auch die Boxgröße der divs skalieren kann (im Firefox z.B. durch drücken von strg + +) dürfen die Größen nicht in px oder pt sondern müssen in % oder besser in em angegeben werden. Die skala em ist ein wengi schwierig zu verstehen. Die Angabe em bezieht sich immer auf die Schriftgröße des Elternelements. Das oberste Elternelement ist das body Tag. Setzt man hier eine Schriftgröße fest gilt für die Angabe in einem Kind element nun dieser Bezug.
Jetzt wirds etwas kompliziert. Zunächst muss man sich überlegen, was soll den skalieren, soll die ganze Seite skalieren oder nur ein Teil? Alles was sich anpassen soll muss in em dynamsich angegeben werden, alles ander fix in Pixeln (px).
Jetzt kommt der Trick, mit em zu arbeiten läuft oft auf raten und mühsamen rumprobieren herraus. Das muss aber nicht sein.
Mit folgender Angabe setzt man den Bezug von 1em genau auf 10px:
body{ font-size: 62.5%; /* Resets 1em to 10px */ }
Nun hat man fast schon gewonnen. Wenn man nun 1em schreibt, entspricht das 10px. Gibt man einem div die Breite 80em ist es also 800px breit und wird beim drücken von strg + + vergrößert.
Aufpassen muss man jetzt nur noch, wenn man die Schriftgröße ändert. Schriftgrößen ändert man so tief es nur geht drin im XHTML Baum! Das heisst. Man definiert nicht im div content gleich mal ne Schriftgröße sondern erst im #content div p.
Warum? Na weil sich em immer auf die Schriftgröße bezieht. Setzt man das div content auf 1.4 em (14px) und macht es 40em breit ist es nicht 400px breit sondern 40 * 1,4 * 10px = 560px.
Natürlich wird diese Größe auch wieder vererbt! Stimmen also Abstände oder Breiten nicht, (vorallem bei verschachtelten listen ul li ul li und ul li hat das li eine andere Schriftgröße als 1em ist der Bezug im tiefern li nicht mehr 10px!) hat man wohl die Schriftgröße geändert ud bezieth sich nicht mehr auf 10px sondern 1em sind nun eben 14px oder wie auch immer! Da muss man gut aufpassen und sollte wirklich streng auf eine gute CSS Datei Strucktur achten, um solche Vererbungen nachvollziehen zu können.
9. Jetzt hab ich an all die Sachen gedacht, aber es gibt immer noch Probleme
Wird nun immer noch nicht alles korrekt angezeigt, sollte man als erstes den W3C Validator bemühen und prüfen ob die Seite selber W3C XHTML konform ist und dann ob die CSS Datei W3C valid ist. Es ist in der Tat ein Streitthema, ob dies nun was brint oder nicht. Tatsache ist aber, es kann niemand garantieren, dass die Fehler, welche man eingebaut hat, von allen Browsern gleich gut ausgeglichen werden. Jeder Broswer interpretiert XHTML als Tagsoup und versucht eine Annäherung an das gewünscht Design zu erzeugen. Mit Validem Markup wird dem Browser geholfen stets die gleiche Annäherung zu gewährleisten.
Es ist im Allgemeien auch gar kein Problem valid zu bleiben, wenn man bei der Entwicklung immer mal wieder prüft, ob man noch alle Regeln einhält. Speziell Warnings in CSS Dateien sollte man ernst nehmen, da hier oftmals Dinge passieren die so nicht gewünscht waren.
Also CSS und XHTML Markup W3C konform gestalten, wenn dann noch Probleme auftauchen wendet man sich an Experten in Foren oder Blogs und fragt einfach mal nach ob jemand das Problem sieht.
Hält man sich dabei an die hier genannten Tipps ist es nämlich sehr viel einfacher Fehler zu finden!! (wenns denn noch welche gibt…)
10. Was man sonst noch über CSS wissen kann und welche Tricks man braucht
Es gibt eine schöne englisch sprachige Abhandlung über CSS mit dem Titel 70 Expert Ideas For Better CSS Coding welche es sich wirklich mal lohnt zu lesen.
CSS 4 YOU ist eine nahezu komplette CSS-Referenz auf deutsch – ergänzt durch etliche Tipps, Tricks und andere Referenzen.
Es lohtn sich auch mal in ein Buch zu schauen, kleine Auswahl siehe unten…
Fazit
Mit viel Übung und Disziplin kann man es wirklich schaffen auf anhib durch valides CSS und XHTML Homepages zu gestalten welche in allen Browsern gleich angezeigt werden. Was man braucht ist etwas Erfahrung und einen guten CSS Stil…
Weiterführende Literatur zu CSS und Webdesign
Tags: browser, CSS, firefox, internet explorer, W3C, webdesign, XHTML
[...] Einheitliches CSS Design in IE, FF,? » Von Daniel Kersting » Beitrag » ilimitado E… [...]
[...] and voting. We believe in rough consensus and running code." David D. Clark, MIT « Einheitliches CSS Design in IE, FF,… » zur Blog Startseite [...]
Einheitliches CSS Design in IE, FF,……
Wie schreibt man CSS Dateien so, dass die zugehörige Homepage in allen gängigen Browser gleich dargestellt wird? Braucht man für jeden Browser eine eigene CSS Datei? Muss man ständig irgendwelche CSS Hacks anwenden? Macht es überhaupt Sinn seine H…
hallo,
Entschuldigung für mein schlechtes Deutsch.
ich habe im google nach css desing firma gesucht so habe ich sie gefunden.
mein problem.
mein webseite http://www.hostbu.com
im IE sind paar seiten linien und tekste sind verschoben. im Firefox kein problem.
können sie mir das fehler beseitigen?
bitte sagan sie es mir was es kosten würde.
mein mail: FatihKilic@gmx.de
gruss
Detaillierte Übersicht, vielen Dank, hat mir sehr geholfen!
[...] ilimitado Web Entwickler Blog » Einheitliches CSS Design in IE, FF,… Wie schreibt man CSS Dateien so, dass die zugehörige Homepage in allen gängigen Browser gleich dargestellt wird? Hier gibt’s einen guten Beitrag dazu. [...]
[...] ilimitado Web Entwickler Blog » Einheitliches CSS Design in IE, FF,… Wie schreibt man CSS Dateien so, dass die zugehörige Homepage in allen gängigen Browser gleich dargestellt wird? Hier gibt’s einen guten Beitrag dazu. [...]
[...] ilimitado Web Entwickler Blog » Einheitliches CSS Design in IE, FF,… [...]