Wiki-Artikel „Kaskade“ / Spezifität von "style="

[Michael Sy.]

Hallo Team,

auf https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade steht geschrieben:

"Werden Eigenschaften in einem style-Attribut festgelegt, so ist diese Eigenschaft spezifischer als jeder Regelsatz in einem Stylesheet."

Das ist meines Wissens nicht ganz korrekt. Die !important-Kennzeichnung hat noch eine höhere Spezifität als "style=". Vergleiche http://www.standardista.com/css3/css-specificity/ (Übrigens das Beste, was ich jemals zum Thema CSS-Spezifität gefunden habe.)

Es müsste also wohl heißen:

"Werden Eigenschaften in einem style-Attribut festgelegt, so ist diese Eigenschaft spezifischer als jeder Regelsatz in einem Stylesheet. (Es sei denn, es ist anderweitig eine !important-Kennzeichnung eingetragen.)"

Gruß - Michael Sy.

[Gunnar Bittersmann]

@@Michael Sy.

Die !important-Kennzeichnung hat noch eine höhere Spezifität als "style=".

Nein, bei Spezifität geht es um Selektoren.

Was es mit !important auf sich hat, wird im Abschnitt Ablauf der Kaskade erklärt.

LLAP 🖖

[Michael Sy.]

Danke für die Antwort. Ja in der Tat, auf diesen Punkt und Einwand bin ich mittlerweile auch schon gekommen. Allerdings ist dieser Punkt für diejenigen, die sich hier erst einlesen und einarbeiten wollen, so gut wie nicht zu verstehen und zu erkennen. Missverständliches Lesen ist bei blutigen Anfängern noch viel naheliegender als bei mir. Daher würde ich auf jeden Fall für einen entsprechenden Hinweis plädieren. Wie z.B.:

"(Kann aber dennoch über eine externe !important-Kennzeichnung überschrieben werden.)"

Just my 5 cents - Michael Sy.

[Matthias Apsel]

Hallo Michael Sy.,

blutige Anfänger sollten !important gar nicht erst kennenlernen.

Bis demnächst
Matthias

[Michael Sy.]

Hallo Matthias,

blutige Anfänger sollten !important gar nicht erst kennenlernen.

Bekommen das aber auf der fraglichen Seite noch vor der Spezifität präsentiert…

Gruß - Michael Sy.

[beatovich]

hallo

blutige Anfänger sollten !important gar nicht erst kennenlernen.

Warum nicht?

/* show faulty html */
a button,
button h1,
button h2,
button h3 { color:red !important; z-index:1000 !important; position:static !important; }

[Christian Kruse]

Hallo Matthias,

blutige Anfänger sollten !important gar nicht erst kennenlernen.

Natürlich sollten sie es kennen lernen. Es gehört zum Sprachumfang. Es ihnen zu verschweigen führt nur zu Vertrauensverlust. Besser aufklären, was es ist und warum man es vermeiden sollte.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Natürlich sollten sie es kennen lernen. Es gehört zum Sprachumfang.

Das ist keine Begründung. Anfänger müssen nicht den vollen Sprachumfang kennenlernen, sondern nur das Nötige. Aber ja, !important gehört da durchaus dazu.

Besser aufklären, was es ist und warum man es vermeiden sollte.

Nicht warum, sondern wann man es vermeiden sollte. Wie Harry Roberts zu sagen pflegt: „Never use !important in anger!“ Richtig eingesetzt ist !important ja ein nützliches Werkzeug.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Natürlich sollten sie es kennen lernen. Es gehört zum Sprachumfang.

Das ist keine Begründung.

Doch. Das hast du doch gerade gesehen. 😉

Anfänger müssen nicht den vollen Sprachumfang kennenlernen, sondern nur das Nötige.

Nein. Anfängern sollte man nicht alles auf einmal beibringen, aber man sollte ihnen alles beibringen.

LG,
CK

[Matthias Apsel]

Hallo Christian Kruse,

Anfänger müssen nicht den vollen Sprachumfang kennenlernen, sondern nur das Nötige.

Nein. Anfängern sollte man nicht alles auf einmal beibringen, aber man sollte ihnen alles beibringen.

Ja. Auf dem Weg vom Anfänger zum Experten.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Christian Kruse

Anfängern sollte man nicht alles auf einmal beibringen, aber man sollte ihnen alles beibringen.

Alles? Ich würde nicht sagen, dass ich schon alles wüsste. Da bin ich wohl noch Anfänger.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Anfängern sollte man nicht alles auf einmal beibringen, aber man sollte ihnen alles beibringen.

Alles? Ich würde nicht sagen, dass ich schon alles wüsste. Da bin ich wohl noch Anfänger.

Wer ist das nicht?

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Anfängern sollte man nicht alles auf einmal beibringen, aber man sollte ihnen alles beibringen.

Alles? Ich würde nicht sagen, dass ich schon alles wüsste. Da bin ich wohl noch Anfänger.

Wer ist das nicht?

Wer weiß …

LLAP 🖖

[Matthias Apsel]

Hallo Christian Kruse,

blutige Anfänger sollten !important gar nicht erst kennenlernen.

Natürlich sollten sie es kennen lernen. Es gehört zum Sprachumfang. Es ihnen zu verschweigen führt nur zu Vertrauensverlust. Besser aufklären, was es ist und warum man es vermeiden sollte.

Ich störe mich eigentlich nur am Begriff des blutigen Anfängers. Guter CSS-Stil kommt ohne !important aus.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Guter CSS-Stil kommt ohne !important aus.

Guter CSS-Stil setzt !important sinnvoll™ ein.

Gegen :lang(tlh) { text-transform: none !important } u.dgl. ist nichts einzuwenden.

LLAP 🖖

[beatovich]

hallo

Ich störe mich eigentlich nur am Begriff des blutigen Anfängers. Guter CSS-Stil kommt ohne !important aus.

Ich fühle mich ignoriert! https://forum.selfhtml.org/self/2018/jul/6/wiki-artikel-kaskade-strich-spezifitaet-von-style-gleich/1726099#m1726099

[klawischnigg]

Hi there,

Ich störe mich eigentlich nur am Begriff des blutigen Anfängers. Guter CSS-Stil kommt ohne !important aus.

Zum blutigen Anfänger kann ich nichts sagen, aber was da hier manchmal an abgehobenem Unsinn verzapft wird, das geht auf keine Kuhhaut mehr. Das ist alles bloße Theorie. !important ist total important, wenn man bestehende Styleanweisungen bearbeiten muß und kann ein großer Zeitgewinn sein, wenn man sich durch tausende Zeilen fressen muß. Ob das guter Stil ist oder nicht, ist völlig wurscht. Kein Mensch bezahlt gute Haltungsnoten beim Erstellen von Stylesheets…

[Gunnar Bittersmann]

@@klawischnigg

Kein Mensch bezahlt gute Haltungsnoten beim Erstellen von Stylesheets…

Schlecht wartbarer Code kommt einen aber teuer zu stehen. Die Haltungsnoten gibt’s nicht allein für Ästhetik, sondern sie drücken die Effizienz aus, mit der Änderungen möglich sind. Von daher: nein zu deiner Aussage.

LLAP 🖖

[Christian Kruse]

Hallo klawischnigg,

Ich störe mich eigentlich nur am Begriff des blutigen Anfängers. Guter CSS-Stil kommt ohne !important aus.

Zum blutigen Anfänger kann ich nichts sagen, aber was da hier manchmal an abgehobenem Unsinn verzapft wird, das geht auf keine Kuhhaut mehr. Das ist alles bloße Theorie. !important ist total important, wenn man bestehende Styleanweisungen bearbeiten muß und kann ein großer Zeitgewinn sein, wenn man sich durch tausende Zeilen fressen muß.

Tut mir leid, aber das sehe ich grundlegend und völlig anders. Die Verwendung von !important hat im Endeffekt bisher immer mehr Zeit gekostet als vermeintlich gespart.

LG,
CK

[klawischnigg]

Hi there,

Tut mir leid, aber das sehe ich grundlegend und völlig anders. Die Verwendung von !important hat im Endeffekt bisher immer mehr Zeit gekostet als vermeintlich gespart.

Hängt eben wie beschrieben vom Verwendungsfall ab. Wenn ich ein Fremdstylesheet anpassen muß, soll heissen, irgendetwas was ein anderer geschrieben hat, dann hab ich keine Lust, mich durch uU tausende Zeilen Styleanweisungen zu wühlen. Ich geb' jenen Recht, die meinen !important braucht man nicht, wenn man ein Projekt selbst verfasst. Aber das ist eben nicht immer der Fall. Und - wenn man's nicht brauchte, warum gibt es !important dann? Anyway, ich find' einige Diskussion hier wirklich ziemlich praxisfremd - ich schreib halt lieber Rechnungen als über guten Stil und Haltungsnoten nachzudenken…

[Christian Kruse]

Hallo klawischnigg,

Tut mir leid, aber das sehe ich grundlegend und völlig anders. Die Verwendung von !important hat im Endeffekt bisher immer mehr Zeit gekostet als vermeintlich gespart.

Hängt eben wie beschrieben vom Verwendungsfall ab.

Ne, eben nicht. Ich habe dir ja widersprochen 😉

Wenn ich ein Fremdstylesheet anpassen muß, soll heissen, irgendetwas was ein anderer geschrieben hat, dann hab ich keine Lust, mich durch uU tausende Zeilen Styleanweisungen zu wühlen.

Dass du da keine Lust zu hast, glaube ich dir gerne. Meiner Erfahrung nach ist das trotzdem der einzige Weg, der nicht noch mehr Probleme verursacht.

LG,
CK

[Rolf B]

Hallo Christian,

jein. Wenn Du ein Projekt aus einer Hand zimmerst, wirst Du !important sicherlich durch gute Planung vermeiden können. Aber leider ist die Welt nicht immer so wohlstrukturiert.

Zum einen kommt man durch !important an eine andere Stelle der Vorrangkette (User Agent -> User -> Autor -> Autor !important -> User !important), und das kann bei Konstruktion eines User-Stylesheet wichtig sein.

Zum anderen kann es ein Sammelsurium an Style-Quellen geben. Wenn ich eine fertige CSS Datei einbinden muss, die nicht für mein Projekt gebaut wurde sondern übergreifend gedacht ist (Styles für irgendwelche Widgets), und ich darin 2-3 Stellen tweaken will, dann mache ich das nicht per Editor oder File-Patcher. Dann ist ein Extra-CSS mit ein paar gut gezielten !important Einträgen sinnvoll.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wenn Du ein Projekt aus einer Hand zimmerst, wirst Du !important sicherlich durch gute Planung vermeiden können.

Nochmal: Gute Planung beïnhaltet !important und schließt es nicht aus.

LLAP 🖖

[Matthias Apsel]

Hallo Michael Sy.,

"(Kann aber dennoch über eine externe !important-Kennzeichnung überschrieben werden.)"

Heißt jetzt: "(Regeln mit !important können innerhalb von style-Attributen nur durch die Verwendung von !important überschrieben werden)." Geht bestimmt noch besser.

Bis demnächst
Matthias

[Michael Sy.]

Hallo Matthias,

vielen Dank erst einmal für den Eintrag ins Wiki. Und auch ein ausdrückliches Dankeschön an alle, die SELFHTML maßgeblich vorantreiben oder sonstwie mitarbeiten. Ist eine tolle Sache und ich habe schon sehr oft davon profitiert! Ich versuche hier nur einen kleinen kontruktiven Beitrag leisten...

(Regeln mit !important können innerhalb von style-Attributen nur durch die Verwendung von !important überschrieben werden)

Dieser Satz ist natürlich inhaltlich korrekt, aber er trifft nicht das, worauf ich eigentlich hinweisen wollte.

"Werden Eigenschaften in einem style-Attribut festgelegt, so ist diese Eigenschaft spezifischer als jeder Regelsatz in einem Stylesheet."

IMHO liest sich das (wenn man sich nicht ohnehin schon gut auskennt und wenn man nicht ganz genau haarscharf nachliest) so, als können style-Attribute nicht durch Stylesheets überschrieben werden. Mein Ziel war und ist es, diesem Eindruck entgegenzuwirken.

Ich modifiziere meinen Vorschlag auf:

"(Kann aber dennoch von einem Stylesheet mittels einer !important-Kennzeichnung überschrieben werden.)"

Gruß - Michael Sy.

[Matthias Apsel]

Hallo Michael Sy.,

Ich modifiziere meinen Vorschlag auf:

"(Kann aber dennoch von einem Stylesheet mittels einer !important-Kennzeichnung überschrieben werden.)"

Was ist denn als Autor (allermeistens) das Ziel?

a) Mit style-Attributen für ein konkretes Element ausnahmsweise das Stylesheet zu überschreiben? (Weil etwa ein Link für eine Woche anders aussehen soll, als die anderen)
b) Mit einem Stylesheet Angaben von style-Attributen zu überschreiben?

Bis demnächst
Matthias

[Michael Sy.]

Was ist denn als Autor (allermeistens) das Ziel?

Aus meiner Sicht ist das hier keine relevante Frage, da es nicht um die Formulierung eines HOW-TOs geht, sondern um eine Einführung in die CSS-Kaskade und -Spezifität. Es gilt also, zu vermitteln, wie CSS an dieser Stelle grundsätzlich funktioniert. Und erst dann, wenn der Leser dieses einigermaßen verstanden hat, kann er sich als CSS-Autor sinnvollerweise irgendwelche Ziele setzen.

Wir haben da offenbar sehr unterschiedliche und schwer zu vereinbarende Herangehensweisen.

Gruß - Michael Sy.

[Rolf B]

Hallo,

die Specs machen es einem hier schwer, alle relevanten Regeln zusammenzutragen, weil sie verteilt auf mehrere Specs sind.

Ganz wichtig scheint mir ein Satz aus dieser Quelle:

style attribute (...) In the cascade, these declarations are considered to have author origin and a specificity higher than any selector.

Entscheidend ist: "AUTHOR Origin". Das bedeutet für mich, dass ein !important in einem Style-Attribut durch ein !important mit hinreichender Spezifität auf den "unteren" Levels im User-Stylesheet überschrieben werden kann. Ich habe nur gerade keine Gelegenheit, das zu testen. Und ich weiß auch nicht, wieweit das die Welt interessiert; wie häufig sind User-Stylesheets?

Beim style-Attribut sollte also stehen:

Eigenschaften, die in einem style-Attribut festgelegt werden, gelten als vom Autor festgelegte Eigenschaften und haben eine höhere Spezifität als Eigenschaften, die in einer Stylesheet-Regel gesetzt werden. Eine als !important gekennzeichnete Eigenschaft in einem Autoren-Stylesheet kann durch !important im style-Attribut überschrieben werden.

Wichtig finde ich hier die Formulierung in einem Autoren-Stylesheet, damit wird klar, dass ein !important in einem User-Stylesheet immer Vorrang hat.

Die Grundreihenfolge ist also Browser - User - Autor, und auf der !important-Ebene kehrt sich diese Priorität um: Erst Autor, dann User. Vielleicht kann man das durch ein 6-stufiges Spezifitätstupel darstellen:

1. Eigenschaft ist !important: 1, sonst 0
2. Herkunft ist style-Attribut: 1, sonst 0
3. ID
4. Attribut, Klasse
5. Typ, Pseudoelement
6. Herkunft: 0=Browser, 1=User (nicht important), 2=Autor, 3=User (important)

Und erst dann, wenn sich hierüber kein Vorrang feststellen lässt, kommt die zeitliche Reihenfolge der Deklaration ins Spiel.

Stimmt das so?

Rolf

[beatovich]

hallo

Entscheidend ist: "AUTHOR Origin". Das bedeutet für mich, dass ein !important in einem Style-Attribut durch ein !important mit hinreichender Spezifität auf den "unteren" Levels im User-Stylesheet überschrieben werden kann. Ich habe nur gerade keine Gelegenheit, das zu testen. Und ich weiß auch nicht, wieweit das die Welt interessiert; wie häufig sind User-Stylesheets?

Sie sind omnipresent, beginnend bei der Festlegung von Standard-Schriftschnitt und Grössen.

[Michael Sy.]

Stimmt das so?

Ehrlich gesagt, ich kann deine Ausführungen nicht ganz nachvollziehen. Mag sein, dass sie richtig sind (manches scheint mir aber (nach meinem Kenntnisstand) auch nicht zu stimmen). Aber jedenfalls denke ich, dass man das ganze System auch deutlich einfacher erklären kann.

Für mich ist diese Grafik hier: http://www.standardista.com/css3/css-specificity/ das Maß aller Dinge, was die Erklärung der Gewichtungsberechnung von "Spezifität + !important" angeht. Die genannte Quelle behandelt !important als einen Teil der Spezifität, was ich aus didaktischen Gründen für sehr gelungen halte und sogar semantisch zu rechtfertigen ist. (Denn immerhin wird mit !important eine ganz bestimmte Eigenschaft-Attribut-Zuordnung spezifisch ausgezeichnet bzw. selektiert. Mit dem Umstand, dass das in den Specs nicht auf dieselbe Weise behandelt wird, kann ich aufgrund der sehr großen Erklärungskraft gut leben. (Wollten wir uns möglichst nahe an den Specs orientieren, könnte man sie ja einfach übersetzen.))

Soweit ich das in diesem Moment gerade überblicke, beziehen sich ja wohl alle anderen Spezifikationen darauf, welche Rangfolge gilt, wenn eben diese Gewichtungsberechnung für zwei Eigenschaften-Zuordnungen auf dasselbe Element denselben Wert ergibt.

Gruß - Michael Sy.

[beatovich]

hallo

Stimmt das so?

Ehrlich gesagt, ich kann deine Ausführungen nicht ganz nachvollziehen. Mag sein, dass sie richtig sind. Aber jedenfalls denke ich, dass man das ganze System auch deutlich einfacher erklären kann.

Für mich ist diese Grafik hier: http://www.standardista.com/css3/css-specificity/ das Maß aller Dinge,

Wie es so schön heisst:

ein alt-Text sagt mehr als 1000 Worte

[Gunnar Bittersmann]

@@Michael Sy.

Für mich ist diese Grafik hier: http://www.standardista.com/css3/css-specificity/

Immer wieder gern gesehen.

Die genannte Quelle behandelt !important als einen Teil der Spezifität

Nö. Sie stellt !important hintendran. 1-0-0-0-0 (fünf Zahlen, was es so nicht gibt) lässt schon erahnen, wie ernsthaft das gemeint ist.

was […] sogar semantisch zu rechtfertigen ist. (Denn immerhin wird mit !important eine ganz bestimmte Eigenschaft-Attribut-Zuordnung spezifisch ausgezeichnet bzw. selektiert.

Spezifität bezieht sich per Definition auf Selektoren [CSS 2.2, Selectors 4], nicht auf Deklarationen (Eigenschaft-Wert-Paare; „Wert“, nicht „Attribut“).

Mit dem Umstand, dass das in den Specs nicht auf dieselbe Weise behandelt wird, kann ich aufgrund der sehr großen Erklärungskraft gut leben. (Wollten wir uns möglichst nahe an den Specs orientieren, könnte man sie ja einfach übersetzen.))

Man kann (und sollte) sicher in Erklärungen für Anfänger Dinge vereinfachen. Was man aber nicht tun sollte: Fachbegriffe (wie hier „Spezifität“) mit einer anderen Bedeutung versehen. Das geht bei Hotti (pl) hier im Forum regelmäßig schief.

LLAP 🖖

[Michael Sy.]

Die genannte Quelle behandelt !important als einen Teil der Spezifität Nö. Sie stellt !important hintendran. 1-0-0-0-0 (fünf Zahlen, was es so nicht gibt) lässt schon erahnen, wie ernsthaft das gemeint ist.

Doch, das tut sie. Unter der Überschrift "Selector Specificity Weights" wird !important als erster Punkt aufgeführt. Eindeutiger geht's nicht. Und ich glaube auch nicht, dass das scherzhaft gemeint ist...

Manchmal heiligt der Zweck eben doch die Mittel. Wenn man möglichst verständlich werden will, muss man schon mal die letzte logische Präzision über Bord werfen - ist jedenfalls meine Meinung und Erfahrung. Außerdem ist Sprache immer im Fluß. Begriffe verändern im Laufe ihres Gebrauchs ihre Bedeutung. Das ist ganz normal, weil sich auch die Welt immer weiter verändert, muss die Sprache sich anpassen. Und wer sagt uns, dass man in den CSS-Specs schon die optimalste aller möglichen Begriffsdefinitionen gefunden hat, um die "Mechanik" zu beschreiben, die zu definieren ist?

Sorry für das viele Gelaber... - Michael Sy.

[Gunnar Bittersmann]

@@Michael Sy.

Die genannte Quelle behandelt !important als einen Teil der Spezifität Nö. Doch

Oh!

Unter der Überschrift "Selector Specificity Weights" wird !important als erster Punkt aufgeführt. Eindeutiger geht's nicht.

“Any property declaration with the term !important takes highest precendence” (Hervorhebung von mir)

Precendence heißt nicht Spezifität.

Begriffe verändern im Laufe ihres Gebrauchs ihre Bedeutung.

Ja. Wenn du als einziger die Bedeutung von Begriffen veränderst, hast du aber ein Problem.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

“Any property declaration with the term !important takes highest precendence” (Hervorhebung von mir)

Precendence heißt nicht Spezifität.

precendence gibt es gar nicht. 😉

Bis demnächst
Matthias

[Michael Sy.]

@@Matthias Apsel:

precendence gibt es gar nicht. 😉

Sorry, dass ich dir das mitteilen muss, aber dich gibt es auch nicht...

Das Leben ist zu ernst, als es auch noch als ein solches zu nehmen - Michael Sy.

[Michael Sy.]

Unter der Überschrift "Selector Specificity Weights" wird !important als erster Punkt aufgeführt. Eindeutiger geht's nicht.

“Any property declaration with the term !important takes highest precendence” (Hervorhebung von mir)

Precendence heißt nicht Spezifität.

Gut ok, nach der Logik gehört dann also style=”” auch nicht zur Spezifität!:

"style=””: If the author includes style attribute on an element, the inline style will take precedence over any styles [...]"

Ja. Wenn du als einziger die Bedeutung von Begriffen veränderst, hast du aber ein Problem.

Nö, allenfalls die anderen...

Mit starrköpfigem Gruß 😉 - Michael Sy.

[Rolf B]

Hallo Michael,

ich habe jetzt nochmal etwas die Specs studiert, und ja, du hattest recht, was ich oben geschrieben habe war nicht ganz richtig.

Es gibt in den Specs zwei Definitionen von Spezifität: die 3D Definition aus dem Selectors-Modul. Von dort wird über "CSS Style Attributes" auf die CSS 2.1 Spec, Kapitel 6.4.3, verlinkt, und dort findet man die 4D Spezifikation, die dem Style-Attribut Vorrang einräumt.

Genau diese Spec trennt aber auch zwischen Vorrangigkeit (Precedence) und Spezifität. Die Vorrangigkeit ergibt sich aus Herkunft (Origin) und Wichtigkeit (Importance), und nur innerhalb einer Vorrangstufe gilt die Spezifität. Man KÖNNTE das durch ein 5D Tupel ausdrücken, dessen erster Wert die Vorrangstufe ist. Die Spec tut das aber nicht - obwohl sie sich bereits die Freiheit genommen hat, die 4D Erweiterung vorzunehmen. Der Grund dürfte sein, dass die beiden Extradimensionen voneinander abhängig sind: Angaben aus dem style-Attribut gelten als Author-Angaben und sind darum nur für bestimmte Herkünfte zulässig.

Besser wäre daher eine Erweiterung der ersten Stelle des 4D-Tupels, aber das kann man nicht so simpel mit einem Atombömbchen ausdrücken. Man braucht nämlich 7 Stufen, um Vorrangigkeit und style-Herkunft zu vereinigen (ni=non important): 0=Browser, 1=User ni, 2=Author ni, 3=style ni, 4=Author !i, 5=style !i, 6=User !i

Das wird dann aber arg unübersichtlich, möglicherweise hat die Spec es deshalb unterlassen.

Aber auch wenn es mit diesen 7 Stufen in 4D-Tupeln funktioniert: Das ist dann eine hausgemachte Definition, nicht die offizielle Spec. Fachbegriffe haben aber möglichst aus der Spec zu kommen.

Rolf

[Matthias Apsel]

Hallo Rolf B,

ich habe jetzt nochmal etwas die Specs studiert

So. Und was schreiben wir nun ins Wiki?

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

im Wiki sollten wir unter 1.1 etwas genauer werden, damit sich 1.1 und 2 nicht widersprechen. Es gibt 5 Stufen, nicht 3, und die Benutzer-Stylesheets liegen auf Rang 4 und 1 (wenn der Browser auf Rang 5 liegt). Vielleicht ist es auch sinnvoll, als erstes zu beschreiben dass es Vorrang und Spezifität gibt, und dann die Vorrang- und die Spezifitätsregeln erklären. Meine Versuche von oben sind vermutlich nicht Wiki-geeignet, sie sollten auch eher zeigen, dass es eben NICHT so einfach ist, wie Specifishity darstellt.

Da auch die CSS2.1 Spec auf 4D-Tupel eingeht, um Spezifität und style-Attribute zu verbinden, kann man das durchaus beibehalten.

Wenn man dann noch im style-Attribut darauf eingeht, dass diese Attribute zu den Autorenregeln gehören, ergibt sich die Überschreibungsmöglichkeit eigentlich ganz automatisch und diese Klammeranmerkung könnte sich erübrigen.

Und es ist ja im Lauf der Jahre noch viel komplizierter geworden. CSS3 geht ins Jahr 2001 zurück, und wenn man die Dokumentversionen betrachtet, hat sich die Kaskade seitdem hat deutlich erweitert. Aber wie man das ins Wiki packt, und mit Beispielen versieht - hmm.

Rolf

[Michael Sy.]

Hallo Rolf,

ist das wirklich alles so kompliziert, wie sich das bei dir liest? Das Konzept, das ich im Kopf habe ist erheblich einfacher und besteht einfach aus zwei Elementen:

1. http://www.standardista.com/css3/css-specificity/
2. Wenn die aus (1.) errechnete Priorität dieselbe ist, sticht die Reihenfolge, wie du es wohl nennst die "zeitliche" [*1]

(Natürlich sind diese beiden Punkte keine vollständige Spezifikation. Z.B. fehlt das Konzept (das zumindest in meinem Kopf existiert), dass bei der Reihenfolge der Browser ganz am Anfang steht und schon durch jeden kleinen Pups - z.B. dem *-Selektor - überschrieben wird.)

Wenn meine Theorie zu simpel ist, um korrekt zu sein, dann gebe mir bitte ein konkretes Beispiel, bei dem meine Theorie einen Fehler produziert.

Bin gespannt auf die Antwort – Michael Sy.

[*1] Da hier so viel Wert auf korrekte Begriffe gelegt wird: CSS ist keine prozedurale, sondern eine deskriptive Auszeichnungssprache und daher ist die Reihenfolge auch keine zeitliche. (Zugegebenermaßen merkt man das aber erst richtig, wenn man z.B. über LESS programmiert.)

[Rolf B]

Hallo Michael,

zeitliche Reihenfolge meint die Reihenfolge, in der der Browser die Deklaration antrifft. Was er später findet, hat Vorrang wenn anderweit kein Vorrang bestimmbar ist.

Dass SpeciFISHity unvollständig ist, weil es die Regelquelle außer Acht lässt, hatte ich dargelegt, und das merkst Du nun ja auch selbst übelriechend an: ein * Selektor, der eigentlich überhaupt keine Spezifität hat, überschreibt trotzdem das User Agent Stylesheet. Weil ein Autoren-Stylesheet die höhere Vorrangstufe hat.

Deine Hypothese kommt in dem Moment in Schwierigkeiten, wo User-Stylesheets hinzukommen, also CSS Dateien die der Browser auf Wunsch des Users als Erweiterung des Browser-Stylesheet einbindet. Und zweitens geht SpeciFISHity nicht darauf ein, dass es (auch ohne User-Stylesheets) bei !important die Atom- und Wasserstoffbombe gibt: !important in der CSS Datei und !important im style-Attribut.

Rolf

[Michael Sy.]

Hallo Rolf,

ein * Selektor, der eigentlich überhaupt keine Spezifität hat, überschreibt trotzdem das User Agent Stylesheet

Ist dem wirklich so? Glaube ich nicht. Meinte ich auch nicht so. Mit "Browser" meinte ich nur die Grundeinstellungen, die der Browser von sich aus schon mitbringt.

Das User-Agent–Stylesheet war mir bislang mehr oder weniger unbekannt. Ich ordne dies in meiner Theorie unter Punkt (2.) ein. Und es steht dort zwischen den Browsergrundeinstellungen und dem Stylesheet + Inline-Style (also dem. was ich also als Programmierer der Webseite überhaupt beeinflussen kann.)

Und ich gehe davon aus, dass im User-Agent-Stylesheet alles nach SpeciFISHity berechnet und berücksichtigt wird.

Und zweitens geht SpeciFISHity nicht darauf ein, dass es bei !important die Atom- und Wasserstoffbombe gibt: !important in der CSS Datei und !important im style-Attribut.

Ich meine, hier irrst du dich. Die Definition über style= wird doch ausdrücklich berücksichtigt. Ergebnis der SpeciFISHity-Berechnung: ein !import im style-Statement kann nicht mehr von "draußen" überschrieben werden. Ist das nicht korrekt?

Ich kann nun nicht gerade behaupten, dass ich das alles, was ich hier so schreibe, mit Bestimmtheit weiß. Es ist halt die Theorie, die ich mir im Laufe meiner Praxis angeeignet habe und sie erscheint mir sinnig. Auch in dem Sinne "sinnig", weil ich nicht wüsste, warum man es irgendwie anders und damit komplizierter machen sollte.

Im Zweifelsfall müsste man (ich) den Nachweis über eine konkrete Demo-Webseite erbringen.

Gruß - Michael Sy.

[Gunnar Bittersmann]

@@Michael Sy.

Das User-Agent–Stylesheet […] steht dort zwischen den Browsergrundeinstellungen und dem Stylesheet + Inline-Style

Das User-Agent–Stylesheet sind die Browsergrundeinstellungen.

Bspw. sowas wie

ol, ul
{
	margin: 1em 0;
	padding-left: 40px;
}

ein * Selektor, der eigentlich überhaupt keine Spezifität hat, überschreibt trotzdem das User Agent Stylesheet

Ist dem wirklich so? Glaube ich nicht.

Klar ist dem so.

*
{
	margin: 0;
	padding-left: 0;
}

im Autoren-Stylesheet (nicht, dass man solche einen Reset verwenden sollte) überschreibt die Angaben aus dem User-Agent–Stylesheet – trotz geringerer Spezifität des Selektors.

Nach deiner Theorie, dass das User-Agent–Stylesheet einfach nur vor dem Autoren-Stylesheet stünde, müssten ol und ul ihre Außen- und Innenabstände aus dem User-Agent–Stylesheet behalten. Tun sie aber nicht. Herkunft der Regeln sticht Spezifität.

LLAP 🖖

[Michael Sy.]

Das User-Agent–Stylesheet sind die Browsergrundeinstellungen.

Ok, klar, wenn dem so ist, dann sind natürlich auch alle meine Folgerungen bzw. Mutmaßungen quatsch gewesen - keine Frage!

Meine simple 2-Punkte-Theorie wird davon aber nicht berührt. Nur insofern, als dass ich das sogenannte "User-Agent-Stylesheet" (in meiner Theorie) nicht als Stylesheet bezeichnen würde. Es sind (in meiner Theorie) einfach die Grundeinstellungen, die schlicht von allen sonstigen CSS-Regeln überschrieben werden. Diesen Grundeinstellungen durch ihre Ersatzdarstellung mittels einer CSS-Stylesheet-Form gewissermaßen erst eine Spezifität zuzuorden, um dann gleich im nächsten Atemzuge zu sagen, dass durch eine andere Herkunft der Zuweisungen diese Spezifität wieder ausgestochen wird (und zwar in jedem Fall!), das halte ich für eine unnötig verkomplizierte Darstellung einer eigentlich sehr einfachen Sache. Die Browsergrundeinstellungen haben für mich überhaupt gar keine Spezifität, noch nicht einmal die der Stufe 0-0-0, da diese Einstellungen immer schon da sind und nicht erst irgendwie vorgenommen werden müssen (soll heißen, sie müssen gar nicht erst adressiert werden).

Oder habe ich vielleicht wieder etwas falsch verstanden?

Gute Nacht! - Michael Sy.

[Matthias Apsel]

Hallo Michael Sy.,

Oder habe ich vielleicht wieder etwas falsch verstanden?

Vielleicht. Die Spezifität kommt erst bei Regeln derselben Herkunft (Browser - Autor - Nutzer) zum Tragen.

Auch in den Browser- oder Default-Stylesheets gibt es Regeln verschiedener Speziftät.

/* tables */

table {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
  /* XXXldb do we want this if we're border-collapse:collapse ? */
  box-sizing: border-box;
  text-indent: 0;
}

table[align="left"] {
  float: left;
}

table[align="right"] {
  float: right;
  text-align: start;
}

(Firefox, resource://gre-resources/html.css)

Bis demnächst
Matthias

[Michael Sy.]

Hallo Matthias,

resource://gre-resources/html.css

Ok, sehr interessant, kannte ich noch nicht. Es gibt also doch so etwas wie ein User-Agent-Stylesheet.

Kann man diese "Datei" auch editieren? Hab eben mal nachgeschaut, scheint nicht als einzelne Datei vorzuliegen, sondern befindet sich offenbar in einer Container-Datei.

Gruß - Michael Sy.

[Rolf B]

Hallo Michael,

nein, dafür sind die User-Stylesheets da. Firefox konnte das mal, ob er es seit dem Quantum-Sprung noch kann musst Du gucken. Chrome kann es angeblich seit Version 32 gar nicht mehr. D.h. da steht was in der Spec, was von den Browserherstellen ungern unterstützt wird.

Windows: %APPDATA%\Mozilla\Firefox, dort in den Profilordner, dort in den Ordner chrome (was nix mit Google zu tun hat) und dort userChrome.css oder userContent.css anlegen

Quelle

Rolf

[Michael Sy.]

Hallo Rolf, vielen Dank für die Info - Michael Sy.

[Gunnar Bittersmann]

@@Michael Sy.

als dass ich das sogenannte "User-Agent-Stylesheet" (in meiner Theorie) nicht als Stylesheet bezeichnen würde. […] das halte ich für eine unnötig verkomplizierte Darstellung einer eigentlich sehr einfachen Sache.

Im Gegenteil, Browsergrundeinstellungen als Stylesheet aufzufassen vereinfacht die Sache. Browsergrundeinstellungen sind nicht irgendwas Exotisches, sondern auch einfach nur ein weiteres Stylesheet. Alles spricht dieselbe Sprache: CSS.

Dasselbe gilt für Nutzerstylesheets — egal ob die nun als Datei vorliegen oder per GUI generiert werden.

LLAP 🖖

[Michael Sy.]

@@Gunnar Bittersmann

Im Gegenteil, Browsergrundeinstellungen als Stylesheet aufzufassen vereinfacht die Sache. Browsergrundeinstellungen sind nicht irgendwas Exotisches, sondern auch einfach nur ein weiteres Stylesheet.

Na gut, wie man oben nachlesen kann, habe ich ja mittlerweile schon wieder einiges hinzugelernt. Insofern möchte ich nicht mehr unbedingt auf meinem o.a. Standpunkt beharren.

Allerdings frage ich mich, was daraus für mich als Website-Programmierer in der Praxis folgt, wenn ich deiner Sichtweise folge? Das Problem ist doch, dass ich (nahezu) keinerlei Kenntnisse davon habe, welche Browser-spezifischen Stylsheets vorliegen. Ganz im Gegenteil muss (oder sollte) ich doch mit solchen Sachen wie z.B. normalize.css dafür sorgen, dass ich (vermeintlich und hoffentlich) auf der Browserseite möglichst dieselben Bedingungen habe. Was der Browser-Nutzer dann daraus macht, da kann ich doch nur die Achseln zucken und sagen: egal was er macht, ER muss ja damit leben…

(Vielleicht folgt aus deinem Standpunkt, nun erst recht auf den Einsatz von !important zu verzichten. Aber das tue ich ohnehin schon.)

Gruß - Michael Sy.

[Gunnar Bittersmann]

@@Michael Sy.

Das Problem ist doch, dass ich (nahezu) keinerlei Kenntnisse davon habe, welche Browser-spezifischen Stylsheets vorliegen.

Firefox bspw. zeigt diese an, wenn du in den Einstellungen des Entwicklerwerkzeugs den Haken bei

setzst. Beispiel:

Ganz im Gegenteil muss (oder sollte) ich doch mit solchen Sachen wie z.B. normalize.css dafür sorgen, dass ich (vermeintlich und hoffentlich) auf der Browserseite möglichst dieselben Bedingungen habe.

Reset-/Normalize-Stylesheets sind überbewertet, IMHO.

Und html { -webkit-text-size-adjust: 100%; } ist gar Unfug.

LLAP 🖖

[Michael Sy.]

@@Gunnar Bittersmann

Das Problem ist doch, dass ich (nahezu) keinerlei Kenntnisse davon habe, welche Browser-spezifischen Stylsheets vorliegen.

Firefox bspw. zeigt diese an, wenn du in den Einstellungen des Entwicklerwerkzeugs den Haken bei Inspektor > Browser-eigene Stile anzeigen setzst.

Ich dachte eigentlich, dass man aus dem Kontext entnehmen konnte, dass ich natürlich nicht meinen Browser meinte, sondern all die vielen Browser, auf denen die Webseiten angezeigt werden, die ich programmiere.

Gruß - Michael Sy.

[Matthias Apsel]

Hallo Michael Sy.,

Ich dachte eigentlich, dass man aus dem Kontext entnehmen konnte, dass ich natürlich nicht meinen Browser meinte, sondern all die vielen Browser, auf denen die Webseiten angezeigt werden, die ich programmiere.

1. siehe m1726349
2. Webseiten werden nicht programmiert 😝

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Michael Sy.,

Ganz im Gegenteil muss (oder sollte) ich doch mit solchen Sachen wie z.B. normalize.css dafür sorgen, dass ich (vermeintlich und hoffentlich) auf der Browserseite möglichst dieselben Bedingungen habe.

Nein. Erstens sind sich die meisten Browserstylesheets sehr ähnlich und zweitens muss eine Seite nicht in jedem Browser gleich aussehen.

Bis demnächst
Matthias

[Michael Sy.]

@@Gunnar Bittersmann

Reset-/Normalize-Stylesheets sind überbewertet, IMHO.

Und html { -webkit-text-size-adjust: 100%; } ist gar Unfug.

@@Matthias Apsel

[...] und zweitens muss eine Seite nicht in jedem Browser gleich aussehen.

Aua, aua - Design ist offenbar nicht so sehr euer Thema...

Also ich für meinen Teil hätte es am liebesten, wenn alle Internet-Nutzer dieselbe Grafikkarte benutzen und vor farbkalibrierten Monitoren sitzen würden.

Designer (auch wenn man wie ich nur ein Hobby-Designer ist) haben die Tendenz, möglichst jeden einzelnen Pixel höchstpersönlich setzen und steuern zu wollen. Es geht darum, die volle Kontrolle zu haben.

Gruß - Michael Sy.

[Matthias Apsel]

Hallo Michael Sy.,

Designer (auch wenn man wie ich nur ein Hobby-Designer ist) haben die Tendenz, möglichst jeden einzelnen Pixel höchstpersönlich setzen und steuern zu wollen.

Ich behaupte, auf Webdesigner trifft das nicht zu.

Es geht darum, die volle Kontrolle zu haben.

Dann ist das Web das falsche Medium für dich.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Michael Sy.

Aua, aua - Design ist offenbar nicht so sehr euer Thema...

Doch, meins schon. Und zwar Webdesign.

Also ich für meinen Teil hätte es am liebesten, wenn alle Internet-Nutzer dieselbe Grafikkarte benutzen und vor farbkalibrierten Monitoren sitzen würden.

Du hast das mit dem Web in Webdesign verstanden?

Designer (auch wenn man wie ich nur ein Hobby-Designer ist) haben die Tendenz, möglichst jeden einzelnen Pixel höchstpersönlich setzen und steuern zu wollen.

Das sind keine Webdesigner. Wenn es überhaupt Designer sind und nicht Dekorateure.

„Design ist nicht nur, wie es aussieht oder sich anfühlt. Design ist, wie es funktioniert.“ —Steve Jobs

Es geht darum, die volle Kontrolle zu haben.

Da das gar nicht möglich ist, kann es darum nicht gehen. Nicht beim Webdesign.

LLAP 🖖

[beatovich]

hallo

Es geht darum, die volle Kontrolle zu haben.

text/plain

[Gunnar Bittersmann]

@@beatovich

Es geht darum, die volle Kontrolle zu haben.

text/plain

Wie kontrolliert man da Schriftart und -größe, Zeilenlänge und -abstand?

LLAP 🖖

[beatovich]

hallo

@@beatovich

Es geht darum, die volle Kontrolle zu haben.

text/plain

Wie kontrolliert man da Schriftart und -größe, Zeilenlänge und -abstand?

Ich habe dich gerade davon befreit, dass DU von solchen Dingen kontrolliert wirst.

[Gunnar Bittersmann]

@@beatovich

Es geht darum, die volle Kontrolle zu haben.

text/plain

Wie kontrolliert man da Schriftart und -größe, Zeilenlänge und -abstand?

Ich habe dich gerade davon befreit, dass DU von solchen Dingen kontrolliert wirst.

Wenn dann sowas bei rauskommt wie Wikipedia („Folterkammer mit 8 Metern Satzbreite“ —Frank Rausch), dann gebe ich die Kontrolle gern an jemanden ab, der sich damit auskennt.

Und wo wir dabei sind: Das Layout des SELFHTML-Wikis ist kaum einen Deut besser.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Und wo wir dabei sind: Das Layout des SELFHTML-Wikis ist kaum einen Deut besser.

deutlich viele Deuts besser. Sogar um Gulden besser.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Und wo wir dabei sind: Das Layout des SELFHTML-Wikis ist kaum einen Deut besser.

−1 dafür‽ Das ist der Grund, warum ich das Wiki nicht ernstnehmen kann.

deutlich viele Deuts besser. Sogar um Gulden besser.

Ich hab jetzt mal eine beliebige Seite (Warum Layouts mit CSS? war’s) genommen und davon die erste Zeile (MacBook Pro 15ʺ):

Der „große Sinn von CSS“ besteht in der Trennung von Inhalt und Design. Das hört man oft, stellt sich nichts drunter vor und bastelt dann

Nachgezählt: 137 Zeichen. Einhundertsiebenunddreißig.

Willst du mir jetzt weismachen, es wären nicht „8 Meter Satzbreite“ wie bei Wikipedia, sondern nur 7½?

LLAP 🖖

[beatovich]

hallo

Ich hab jetzt mal eine beliebige Seite (Warum Layouts mit CSS? war’s) genommen und davon die erste Zeile (MacBook Pro 15ʺ):

Der „große Sinn von CSS“ besteht in der Trennung von Inhalt und Design. Das hört man oft, stellt sich nichts drunter vor und bastelt dann

Du brauchst definitiv einen schmaleren Bildschirm.

[Gunnar Bittersmann]

@@beatovich

Du brauchst definitiv einen schmaleren Bildschirm.

I’ve fixed it:

Ich brauche definitiv eine externe Tastatur.

LLAP 🖖

[beatovich]

hallo

Ich brauche definitiv eine externe Tastatur.

Die ist eigentlich für jeden Horizontalsurfer Pflicht.

[Gunnar Bittersmann]

@@beatovich

Ich brauche definitiv eine externe Tastatur.

Die ist eigentlich für jeden Horizontalsurfer Pflicht.

Is’ ja nicht wie bei arme Leute.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Und wo wir dabei sind: Das Layout des SELFHTML-Wikis ist kaum einen Deut besser.

−1 dafür‽

Ja. Für Missachtung und Herabwürdigung. Unabhängig davon, ob du es so gemeint hast, ist es bei mir so angekommen. Und es liegt nicht am frühen Zeitpunkt. Auch jetzt empfinde ich das noch so.

deutlich viele Deuts besser. Sogar um Gulden besser.

Willst du mir jetzt weismachen, es wären nicht „8 Meter Satzbreite“ wie bei Wikipedia, sondern nur 7½?

Nein, aber ich will dir weismachen, dass 60em ≪ ∞ ist.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

ich empfinde das Wiki als gut lesbar.

Aber ich verstehe die em-Skala nicht. "60em sind ok" - hieß es nicht so? Aber selbst bei Monospace sind 56em nicht 56 Zeichen.

<p class="mono">
....:....1....:....2....:....3....:....4....:....5....:....6....:....7<br>
Der „große Sinn von CSS“ (...) das ganze.</p>

<p>Der „große Sinn von CSS“ (...) das ganze.</p>

p { width: 56em; }
p.mono { font-family: monospace; }

Rolf

[Gunnar Bittersmann]

@@Rolf B

Aber ich verstehe die em-Skala nicht. "60em sind ok" - hieß es nicht so?

Nein. 60 Zeichen pro Zeile sind OK.

em bezieht sich auf die Schriftgröße, also die Höhe, nicht die Breite von Zeichen.

Übern Daumen gepeilt sind so etwa 30em 60 Zeichen. (Das hängt natürlich von der jeweiligen Schrift ab.)

Aber selbst bei Monospace sind 56em nicht 56 Zeichen.

Da sollten aber 56ch 56 Zeichen sein.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Aber selbst bei Monospace sind 56em nicht 56 Zeichen.

Da sollten aber 56ch 56 Zeichen sein.

Kam gerade übern Ticker: Eric Meyer: What is the CSS ‘ch’ Unit?

LLAP 🖖

[Gunnar Bittersmann]

@@Matthias Apsel

−1 dafür‽

Ja. Für Missachtung und Herabwürdigung. Unabhängig davon, ob du es so gemeint hast, ist es bei mir so angekommen.

Natürlich habe ich es so gemeint, dass die viel zu große Satzbreite im SELFHTML-Wiki ebenso wie bei Wikipedia den Text schlecht lesbar macht. Und ja, das ist eine Missachtung typografischer Regeln.

Wo du allerdings eine Herabwürdigung siehst …?

Man kann das Wiki besser machen wollen. Dazu müsste man aber Kritik annehmen. Und nicht persönlich nehmen.

Willst du mir jetzt weismachen, es wären nicht „8 Meter Satzbreite“ wie bei Wikipedia, sondern nur 7½?

Nein, aber ich will dir weismachen, dass 60em ≪ ∞ ist.

Um die Seite der Ungleichung geht es nicht. Sondern um 60em ≫ sinnvolle Satzbreite.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

ein Novum! Mark the day! 😉

Man kann das Wiki besser machen wollen. Dazu müsste man aber Kritik annehmen. Und nicht persönlich nehmen.

In diesem Fall muss ich dir zustimmen. Ich fand deine Kritik hier auch nicht herabwürdigend.

LG,
CK

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wikipedia („Folterkammer mit 8 Metern Satzbreite“ —Frank Rausch)

10:44 in seinem Vortrag auf der TYPO Berlin 2018

Der ganze Vortrag ist ansehenswert.

LLAP 🖖