Tipps & Tricks für die browserübergreifende CSS-Entwicklung

In der Webentwicklung ist Cascading Style Sheets (CSS) eine Stylesheet-Sprache, die zur Beschreibung der Darstellung eines in einer Auszeichnungssprache geschriebenen Dokuments verwendet wird. Sie hat eine einfache Syntax und verwendet eine Reihe von englischen Schlüsselwörtern, um die Namen der verschiedenen Stileigenschaften anzugeben. Ihre Spezifikationen wurden vom W3C gepflegt. Es ist noch immer nicht in allen Browsern zum Standard geworden.Hier möchte ich einige meiner Erfahrungen (Schmerzen, die ich durchgemacht habe ;) ) bei der Entwicklung von Stilen für meine früheren Projekte mit Ihnen teilen. Eines der Projekte basiert auf einer div-Struktur und das andere auf einer Tabelle und einer div-Struktur. Einige CSS-Styling-Attribute unterscheiden sich von Browser zu Browser. Aber wenn wir eine Website entwickeln, möchten die meisten Kunden, dass ihre Website mit allen Browsern kompatibel ist. Browserübergreifend kompatibles CSS bedeutet nicht nur, dass die Website in allen Browsern funktioniert, sondern auch, dass sie in allen Browsern gleich aussieht und sich gleich anfühlt. CSS-Validierung Wenn Sie einen Unterschied in der Darstellung einer Seite in verschiedenen Browsern feststellen, validieren Sie die CSS-Datei. Suchen Sie nach Syntaxfehlern in der Datei, z.B. fehlende, schließende oder zusätzliche Klammern bei der Definition von Stilen. Angenommen, ich habe einen Stil für ein div wie folgt definiert

  div#wrongStyle{{{
  Farbe : rot;
  Schriftgröße:19px;
  }

Der IE wendet die oben genannten Stile auf das div an, aber nicht Firefox. Der IE kann solche kleinen Fehler korrigieren, aber Firefox tut das nicht. Getrennte Stile Wenn Sie ein auf der IE-Version basierendes Styling bereitstellen möchten, können Sie es auf folgende Weise angeben.

Entwicklung von Stilen für eine DIV-basierte Struktur In einer div-basierten Struktur wird jedes Element auf der Webseite innerhalb eines div platziert und Stile werden auf dieses angewendet. Um diese div-Elemente zu positionieren, können Sie die absolute Positionierung mit fester Breite oder die relative Positionierung verwenden. Hier müssen wir als erstes darauf achten, die Informationen zur Positionierung von den Informationen zur Gestaltung zu trennen. So können allgemeine Stile wie Schriftart und Farben in den oberen Elementen angegeben werden. Dies hilft, das Layout beizubehalten, ohne die Stile zu beeinträchtigen. Bei der Entwicklung dieser Stile ist es eine gute Idee, agil vorzugehen, d.h. nach der Anwendung jedes Elements die Seite in allen Zielbrowsern zu überprüfen. Dies erleichtert die Behebung von browserübergreifenden Problemen. Wenn Sie die absolute Positionierung verwenden, können Sie jedes Element in einer separaten HTML-Datei entwickeln. Diese separaten Dateien oder absolut positionierten div-Elemente können leicht zu einer vollständigen Webseite zusammengefügt werden. CSS-Breiten- und Padding-Problem Der Box-Model-Hack wird verwendet, um ein Rendering-Problem in Browsern vor IE 6 zu beheben, bei dem der Rahmen und das Padding in der Breite eines Elements enthalten sind, anstatt hinzugefügt zu werden. Wenn Sie beispielsweise die Abmessungen eines Containers angeben, können Sie die folgende CSS-Regel verwenden:

 
#box
  {
  Breite: 100px;
  Rahmen: 5px;
  padding: 20px;
  }

Diese CSS-Regel würde angewendet werden auf:

  Dies ist eine Dummy-Abteilung mit einem Dummy-Text

In normalen Browsern wird die obige Regel als 100px Breite + zwei 5px Ränder + zwei 20px Paddings interpretiert. Die endgültige Breite des Elements beträgt also150px. In den Browsern vor IE6 beträgt die Gesamtbreite jedoch nur 100px, wobei die Breite von Padding und Rändern in diese Breite einfließt. Eine einfache Möglichkeit, dieses Problem zu lösen, besteht darin, ein weiteres div innerhalb des Elements zu haben und die Breite für das innere und Padding und Margin für das äußere anzugeben. Der Code sieht dann so aus...

#box
{
  Breite: 150px;
}
#boxInner
{
Rahmen: 5px;
padding: 20px;
}

Und die neue HTML würde lauten:

     

  Dies ist eine Dummy-Abteilung mit Dummy-Text
     

Wenn Sie den obigen Code verwenden, wird die Breite der Box unabhängig vom Browser auf 150px gesetzt. Genaue Nachkommen auswählen Manchmal verhalten sich CSS-Selektoren auch in verschiedenen Browsern unterschiedlich. Um Stile auf ein bestimmtes Element auf der Seite anzuwenden, können Sie den Child-Selektor verwenden ("parent > child > child's child"). In meinem Fall hatte ich das folgende Problem. Ich muss einen bestimmten Stil nur auf das erste li-Element der Klasse ul unter "parent" anwenden und habe keine Kontrolle über den HTML-Code.

   

	
  Artikel 1
           

		
  Unterpunkt 1  
		
  Unterpunkt 1  
	  
	
	
Artikel 2  
	

Jetzt können Sie das Styling auf folgende Weise festlegen, indem Sie den Child-Selektor parent > li { style goes here} verwenden. Vielleicht gibt es auch andere Möglichkeiten. Aber ich fand die obige Methode nützlich, da ich den HTML-Code nicht ändern kann. Verwendung der Tabellenstruktur für die Seite Das Wichtigste, was wir bei der Entwicklung von Stilen für Tabellen beachten müssen, ist, dass wir für das Element der obersten Ebene (normalerweise body) padding, margin und border auf 0px setzen. Danach können Sie diese Attribute einzeln angeben, indem Sie die div id oder class zuweisen, wo immer dies erforderlich ist. Geben Sie auch die Werte für "cellpadding", "cellspacing" und "border" im table-Tag explizit an, denn die Standardwerte für diese Attribute sind von Browser zu Browser unterschiedlich. Fazit Sie können viele andere Tipps wie diesen im Netz finden. Es ist immer besser, unser CSS und Layout umzustrukturieren, um das Styling mit verschiedenen Browsern kompatibel zu machen, als irgendwelche Hacks zu verwenden. Wenn Sie einen Hack verwenden, kann es sein, dass er in dem Browser, den Sie gerade testen, funktioniert, im Browser des Endbenutzers aber nicht :) . Dies sind die Hacks, die ich bei der Entwicklung meiner Projekte als nützlich empfunden habe. Sie können hier auch Ihre Erfahrungen (oder Schmerzen :)) bei der Verwendung von CSS teilen.