[CSS] Klassen erweitern

klamm

Chef
Teammitglied
ID: 20876
L
20 April 2006
13.744
1.432
Ist es erlaubt, Klassen mehrfach zu definieren und damit zu erweitern?
Hintergrund:

Ab und zu braucht es ja einen "IE fix/hack" ... damit man nicht die komplette Klasse 2x hinmalen muss, könnte man alle funzenden Attribute in die 1. Auflistung schreiben und die zu-fixenden-Atrribute in den "Hack-Teil".

Beispiel:
PHP:
div.klasse1 {
    width:200px;
    height:100px;
    padding:20px;
}
/* IE rafft das hier nicht und nimmt das von oben */
/* all other browsers >> neues attribut (überschreibt altes) */
html>body div.klasse1 {
    padding:10px;
}
Is sowas valide?
Funzen tuts.
 
Meiner Meinung nach sollte das valide sein, habs selbst schon angewendet, aber nimm lieber verschiedene CSS-Files, etwa so:

HTML:
<link rel="stylesheet" media="screen" href="static/style.red.css" />
<!--[if IE]>
<link rel="stylesheet" media="screen" href="static/ie.css" />
<![endif]-->

<!--[if IE 6]>
<link rel="stylesheet" media="screen" href="static/ie6.css" />
<![endif]-->
So stellst du sicher, nicht irgendwelche "Nebenwirkungen" bei anderen Browsern hervorzurufen.

Die komplette Syntax findet man unter Conditional Comments bei Wikipedia.
 
Ja, sowas ist valide. In CSS darf man so oft etwas neu definieren, wie man will. Die letzte definition ist dann jeweils die "gültige".

Dabei gibt es auch noch unterschiedliche Prioritäten, die man eventuell wissen sollte: 6.4.3 Berechnung der Spezifität eines Selektors

Nützlich ist hier auch der Firebug, in dem man einfach sehen kann, welche CSS-Eigenschaften überschrieben wurden und welche gerade aktiv sind. (Natürlich nützt das dann nichts, wenn man spezielles für den IE machen muss.)