zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden specificity + important rule || CrossBrowser

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.10.2005, 11:58
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard specificity + important rule || CrossBrowser

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>
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.10.2005, 12:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.032
Swoop befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.10.2005, 14:10
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #4 (permalink)  
Alt 10.10.2005, 14:22
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard


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
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 10.10.2005, 18:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.032
Swoop befindet sich auf einem aufstrebenden Ast
Standard

safari 2.0 machts auch, wie zu erwarten war..
Angehängte Grafiken
Dateityp: png safari.png (25,1 KB, 2440x aufgerufen)
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
  #6 (permalink)  
Alt 10.10.2005, 18:52
Benutzerbild von Floele
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.03.2005
Beiträge: 355
Floele befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 11.10.2005, 01:54
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 11.10.2005, 02:16
Benutzerbild von netspy
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 13.08.2004
Ort: Leipzig
Beiträge: 1.953
netspy sorgt für eine eindrucksvolle Atmosphärenetspy sorgt für eine eindrucksvolle Atmosphäre
Standard Re: specificity + important rule || CrossBrowser

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
__________________
AppDev Blog · AppDev Forum
Mit Zitat antworten
  #9 (permalink)  
Alt 11.10.2005, 11:17
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.10.2005, 11:41
Benutzerbild von netspy
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 13.08.2004
Ort: Leipzig
Beiträge: 1.953
netspy sorgt für eine eindrucksvolle Atmosphärenetspy sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
AppDev Blog · AppDev Forum
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:04 Uhr.