Anzeige
Anzeige
Ratgeber
Artikel merken

Keine Angst vor CSS: Diese Grundkenntnisse solltet ihr haben

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?

Von Vladimir Simović
3 Min. Lesezeit
Anzeige
Anzeige
CSS-Code (Foto: Shutterstock)

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

Die Reihenfolge und die Wichtigkeit

Die Reihenfolge der CSS-Angaben ist wichtig. In dem folgenden kleinen Beispiel …

Anzeige
Anzeige
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:

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

Anzeige
Anzeige

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:

Anzeige
Anzeige
@supports not (display: grid) {
    div {
        float: right;
    }
}

Mehr zum Thema:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
4 Kommentare
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

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
Max

Danke für die Tipps

Antworten
Studenten Webdesign

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.

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige