specificity + important rule || CrossBrowser

ulle · #1 (**permalink**) 10.10.2005, 10:58

Hallo Leute,

bisher dachte ich dass die important-rules sich nur durch User-StyleSheets überschreiben lassen. Nun habe ich festgestellt es geht auch mit einer höheren selector's specificity

Deshalb die BITTE um einen CrossBrowser TEST

Folgender CODE sollte eine komplett graue WEBsite produzieren.

Okay

IE6 | WinXP Pro Sp2
Okay

Firefox 1.07 | WinXP Pro Sp2

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css">
/*<![CDATA[*/

*			{
			margin:	0;
			padding:0;
			}


html,
body		{
			height: 100%;
			
			/* GELB
			 * specificity => 0,0,1 (001)
			 */
			background-color:	#FFEE00 !important;
			}
	
html body	{
			/* ORANGE
			 * specificity => 0,0,2 (002)
			 */
			background-color:	#FF9900;
			}
			
body		{
			/* BLAU
			 * specificity => 0,0,1 (001)
			 */
			background-color:	#0099FF !important;
			}
			
body		{
			/* ROT
			 * specificity => 0,0,1 (001)
			 */
			background-color:	#FF0000;
			}

#wichtig	{
			/* GRÜN
			 * specificity => 1,0,0 (100)
			 */
			background-color:	#00EE00;
			}

body#wichtig
			{
			/* SCHWARZ
			 * specificity => 1,0,1 (101)
			 */
			background-color:	#111111;
			}

.test		{
			/* GRAU
			 * specificity => 0,1,0 (010)
			 */
			background-color:	#CCCCCC !important;
			}	

/*]]>*/ 
</style> 

</head>

<body id="wichtig" class="test">



Hier sollte laut CSS 2.1 Specification ein komplett grauer Hintergrund zu sehen sein</p>

</body></html>

Swoop · #2 (**permalink**) 10.10.2005, 11:25

seit http://www.stuffandnonsense.co.uk/ar...city_wars.html

hat das Thema sicher an Aktualität gewonnen..

opera 8.50
und IE 5.01 und IE 5.5 könnens auch

ulle · #3 (**permalink**) 10.10.2005, 13:10

Danke, Swoop !

Legen wir nun zugrunde dass der IE die important-rule nicht versteht, oder etwa doch (?), so müßte doch zumindest selector's specificity funktionieren. Bisher hatte ich noch nicht Gegenteiliges gehört/gelesen. Verändert man den CLASS-Selektor entsprechend eines gängigen Workarounds so müßte zumindest alles andere an Hintergrundfarbe zu sehen sein als mein Ergebnis

BLAU (IE6)

Code:

.test		{
			/* GRAU
			 * specificity => 0,1,0 (010)
			 */
			background-color:	#CCCCCC !important;

			/* WEISS
			 * specificity => 0,1,0 (010)
			 */
			background-color:	#FFFFFF;
			}

ulle · #4 (**permalink**) 10.10.2005, 13:22

Weitere Tests meinerseits haben ergeben dass der IE sehr wohl die important-Regel versteht,
sofern diese nicht innerhalb des selben (nicht gleichen) Selektors steht.

Folgender CODE zeigt die Site in BLAU:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css">
/*<![CDATA[*/

*			{
			margin:	0;
			padding:0;
			}


html,
body		{
			height: 100%;
			
			/* GELB
			 * specificity => 0,0,1 (001)
			 */
			background-color:	#FFEE00 !important;
			}
	
html body	{
			/* ORANGE
			 * specificity => 0,0,2 (002)
			 */
			background-color:	#FF9900;
			}
			
body		{
			/* BLAU
			 * specificity => 0,0,1 (001)
			 */
			background-color:	#0099FF !important;
			}
			
body		{
			/* ROT
			 * specificity => 0,0,1 (001)
			 */
			background-color:	#FF0000;
			}

/*]]>*/ 
</style> 

</head>

<body id="wichtig" class="test">



Hier sollte laut CSS 2.1 Specification ein komplett blauer Hintergrund zu sehen sein</p>

</body></html>

Folgende Änderung zeigt die Site in GELB

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css">
/*<![CDATA[*/

*			{
			margin:	0;
			padding:0;
			}


html,
body		{
			height: 100%;
			
			/* GELB
			 * specificity => 0,0,1 (001)
			 */
			background-color:	#FFEE00 !important;
			}
	
html body	{
			/* ORANGE
			 * specificity => 0,0,2 (002)
			 */
			background-color:	#FF9900;
			}
			
body		{
			/* BLAU
			 * specificity => 0,0,1 (001)
			 */
			background-color:	#0099FF !important;

			/* ROT
			 * specificity => 0,0,1 (001)
			 */
			background-color:	#FF0000;
			}

/*]]>*/ 
</style> 

</head>

<body id="wichtig" class="test">



Hier sollte laut CSS 2.1 Specification ein komplett blauer Hintergrund zu sehen sein</p>

</body></html>

Soviel zum Internet Explorer.

Ich würde mich freuen wenn der Eingangs im THREAD erwähnte CODE noch in anderen Browsern (z.B.Safari) getestet werden würde.

DANKE

Swoop · #5 (**permalink**) 10.10.2005, 17:31

safari 2.0 machts auch, wie zu erwarten war..

Floele · #6 (**permalink**) 10.10.2005, 17:52

Zitat:

Zitat von ulle

Weitere Tests meinerseits haben ergeben dass der IE sehr wohl die important-Regel versteht,
sofern diese nicht innerhalb des selben (nicht gleichen) Selektors steht.

Das habe ich letztens auch schon gemerkt als ich einfach aus (und ähnlichem)

Code:

a {
color:red !important;
color:blue;
}

Code:

a {
color:ref !important;
}

* html a {
color:blue;
}

machen wollte. Musste also noch ein !important bei * html a hinzu.

IE 4.0 besteht den Test übrigens auch, sowie (logischerweise) Firefox 1.5. Opera 7.22 kann es auch.

E|H · #7 (**permalink**) 11.10.2005, 00:54

Wenn ich das richtig verstanden hab’, dann versteh’ ich es nicht:

Eine höhere Spezifität überschreibt important?

Wieso wird dann das erste Beispiel grau und nicht schwarz?

netspy · #8 (**permalink**) 11.10.2005, 01:16

Zitat:

Zitat von ulle

bisher dachte ich dass die important-rules sich nur durch User-StyleSheets überschreiben lassen.

Seit CSS2 gewinnt eine !important-Regel des Nutzers gegen die gleiche Regel des Autors. In CSS1 war das noch nicht so.

Zitat:

Zitat von ulle

Nun habe ich festgestellt es geht auch mit einer höheren selector's specificity

Eine !important-Regel gewinnt immer gegen jede andere Deklaration, egal wie hoch die Spezifität ist.

Mario

ulle · #9 (**permalink**) 11.10.2005, 10:17

Zusammfassend ist zu sagen:

Alle gängigen Browser beherrschen die Spezifität und die !important-Regel !!

Zitat:

Zitat von Netspy

Eine !important-Regel gewinnt immer gegen jede andere Deklaration, egal wie hoch die Spezifität ist.

Richtig, und eine !important-Regel läßt sich mit einer !important-Regel einer höheren Spezifität überschreiben.

netspy · #10 (**permalink**) 11.10.2005, 10:41

Zitat:

Zitat von ulle

... und eine !important-Regel läßt sich mit einer !important-Regel einer höheren Spezifität überschreiben.

Darauf würde ich aber nicht bauen. In den Specs finde ich nichts, was dieses Verhalten so vorschreibt. !important-Regeln sind ja eigentlich unabhängig von der Spezifität und ich hätte dann auch erwartet, dass die letzte Regel gewinnt. Keine Ahnung, wie sich das W3C das wirklich gedacht hat. Vielleicht wird es ja in CSS3 mal etwas präziser definiert.

Mario

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
rahmen um bilder- was mache ich falsch?	R0sa	CSS	3	19.11.2012 16:35
Myspace problem... Rechte Säule verschiebt sich im IE.	calledmarcel	CSS	1	27.02.2009 09:12
Float-Reihenfolge?	wolf1985	CSS	0	21.08.2008 01:35
Float - Probleme	wolf1985	CSS	5	19.08.2008 08:14
Footer left und right Probleme...	wolf1985	CSS	2	14.08.2008 13:04