Selector mit doppelten Definitionen. Warum?

[singel]

Hallo
Beim Herumstöbern im Netz bin ich auf eine Datei gray-theme.css gestossen. Beim Anschauen des Codes ist mir folgendes aufgefallen:

.ym-fbox-heading {  
	font-size: 1em;  
	font-size: 100%;  
	color: #000;  
	margin: 1em 1em 1em 0;  
}

Warum wird hier font-size 2 definiert?

Und hier Background?

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

Bin ein Anfänger daher diese Frage.

Gruss Mathias

[ChrisB]

Hi,

.ym-fbox-heading {

font-size: 1em;
font-size: 100%;
}

>   
> Warum wird hier font-size 2 definiert?  
>   
> Und hier Background?  
>   
> ~~~css

 button:before {  

> 	background: #ccc;  
> 	background: rgba(0, 0, 0, 0.1);  
> }

Weil Browser per Spezifikation Kombinationen aus CSS-Eigenschaft und Wert zu ignorieren haben, die sie nicht vestehen.

Wenn ein Browser mit font-size:100% nichts anfangen kann, dann bleibt er halt beim davor deklarierten 1em, und wenn ein Browser rgba-Farbangaben nicht versteht, dann halt bei der „normalen” hexadezimalen RGB-Farbangabe.

MfG ChrisB

[singel]

Danke für eure Erläuterungen. Nun verstehe ich es auch.
Gruss Mathias

[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

[Auge]

Hallo

Und hier Background?

button:before {

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

  
Für die Schriftgrößendefinitionen fällt mir kein Grund ein, für die Hintergrundfarbe schon. Nicht jeder Browser (älterer Bauart) kann mit `rgba(0, 0, 0, 0.1)`{:.language-css} umgehen, da hier mit „a“ ein Transparenzwert von 0.1 definiert wird. Solche Browser führen also `background: #ccc;`{:.language-css} aus und ignorieren `background: rgba(0, 0, 0, 0.1);`{:.language-css}. Browser die es können, lesen erst die erste Regel und überschreiben sie sodann mit der zweiten.  
  
Tschö, Auge  

-- 
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
Terry Pratchett, "Wachen! Wachen!"  
  
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}  
  
[Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)

[Matthias Apsel]

Om nah hoo pez nyeetz, Auge!

button:before { /* Pseudoelement */

}

  
Moderne Browser verstehen auch die korrekte Angabe der Pseudoelemente  
~~~css
button::before {  
  /* Pseudoelement */  
}  
  
button:first-child {  
  /* Pseudoklasse */  
}

Wie unser Syntaxhighlighting ;-)

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Wie unser Syntaxhighlighting ;-)

Wobei die Darstellung von :before in rot etwas fragwürdig ist, da das formal weiterhin korrekte Syntax ist.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Wobei die Darstellung von :before in rot etwas fragwürdig ist, da das formal weiterhin korrekte Syntax ist.

Sieh es als deprecated. ;-)

Matthias