Ratgeber

Keine Angst vor CSS: Diese Grundkenntnisse solltet ihr haben

CSS-Code (Foto: Shutterstock)

Warum schlägt CSS Häme und Unverständnis vieler Entwickler entgegen? Ist es die Angst, Unkenntnis oder das Missverständnis grundlegender Konzepte von CSS?

Der Frontend-Entwickler Steffen Pedersen ist der Frage nachgegangen, warum sich viele Entwickler vor CSS fürchten. Jeder, der schon ein paar Jahren im Frontend-Bereich gearbeitet hat, kennt das Phänomen, dass HTML und vor allem CSS häufig mit Unverständnis und Häme belächelt werden.

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:

  1. Browser-Stylesheet: Jeder Browser bringt seine eigenen CSS-Regeln mit.
  2. 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.
  3. 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;
    }
}

Mehr zum Thema:

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

2 Kommentare
dennis
dennis

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.

Antworten
Florence Maurice

@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 .

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung