Keine Angst vor CSS: Diese Grundkenntnisse solltet ihr haben
Ob jetzt die Angst der Treiber dieses Phänomens ist, sei dahingestellt – sicherlich bestehen aber gegenüber den grundlegenden Konzepten von CSS Missverständnisse. Daraus resultieren dann die negativen Gefühle gegenüber der mächtigen Stylesheet-Sprache. Werfen wir also einen Blick auf die Grundkonzepte von CSS.
Die Kaskade
Die CSS-Angaben können aus drei Quellen stammen:
- Browser-Stylesheet: Jeder Browser bringt seine eigenen CSS-Regeln mit.
- Benutzer-Stylesheets: Jeder Nutzer kann in den Browser-Einstellungen unter anderem festlegen, welche Schrift bevorzugt wird, wie groß die Schriften sein sollen und so weiter. Diese Angaben überschreiben die Angaben aus dem Browser-CSS.
- Autoren-Stylesheets: Das sind die CSS-Regeln, die innerhalb der Dokumente/Websites eingebunden werden. Diese Angaben überschreiben sowohl die Browser- wie auch die Benutzer-CSS.
Die Regeln aus dem Autoren- beziehungsweise dem Dokument-CSS haben die höchste Priorität. Geringere Priorität haben die Benutzerangaben, und am Ende folgen die CSS-Regeln aus dem Browser-Stylesheet.
Die Reihenfolge und die Wichtigkeit
Die Reihenfolge der CSS-Angaben ist wichtig. In dem folgenden kleinen Beispiel …
h1, h2, h3 { font-weight: normal; }
h1, h2, h3 { font-weight: bold; }
… wird die zweite Regel zum Einsatz kommen, weil die spätere Angabe die vorherige überschreibt. So ist es auch im folgenden Beispiel:
<head>
<title>Seitentitel</title>
<link rel="stylesheet" href="style-1.css" type="text/css" media="all" />
<link rel="stylesheet" href="style-2.css" type="text/css" media="all" />
</head>Die Angaben aus style-2.css überschreiben die Regeln aus der style-1.css. Allerdings kann man die Priorität manuell festlegen. Das geht mit dem Schlüsselwort !important:
h1, h2, h3 { font-weight: normal !important; }
h1, h2, h3 { font-weight: bold; }
Obwohl eigentlich die zweite Regel zum Tragen kommen müsste, wird durch den Einsatz von !important die erste bevorzugt. Der Einsatz von !important sollte allerdings nur äußerst selten stattfinden, da er das spätere Arbeiten an den CSS und vor allem die Fehlersuche erschwert.
Die Spezifität
Die CSS-Regeln besitzen eine Spezifität – je allgemeiner eine Regel definiert ist, desto geringer ist ihre Spezifität. Im folgenden Beispiel wird das deutlich:
article {...}
.main article {...}
#wrap .main article {...}
Von den drei Regeln besitzt die dritte die stärkste Spezifität und hat daher bei der Interpretation durch den Browser Vorrang – unabhängig von der Reihenfolge.
Vererbung
Ebenfalls verwirrend finden viele die Vererbung in CSS. Manche Eigenschaften vererben Werte, andere nicht. So werden zum Beispiel Schriftfarbe oder -größe vererbt, die Angaben über die inneren oder äußeren Abstände im Box-Modell aber nicht. Dies gilt es, im Hinterkopf zu behalten. Allerdings kannst du die Vererbung steuern. Mit dem Wert inherit kannst du eine Vererbung erzwingen und mit initial hast du die Möglichkeit, zum Standardwert zurückzukehren.
Browser-Support
Zusätzliche Kopfschmerzen verursacht bei Ein- und Umsteigern die Tatsache, dass die Browser nicht einheitlich mit CSS umgehen. Sicherlich, da hat sich in den letzten Jahren sehr viel getan, aber ab und zu stößt man auf unangenehme Überraschungen. Mithilfe von @supports kannst du aber innerhalb von CSS abfragen, ob der Browser eine bestimmte Eigenschaft unterstützt:
@supports (display: grid) {
div {
display: grid;
}
}Falls er die Eigenschaft nicht unterstützt, kannst du innerhalb von CSS auch eine Ausweichlösung zur Verfügung stellen:
@supports not (display: grid) {
div {
float: right;
}
}- CSS3: Was sind die Unterschiede zwischen Grids und Flexbox?
- So lernst du CSS3-Grids spielerisch
- CSS-Verlauf statt Hintergrundbild auf deiner Website: So geht’s mit nur einer Zeile Code
Unverständnis und Häme???? Seit wann ist das denn so? Ich bin Dev seit über 18 Jahren und hab davon noch nie gehört.
@supports not (display: grid) {
div {
float: right;
}
}
@supports not ist meist ungünstig, denn die Browser, die man damit erreichen möchte, verstehen oft @supports nicht. So versteht beispielsweise der Internet Explorer @supports nicht. Deswegen ist es besser positiv ohne not zu formulieren .
Danke für die Tipps
Interessanter Artikel. CSS ist definitiv eine große Hilfe für Webdesigner, aber für Anfänger könnte es Kopfschmerzen bereiten. Trotzdem lohnt es sich zu lernen.