|
|||
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> |
Sponsored Links |
|
|||
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 |
Sponsored Links |
|
|||
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> |
|
|||
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> 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> 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> |
|
||||
Zitat:
Code:
a { color:red !important; color:blue; } Code:
a { color:ref !important; } * html a { color:blue; } IE 4.0 besteht den Test übrigens auch, sowie (logischerweise) Firefox 1.5. Opera 7.22 kann es auch.
__________________
CSS Optimierer und Formatierer (CSSTidy) |
|
||||
Re: specificity + important rule || CrossBrowser
Zitat:
Zitat:
Mario |
|
|||
Zusammfassend ist zu sagen:
Alle gängigen Browser beherrschen die Spezifität und die !important-Regel !! Zitat:
__________________
</ulle> |
Sponsored Links |
|
||||
Zitat:
Mario |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |