Ratgeber
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 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 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 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.
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.
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
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team
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.