5 Min

Es geht nicht ohne - CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, mit der die Darstellung eines in HTML oder XML geschriebenen Dokuments beschrieben wird. Sie gehört neben HTML und JavaScript zu den Kerntechnologien des World Wide Web und ist für die Erstellung visuell ansprechender Webseiten und Benutzeroberflächen unerlässlich.

Hauptmerkmale von CSS

  1. Trennung von Inhalt und Darstellung: Mit CSS können Entwickler den Inhalt (HTML) von seiner visuellen Darstellung trennen. Dadurch lässt sich das Design einer Website leichter pflegen und aktualisieren, ohne dass die Struktur beeinträchtigt wird.

  2. Selektoren und Eigenschaften: CSS funktioniert, indem Stile mit Hilfe von Selektoren auf HTML-Elemente angewendet werden. Selektoren zielen auf HTML-Elemente ab, und Eigenschaften legen fest, wie diese Elemente gestylt werden sollen. Zum Beispiel:

    p {
  color: blue;
  font-size: 16px;
}

Diese Regel gilt für alle <p>-Elemente, so dass ihr Text blau und die Schriftgröße 16 Pixel beträgt.

  1. Kaskadierung und Vererbung: Die „Kaskadierung“ in CSS bezieht sich auf das Prioritätsschema, das verwendet wird, um zu bestimmen, welche Stilregeln gelten, wenn mehrere Regeln auf dasselbe Element angewendet werden können. CSS unterstützt auch die Vererbung, was bedeutet, dass untergeordnete Elemente Stile von ihren übergeordneten Elementen erben können.

  2. Box-Modell: CSS verwendet das Box-Modell, um das Layout und Design von HTML-Elementen zu beschreiben. Das Box-Modell besteht aus Rändern, Umrandungen, Auffüllungen und dem Inhaltsbereich. Das Verständnis des Box-Modells ist entscheidend für die Gestaltung von Layouts.

  3. Responsives Design: CSS ermöglicht ein responsives Design, bei dem sich Webseiten an unterschiedliche Bildschirmgrößen und Geräte anpassen. Dies wird oft mit Media Queries erreicht, die Stile auf der Grundlage der Eigenschaften des Geräts, wie Breite oder Ausrichtung, anwenden.

Allgemeine CSS-Eigenschaften

  • Farbe und Hintergrund: Farbe, Hintergrund-Farbe, Hintergrund-Bild
  • Text und Schrift: font-family, font-size, font-weight, text-align
  • Box-Modell: Breite, Höhe, Rand, Polsterung, Bordüre
  • Layout: Anzeige, Position, Float, Flex, Grid
  • Effekte: Opazität, Übergang, Transform

CSS Syntax

Die CSS-Syntax besteht aus einem Selektor und einem Deklarationsblock. Ein Deklarationsblock enthält eine oder mehrere durch Semikolons getrennte Deklarationen, wobei jede Deklaration eine Eigenschaft und einen Wert enthält:

.selector {
  porperty: value;
  
}

Beispiel:

h1 {
  color: red;
  text-align: center;
}

Verwendung

  • Inline CSS: Directly within an HTML element using the style attribute. 
    <p style="color: blue;">This is a blue paragraph.</p>
  • Internal CSS: Within a <style> tag in the HTML document’s <head>. 
    <style>
p {
  color: blue;
}
</style>
  • External CSS: In an external .css file, linked using the <link> tag. 
    <link rel="stylesheet" href="styles.css">

“Ich hasse CMS!”

Die Aussage wird dir häufiger über den Weg laufen. Die Community ist sich über eine abschließende Meinung von CSS noch immer nicht einig. Manche halten CSS für schrecklich un-intuitiv, andere betrachten CSS als eine einfach zu handhabende Technologie. Nach meiner eigenen Erfahrung kann ich sagen: CSS hört auf, schrecklich un-intuitiv zu sein, sobald man es lernt. CSS ist keine Selbstverständlichkeit, und nur weil jemand aus dem Hardcore C++ Land kommt, heißt das nicht, dass er automatisch CSS kann.

Wenn du CSS hasst, gehe einen Schritt zurück, schau dir die Grundlagen (noch einmal) an, und sei geduldig mit den Fortschritten. Du wirst da schon reinkommen!

Gotchas in CSS

Hier sind einige häufige CSS-„Fehler“, die zu unerwarteten Ergebnissen führen können, insbesondere für diejenigen, die sich mit den Eigenheiten und Feinheiten von CSS vertraut machen wollen:

Diva Vererbung

Die CSS-Vererbung kann knifflig sein, da nicht alle Eigenschaften automatisch vererbt werden (z. B. vererbt sich font-size, aber margin nicht).

Spezifitätsregeln bedeuten, dass spezifischere Selektoren (wie „#id“ oder „element.class“) allgemeinere Selektoren außer Kraft setzen, selbst wenn der allgemeine Selektor später im CSS erscheint. Überprüfen Sie die Reihenfolge und die Spezifität Ihrer Selektoren, wenn das Styling nicht wie erwartet funktioniert.

Nur Inhalt

Standardmäßig berechnet CSS „width“ und „height“ nur für den Inhalt, ohne Padding und Border, was zu Layoutproblemen führen kann. Die Einstellung box-sizing: border-box; für Elemente stellt sicher, dass Layout und Border in die Breite und Höhe einbezogen werden. Die Konsistenz des Layouts wird damit besser.

Positionierung und z-index

Bei der Positionierung von Elementen kann man sich leicht in ‘z-index’-Problemen verheddern. Die Eigenschaft z-index funktioniert nur bei positionierten Elementen (position: relative, absolute oder fixed). Außerdem können Stacking-Kontexte entstehen, wenn bestimmte CSS-Eigenschaften angewendet werden. z-index macht dann komische Sachen.

Hover-Elemente und Delete

HOver-Elemente (float: left oder float: right) können dazu führen, dass übergeordnete Elemente kollabieren, wenn die Hover-Elemente nicht gelöscht werden, was zu Layoutproblemen führt (oh!). Die Verwendung von overflow: auto oder der clearfix-Hack auf übergeordneten Containern löst das Problem.

Flexbox und Platzverteilung

Flexbox kann ein mächtiges Layout-Werkzeug sein, aber Eigenschaften wie justify-content und align-items führen zu unerwarteten Ergebnissen, wenn die Eigenschaften von Flexbox-Containern oder Children nicht gut verstanden werden. Achte auf Standardwerte wie flex-shrink: 1, um Elemente zu verkleinern, wenn es nicht anders geht.

Randfälle der Media Query

Media-Queries können an exakten Haltepunkten wegen Rundungsunterschieden bei Pixelbruchteilen auf verschiedenen Geräten nicht präzise funktionieren. Das Setzen von leicht abweichenden Haltepunkten (z.B. max-width: 1023.98px anstelle von max-width: 1024px) provoziert ein solches Verhalten.

Performance-Einbrüche bei CSS-Animationen und -Übergänge

Krasse Animationen oder Transitions bei Eigenschaften wie width, height oder position können zu Leistungsproblemen führen. Für flüssigere Animationen nimm stattdessen transform und opacity. Die sind nämlich Hardware-Beschleunigt und laufen performanter.

Unterschiede bei der Darstellung von Schriftarten und Schriftgewichten

Nicht alle Browser und Betriebssysteme stellen Schriftarten auf die gleiche Weise dar, was zu Kreuzüber-Plattform-Problemen (sic!) führt. Teste immer Kreuz-Plattform (sic!) oder benutze Schriftglättung (-webkit-font-smoothing), um die Unterschiede zu beheben.

Deckkraft und Vererbung an Childs

Wenn du die Opacity eines Elements festlegst, erben seine Childrens die Opacity - nicht immer wünschenswert. Anstatt opacity auf einen Container anzuwenden, verwende rgba-Farbwerte auf Hintergründen, um die Transparenz anzupassen, während untergeordnete Elemente undurchsichtig bleiben.

Plötzliche Breaks in den Margins

Die oberen und unteren Margins benachbarter Blöcke können collapsen und damit das Layout zerschießen. Fills, Borders oder Positionings von übergeordneten Containern können den Aufbau stabilisieren und einer drohenden Zerschießung des Layouts vorbeugen.

Fazit

Ja, ich weiß. CSS ist nicht perfekt, aber wer ist das schon? Ich etwa? Come on! Weiter oben im Artikel erklärte ich noch, CSS sei intuitiv zu benutzen, sobald man sich da reinfuchst, und dann kommt so eine lange Liste mit den Todesfallen von CSS?

Das Problem ist, dass es keine einfache und universelle Lösung zu allen Vorgehensmodellen in CSS gibt. Das geht schon damit los, dass fast jedes Entwicklerteam von Webbrowsern, ob Mozilla, Microsoft, Brave oder Google, eigene Standards in die Software-Interne Engine für das Rendering von CSS implementiert. Deshalb haben Firefox-spezifische Properties auch das Prefix moz-, um nur ein Beispiel zu nennen. Im kleinen Einmaleins des CSS wird das gerne mal geskippt, aber ist daran denn CSS Schuld? Natürlich nicht. Die Entwickler hinter CSS geben ihr Bestes, eine so universelle und portable Lösung wie möglich zu entwickeln. Eine 100%-ig browser-übergreifend perfekte Lösung ist einfach unmöglich aufwendig zu entwickeln, und moderne Ansätze wie SASS, Stylus oder PostCSS basieren immer noch zu gewissen Teilen auf CSS.

Sieh es positiv! Wenn CSS so un-intuitiv zu benutzen ist (was nur am Anfang der Fall ist), ist der Job des Front-End Designs eben nur den richtigen Profis vorbehalten - das macht den Job doch gleich viel cooler!

Updated:

Similar Content