CSS-Klassen kombinieren

Montag, 03 September 2007 00:41 MET

Thema:
Webgestaltung, Ausgewählte Artikel  
Stichworte:
, , ,  
 
#foo.foo.bar
CSS-Klassen kombinieren [hyperkontext | Weblog]

Die Möglicheit der Kombination von Klassen hatte ich vor Jahren ad acta gelegt, weil der damals weitverbreitete IE6 dies nicht ausreichend unterstützt.

Mittlerweile ist es Zeit, fast vergessene Optionen wieder in das CSS-Repertoire aufzunehmen und auf praktische Tauglichkeit zu überprüfen.

Loslassen können

Etliche mögliche Optionen mit CSS (Cascading Style Sheets) konnten bis vor kurzem de facto nicht riskiert werden, weil rund 65% der BenutzerInnen ein fehlerbehaftetes Programm zur Darstellung von Webseiten verwendeten.

Die gültige Kombination von Klassen 1,2 (auch mit IDs) in der CSS-Notation ist so ein Fall, wo der IE6 kläglich versagt.

Mittlerweile (Juli 2007) verwenden nur mehr rund 37 Prozent dieses antiquierte Unding und das ist leider immer noch jede Menge (Statistik von W3-Schools).

Sterbehilfe für den IE6

Ich leiste dem IE6 (Internet Explorer 6) nun auch aktive Sterbehilfe, indem ich immer öfter diejenigen Teile des CSS-Spektrums einsetze, die mit Rücksicht auf dieses Unding quasi tabu waren oder die oft umständlichen Workarounds nicht mehr einsetze. BenutzerInnen dieser veralteten Software werden somit optisch zunehmend und bewusst auf zweite Klasse gesetzt. Siehe hierzu auch meinen Artikel, Befreiung aus der Geiselhaft des IE6.

Nachdem wir uns also von dem Wahn befreit haben, dass alles auch in einem fehlerbehafteten Programm aus dem Jahre 2001 funktionieren muss, wenden wir uns nun den existierenden Möglichkeiten der Kombination von Klassen in Cascading Style Sheets zu.

Klassen im Stylesheet kombinieren

Es können bereits definierte Klassen in Kombination eigene Anweisungen erhalten.

Es ist (hoffentlich) bekannt, dass einem HTML-Element auch mehrere Klassen zugewiesen werden können. Also zum Beispiel <div class="class1 class2">. Das ist gültige und gängige Praxis. Dem Element werden in diesem Falle alle definierten Stile der Stylesheets aus class1 und class2 verabreicht. Überschneiden sich die Anweisungen der beiden Klassen, dann findet diejenige Anwendung, die zuletzt in der Reihenfolge auftritt.

Es ist aber auch möglich und gültig, bereits in der CSS-Notation festzulegen, dass beim Zusammenkommen von zwei bestimmten Klassen in einem HTML-Element, dies noch spezielle Stil-Anweisungen berücksichtigt.

Erstes Beispiel

CSS 


.class1 {color: green;}
.class2 {color: orange;}
.class1.class2 {
  color: red;
  padding: 1em; 
  border: 2px dotted red; 
  text-align: center;
}

HTML


<p class="class1">Zeile1 hat grüne Farbe.</p> 
<p class="class2">Zeile2 hat orange Farbe.</p> 
<p class="class1 class2">
Zeile3 wurde Klasse1 und Klasse2 zugewiesen.
</p>

Ergibt (außer im IE6):

Klasse1 hat grüne Farbe.

Klasse2 hat orange Farbe.

Zeile3 wurde Klasse1 und Klasse2 zugewiesen.

Welche Kombinationen hier möglich werden können, zeigt das folgende einfache Beispiel mit drei Klassen:

Zweites Beispiel

CSS


.class1 {color: green;}
.class2 {color: orange;}
.class3 {
   color: orange;
   font-weight: bold;
   border: 2px dotted orange;
   padding: 1em;
}
.class1.class2 {
   color: red;
   text-align: center;
}
.class1.class2.class3 {
   border-width: 5px;
   background-color: blue;
   color: white;
}

HTML


<p class="class1">Klasse 1</p>
<p class="class2">Klasse 2</p>
<p class="class3">Klasse 3</p>
<p class="class1 class2">Klasse 1 und 2</p>
<p class="class1 class2 class3">Klasse 1,2,3</p>

Ergibt (außer im IE6):

Klasse 1

Klasse 2

Klasse 3

Klasse 1 und 2

Klasse 1,2,3

Mit den Bugs des IE6 möchte ich mich hier nicht weiter beschäftigen. Sie sind soweit ausreichend dokumentiert (siehe unter weitere Links).

Weiters muss im IE7 (Internet Explorer 7) eine Seite mit gültiger Dokumententyp-Deklaration versehen sein. Ansonsten läuft der IE7 im Quirks-Mode und verhält sich genauso fehlerhaft, wie sein Vorgänger.

Klassen mit IDs kombinieren

Selbstverständlich lassen sich solch geartete Kombinationen auch zusammen mit einer ID definieren und verknüpfen. Im Code kann das beispielsweise so aussehen:
#id.class1.class2.class3 {… .

Nochmals die Warnung zum IE6:
Mindestens bis zum Jahr 2009 – bis dieser Zustand Browser dann endgültig gestorben sein wird – rate ich an, CSS-Klassen keinesfalls für wichtige Positionierungen oder dergleichen zu kombinieren. Durchaus aber für optische Kleinigkeiten zu verwenden, um IE6-Nutzern auch sichtbar zu machen, dass es aktuellere Versionen beziehungsweise bessere Programme gibt. Oder Sie machen sich via untenstehenden Verweisen mit den Workarounds so weit schlau, dass Sie genau wissen, was Sie tun.

Abschnitt 1 von 1

Quellenverzeichnis

  1. Class Selectors – W3C (World Wide Web Consortium)
  2. Using CSS Selectors

Externe Verweise dieses Artikels wurden zuletzt am 2. September 2007 auf Relevanz geprüft.

Datum:
veröffentlicht am 03 September 2007, 00:41 MET.
Artikel:
CSS-Klassen kombinieren [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/80
Thema:
Webgestaltung, Ausgewählte Artikel 
Stichworte:
, , ,  
Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
Intranet als strategischer Zündstoff
älterer Artikel »
Kurioses und komisches auf Websites österreichischer Ministerien