Selector mit doppelten Definitionen. Warum?

[Der Martin]

Hi,

.ym-fbox-heading {

font-size: 1em;
font-size: 100%;
color: #000;
margin: 1em 1em 1em 0;
}

>   
> Warum wird hier font-size 2 definiert?  
  
du meinst 2 mal? Nun ja ... in diesem Beispiel leuchtet es mir nicht ein. Der Gedanke ist normalerweise, zuerst eine "einfach" Definition zu notieren, die jeder Browser versteht und umsetzen kann. Und direkt danach formuliert man eine zweite "bessere" Definition für moderne Browser, die aber von älteren Browsern eventuell nicht verstanden und daher ignoriert wird.  
Das ist aber hier Unfug. Nicht nur, dass 100% für font-size letztendlich dasselbe ergibt wie 1em, mir ist auch kein Browser bekannt, der zwar 1em verstehen würde, aber nicht 100%.  
  
  

> ~~~css

 button:before {  

> 	background: #ccc;  
> 	background: rgba(0, 0, 0, 0.1);  
> 	float: left;  
> 	width: 1em;  
> ...  
> }

Das ergibt Sinn - hier trifft die Erklärung, die ich oben gegeben habe. Die erste Zeile legt einen einfarbigen Hintergrund fest. RGB-Hintergrundfarben werden von allem mir geläufigen Browsern unterstützt. Dann folgt eine weitere Zeile, die ebenfalls die Hintergrundfarbe festlegt - diesmal aber als RGBA, also teiltransparent. Das kennen manche älteren Browser nicht; sie ignorieren diese Zeile also und bleiben beim vorher definierten einfarbig deckenden Hintergrund, während alle anderen die erste Angabe mit der zweiten "überschreiben".

So long,
 Martin