Frage zu https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade

[Gerhard]

Hallo,

dort steht

Ein Wert wird als wichtig gekennzeichnet, indem nach dem Wert selbst optional ein Leerzeichen, ein Ausrufezeichen (!) sowie das Schlüsselwort important notiert werden. Beispiel

h1 { color: green !important; }
h1.main { color: red; }

In diesem Beispiel wurde der Wert green als wichtig gekennzeichnet. Aus diesem Grund zeigt die nachfolgende Deklaration, die aufgrund des Klassenselektors eigentlich eine höhere Spezifität hätte, keine Auswirkung. Das bedeutet, dass die Schriftfarbe grün dargestellt wird.

Warum schreibt man h1.main { color: red; } überhaupt hin, wenn es keine Auswirkung hat?

[Felix Riesterer]

Lieber Gerhard,

Warum schreibt man h1.main { color: red; } überhaupt hin, wenn es keine Auswirkung hat?

das fragliche CSS-Beispiel beleuchtet den Zusammenhang von Spezifität und dem Schlüsselwort !important. Es geht in diesem Beispiel nicht um einsatzfähigen Code für die Praxis, sondern um eine Veranschaulichung eines Sachverhalts.

Du kannst das sogenannte Default-Stylesheet Deines Browsers übrigens bearbeiten und selbst mit solchen !important-Schlüsselwörtern Darstellungseffekte erzielen, die sich über die Stylesheets der von Dir besuchten Webseiten hinwegsetzen werden.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

Du kannst das sogenannte Default-Stylesheet Deines Browsers übrigens bearbeiten

Huch? In welchem Browser geht das und wie genau tut man das?

Ich finde nur Hinweise auf ein User-Stylesheet, was nicht identisch zum User-Agent Stylesheet ist und in der Kaskade anderswo steht.

Rolf

[Fred]

Guten Morgen,

Huch? In welchem Browser geht das und wie genau tut man das?

im Firefox legst du im Profilordner ein Verzeichnis chrome (ja) an und erstellst dort eine Datei mit dem Namen userContent.css

Ich habe dort u.a. dieses css:

/* Google */
@-moz-document url-prefix(https://www.google.com/) {
 a:visited{color:#04B404 !important;}
}

Zuvor noch about:config aufrufen und
toolkit.legacyUserProfileCustomizations.stylesheets
auf true setzen.

[Rolf B]

Hallo Fred,

Okay, danke. Das wäre dann ein User-Stylesheet, nicht das Default-Stylesheet.

Ja, es überschreibt die non-!important Einstellungen des Browsers (wie im Wiki unter Kaskade beschrieben) , es ist aber etwas anderes, als Felix nannte.

Rolf

[Fred]

Hallo Rolf,

Ja, es überschreibt die non-!important Einstellungen des Browsers (wie im Wiki unter Kaskade beschrieben) , es ist aber etwas anderes, als Felix nannte.

dann muss man der Aussage von Felix widersprechen, zumindest im Firefox kann man das default-stylesheet nicht ändern.
Ich habe im Profilordner nichts gefunden und auch about:about zeigt da nichts.
Bei anderen Browsern bin ich raus.

Gruß
Fred

[MrMurphy]

Warum schreibt man h1.main { color: red; } überhaupt hin, wenn es keine Auswirkung hat?

Das macht man doch überhaupt nicht. Die Möglichkeit stammt aus den Urzeiten von CSS und wird heute nicht mehr benötigt. In dem selfHTML-Beispiel geht nur darum die Auswirkungen zu demonstrieren.

Bei eigenem CSS sollte !important vollkommen überflüssig sein.

Bei Änderungen an fremden CSS (oder wenn man beim eigenen CSS doch den Überblick verloren hat) kann heute mit den Inspektoren der Browser das Problem-CSS aufgespürt und dann direkt bearbeitet werden.

Die !important-Möglichkeit wurde früher meist von Webseitenerstellern verwendet, die mit ihrem eigenen CSS vollkommen überfordert waren. Folge war dann häufig, das ihr eigenes CSS im Laufe kurzer Zeit mit !important so überfüllt war, das gar nichts mehr ging.

!important funktioniert heute zwar noch, ist aber überflüssig.

[Gunnar Bittersmann]

@@MrMurphy

!important funktioniert heute zwar noch, ist aber überflüssig.

So pauschal gesagt ist das Quatsch. !important ist nach wie vor ein sinnvolles Werzeug, das man einsetzen kann und sollte – mit Bedacht.

Oder wie es Harry Roberts (CSSWizardry) auszudrücken pflegt: Die Regel ist nicht
“Never use !important”, sondern “Never use !important in anger!”

In anger wäre, was du so beschreibst:

Die !important-Möglichkeit wurde früher meist von Webseitenerstellern verwendet, die mit ihrem eigenen CSS vollkommen überfordert waren. Folge war dann häufig, das ihr eigenes CSS im Laufe kurzer Zeit mit !important so überfüllt war, das gar nichts mehr ging.

Ja, das sollte man nicht tun.

Aber es gibt nach wie vor sinnvolle Anwendungen für !important:

• [hidden] { display: none !important }

  Ohne diese Angabe würden auf hidden gesetzte Elemente angezeigt werden, wenn von anderswo eine display-Angabe wirkt. Beispiel

• Man mag Mediävalziffern nicht und setzt deshalb überall Versalziffern:
  * { font-variant-numeric: lining-nums !important }

  Ohne !important würde das von font-Angaben überschrieben werden. Beispiel

• Helferklassen wie visually-hidden.

  Auch diese Deklarationen können !important vertragen, damit sie nicht ungewollt überschrieben werden.

Jolan tru

[Hans Baumann]

Hallo Gerhard, ich möchte einmal auf andere Weise mich Deiner Frage nähern. CSS heißt cascaded style sheet. Ich kann also mit vielen Stylesheets arbeiten.

Nun habe ich mir ein Basis-Stylesheet im Laufe der Jahre erarbeitet, die grundlegende Sachen regelt. Zusätzlich will ich noch ein Stylesheet haben, das moderne Aktionen beinhaltet (css3). Jetzt habe ich noch ein spezielles Stylesheet für unterschiedliche Kunden.

Und nun wird es interessant, ich kann meine eigenen grundlegenden Styles überschreiben, indem ich eben einen Style als !important beschreibe. Dann ist egal, welche "normalen" Styles ich in meinen anderen css festgelegt habe.

Vielleicht hilft Dir dies. Wenn Du magst, dann schau mal nach unter StylesAusprobieren

da habe ich eine Demo-Webseite, die ich mit verschiedenen css-en verwende, dort kann man sie sogar live austauschen ....

[Gunnar Bittersmann]

@@Hans Baumann

CSS heißt cascaded style sheet.

Cascading, actually. Die sollen auch in Zukunft kaskadieren.

Und nun wird es interessant, ich kann meine eigenen grundlegenden Styles überschreiben, indem ich eben einen Style als !important beschreibe. Dann ist egal, welche "normalen" Styles ich in meinen anderen css festgelegt habe.

Das hört sich so an als möchtest du eigentlich mit Layern arbeiten.

Jolan tru