Kann ich Inline-Style übersteuern?

[keinBlase]

Hallo

Kann ich via CSS ein Element mit Inline-Style übersteuern?

Ich habe folgendes Element:

<span class="outputMode" style="display: none;">TEXT</span>

Und in meiner CSS-Datei ganz am Schluss:
@media print {
 .outputMode{
   display: block;
   visibility:visible;
  }
}

Jedoch wird beim Ausdruck mein Span-tag nicht dargestellt, was mache ich falsch?

Gruss und dank

[Nick]

mach mal aus dem
display:block;
ein
display:block !important;

Nick

[Steel]

Hi!

@media print {
.outputMode{
   display: block;
   visibility:visible;
  }
}

Jedoch wird beim Ausdruck mein Span-tag nicht dargestellt, was mache ich falsch?

Geht denn ueberhaupt etwas, das mit @media print realisiert werden soll? Ich hab damit nie irgendwas erreicht und binde seitdem immer ein externes Druckstylesheets ein.

[Thomas Luethi]

Hallo,

Kann ich via CSS ein Element mit Inline-Style übersteuern?

Theoretisch: (IMHO) Nein. Gemäss den Regeln zur Spezifität (specificity)
hat ein Style-Attribut immer mehr Gewicht als irgendein Selektor in
einem zentralen CSS (z.B. im STYLE-Element im HEAD der HTML-Seite oder
in einer externen CSS-Datei).

Lies mal das Kapitel
6.4 The Cascade in CSS 2.0 / CSS 2.1 durch, insbesondere
6.4.1 Cascading order CSS 2.0 / CSS 2.1
6.4.2 !important rules CSS 2.0 / CSS 2.1
6.4.3 Specificity in CSS 2.0 / CSS 2.1 (Unterschiede!)

Und in SelfHTML: http://de.selfhtml.org/css/formate/kaskade.htm,
insbesondere die Abschnitte "Sortierung nach Ursprung und Priorität"
(mit IMHO recht freier Beschreibung der !important Regel) und
"Spezifität - Gewichtung der Selektoren".

Soweit ich die Spec. verstehe, ist !important eigentlich nur dazu gedacht,
im "Machtkampf" Autoren-/Benutzer-Stylesheet zum Einsatz zu kommen,
d.h. mit einer !important-Anweisung könntest Du als Autor die
Einstellung im Benutzer-Stylesheet übersteuern, es sei denn,
der Benutzer hat dort ebenfalls !important stehen, dann "gewinnt"
(seit CSS 2.0) das Stylesheet des Benutzers. (Recht so! ;-)

Du als Autor solltest eher mit der Spezifität arbeiten, um Deine eigenen
Angaben zu übersteuern. (Und sowieso Style-Attribute vermeiden,
da sie noch weitere Nachteile haben, insbesonderen, was die
Wartung betrifft. Bei Deinem genannten "Problem" würde ich
dem Element eine Klasse oder ID geben und für jeden Medien-Typ,
d.h. für screen und print, je ein eigenes externes Stylesheet
machen, wo Du die unterschiedlichen Definitionen festlegst.)

In der Praxis ist es allerdings möglich, mit !important in einem
zentralen CSS die Angaben in einem Style-Attribut zu übersteuern
(sofern diese nicht selbst !important enthalten), wie ich mit
einer kleinen Testseite feststellen konnte:
http://www.tiptom.ch/tests/css/style-vs-important.html

Vereinfachtes Beispiel:

Zentrales CSS:
p.spezial { color:red !important; background-color:yellow !important; }

HTML:
<p class="spezial" style="color:green; background-color:white;">
Es ist fraglich, wie dieser Text dargestellt wird.
</p>

Resultat:
Die Browser MS IE 6.0, Firefox 3.0 und Opera 9.27
übernehmen die Angaben aus dem zentralen CSS und zeigen den Text
in roter Farbe auf gelbem Hintergrund an.

Ich finde das nicht einleuchtend und denke, dass es gegen die
Spezifitäts-Regeln verstösst.
Und ich würde !important selbst nicht benutzen oder weiterempfehlen.

Freundliche Grüsse
Thomas

[Gunnar Bittersmann]

@@Thomas Luethi:

Lies mal das Kapitel
6.4 The Cascade in CSS 2.0 / CSS 2.1 durch, […]

Der einzige Sinn, noch auf CSS 2.0 zu verweisen, wäre IMHO, dies wegen der deutschen Übersetzung zu tun; hier zu Kapitel 6.4.

Ich finde das nicht einleuchtend und denke, dass es gegen die
Spezifitäts-Regeln verstösst.

Nein. „PRIMÄR werden die Deklarationen nach Gewichtung und Ursprung sortiert […] Die ZWEITE Sortierung erfolgt nach der Spezifität des Selektors […]“ [§6.4.1] (Hervorhebung von mir).

Die '!important'-Deklaration im Autorenstylesheet hat also höhere Gewichtung als die Angabe im 'style'-Attribut (was ebenfalls als Autorenstylesheet zu werten ist), obwohl dessen „Selektor“ höhere Spezifität hat.

Works as designed.

Und ich würde !important selbst nicht benutzen oder weiterempfehlen.

?? Wenn es nicht zur Anwendung gedacht wäre, wäre es nicht in die Spec aufgenommen worden. „Neben der Einstellung „!important“ für einzelne Deklarationen […]“ [ibid.]

Live long and prosper,
Gunnar

[Thomas Luethi]

Hallo Gunnar,

Danke für die hilfreichen Ausführungen und die Aufklärung.

Lies mal das Kapitel
6.4 The Cascade in CSS 2.0 / CSS 2.1 durch, […]

Der einzige Sinn, noch auf CSS 2.0 zu verweisen, wäre IMHO, dies wegen der deutschen Übersetzung zu tun; hier zu Kapitel 6.4.

Ich habe irgendetwas gegen diese Übersetzungen. (Was genau, habe ich
leider vergessen. Evtl. war es die Inkonsistenz, d.h. dass der gleiche
englische Fachbegriff mal so und mal so übersetzt wurde. Oder der
kommerzielle Beigeschmack mit der Bücher-Werbung. Wahrscheinlich
fände ich meine Meinung im Archiv wieder, wenn ich suchte...)

OK, die Autoren selbst empfehlen, dass man nur noch die 2.1
Version weiterempfehlen soll, obwohl sie noch nicht normativ ist.
Aber eben gerade beim hier besprochenen Thema gibt es deutliche
Unterschiede, darum habe ich beide Versionen verlinkt.
(Allerdings nicht beide Versionen in ihrer ganzen Länge durchgelesen...)

Ich finde das nicht einleuchtend und denke, dass es gegen die
Spezifitäts-Regeln verstösst.

Nein. „PRIMÄR werden die Deklarationen nach Gewichtung und Ursprung sortiert […] Die ZWEITE Sortierung erfolgt nach der Spezifität des Selektors […]“ [§6.4.1] (Hervorhebung von mir).

Die '!important'-Deklaration im Autorenstylesheet hat also höhere Gewichtung als die Angabe im 'style'-Attribut (was ebenfalls als Autorenstylesheet zu werten ist), obwohl dessen „Selektor“ höhere Spezifität hat.

Du hast recht. Ich habe 6.4.1 noch einmal gründlich durchgelesen
und es jetzt (hoffentlich) auch verstanden.

Nur in CSS 2.0 steht (beim Punkt 2 der Liste) der
einfache Satz:
  "!important" declaration override normal declarations.

Bei CSS 2.1 steht dann in Punkt 2:
  Sort according to importance (normal or important) and origin
 (author, user, or user agent). In ascending order of precendence:
   1. user agent declarations
   2. user normal declarations
   3. author normal declarations
   4. author important declarations
   5. user important declarations

D.h. wenn ich als Autor eine Definition mit !important auszeichne,
ist sie [4.] und somit wichtiger als eine Autoren-Definition
ohne !important [3.]

Und da erst in Punkt 3 die Spezifität als Kriterium vorkommt,
ist der Fall klar, dass !important stärker gewichtet wird
als die Spezifität.

Und ich würde !important selbst nicht benutzen oder weiterempfehlen.

?? Wenn es nicht zur Anwendung gedacht wäre, wäre es nicht in die Spec aufgenommen worden. „Neben der Einstellung „!important“ für einzelne Deklarationen […]“ [ibid.]

Ich meinte: Ich würde !important nicht weiterempfehlen, um
damit einen Selektor stärker zu gewichten oder sonstwie
die Spezifität "auszutricksen". Aber ich verstehe jetzt,
dass man !important durchaus auch gemäss der Spec. dafür
verwenden kann. (Auch wenn ich sie immer noch so verstehe,
dass !important in erster Linie für den "Machtkampf" zwischen
Autoren- und Benutzer-Stylesheet gedacht ist.)

Freundliche Grüsse
Thomas

[ChrisB]

Hi,

<span class="outputMode" style="display: none;">TEXT</span>

Und in meiner CSS-Datei ganz am Schluss:
@media print {
.outputMode{
   display: block;
   visibility:visible;
  }
}

Jedoch wird beim Ausdruck mein Span-tag nicht dargestellt, was mache ich falsch?

Wenn du etwas in allen anderen Ausgabemedien unsichtbar haben willst - wieso gibst du dann diese Formatierung nicht auch entsprechend fuer diese Ausgabemedien an, anstatt als inline-Style?

MfG ChrisB