CSS Parsing verstehen und beeinflussen?

[uli]

Hi,

ein CMSystem (PHP+div.Javascript Frameworks) realisieren eine Website.

Ich möchte mit externen Stylesheet welches über den Header jeder Seite eingebunden wird, jetzt diverse Elemente beeinflussen.

1. Was gibt es für Möglichkeiten das CSS Parsing EINFACH nachzuvollziehen? Wenn da also diverse CSS Angaben aus mehreren "Quellen" genutzt werden, - wie kann ich EINFACH die Lesereihenfolge (Parsing) SEHEN?

2. Gibt es eine Möglichkeit mit irgend einer mehr oder weniger globalen Angabe in einem Stylesheet andere CSS Angaben nicht zu "benutzen" - wenn ich "ja" nicht weiß in welcher Reihenfolge der Stylesheet geparst wird (Ich hoffe ihr versteht) ? Ich kenne hier nur die !important Regel für jede einzelne CSS Angabe, - welche eben auch für nachfolgend geparste Angaben "funktioniert".

Liebe Grüße

uli

[Gunnar Bittersmann]

@@uli:

nuqneH

1. Was gibt es für Möglichkeiten das CSS Parsing EINFACH nachzuvollziehen? Wenn da also diverse CSS Angaben aus mehreren "Quellen" genutzt werden

Wirkt die Kaskade.

wie kann ich EINFACH die Lesereihenfolge (Parsing) SEHEN?

Im Entwicklungswerkzeug deines Browsers.

Qapla'

[Baba]

1. Was gibt es für Möglichkeiten das CSS Parsing EINFACH nachzuvollziehen? Wenn da also diverse CSS Angaben aus mehreren "Quellen" genutzt werden, - wie kann ich EINFACH die Lesereihenfolge (Parsing) SEHEN?

Du kannst relative einfach sehen, welche Regel "wirkt" mit dem von Gunnar Bittersmann erwähnten Entwicklertool des Browsers. Beispiel: klicke auf ein Elemen mit d.r. Maustaste und wähle "Element untersuchen" oder ähnliches. Rechts stehen die Regeln. Oben die, die aktuell wirken (mit Angabe aus welchem Stylesheet sie stammen), weiter unten, durchgestrichen, die die überschrieben wurden. Wenn du die wirkende deaktivierst, siehst du, welche dann wirkt.

Einfachere Wege, die Reihenfolge zu sehen, kenne ich nicht.

2. Gibt es eine Möglichkeit mit irgend einer mehr oder weniger globalen Angabe in einem Stylesheet andere CSS Angaben nicht zu "benutzen" - wenn ich "ja" nicht weiß in welcher Reihenfolge der Stylesheet geparst wird (Ich hoffe ihr versteht) ? Ich kenne hier nur die !important Regel für jede einzelne CSS Angabe, - welche eben auch für nachfolgend geparste Angaben "funktioniert".

Du hast es richtig erkannt: die Reihenfolge von gleichwertigen Regeln entscheidet, wie das Element letztlich gestylt ist. Aber die Definition von gleichwertigen Regeln ist nicht die einzige Möglichkeit Styles zu definieren. Und auch kein besonders guter. Benutze eben Regeln anderer Spezifität (siehe verlinkter Artikel von Gunnar Bittersmann). Das bedetet zum Beispiel Klassen und Id's zu verwenden oder Elemente über Ihre Verschachtelung anzusprechen.

Beispiel: global könnte eine Liste so definiert sein:
ul{margin:0;}

Aber Listen in deinen Artikeln könnten anders aussehen:
ul.article{margin:10px;}

oder, und das spart Markup und ist auch von höherer Spezifität (und die schönste Lösung):
article ul{margin:10px;}

Die Antwort lautet also: nutze die Power von css (cascading(!) style sheet) und verbesser Deinen Code. Versuche !important zu vermeiden und Definitionen, die auf die Reihenfolge der Definitionen setzen.

Cheers,
Baba