Tag Eins

Der CSS :root Selektor

Der Selektor :root entspricht dem Wurzelelement des Dokuments. In HTML ist das Wurzelelement immer das html-Element.

            :root {
  background: black;
}

/* Ist identisch mit */

html {
  background: black;
}
        

CSS Custom Properties (CSS-Variablen)

In einem Stylesheet finden sich oft viele sich wiederholende Werte. So kann derselbe Wert an Hunderten von verschiedenen Stellen verwendet werden – zum Beispiel eine Farbe in Links, Buttons und Hover States. Ein Suchen und Ersetzen von solchen Werten wird schnell einmal zur Fleissaufgabe und unübersichtlich.

Mit CSS custom properties (CSS-Variablen) kann ein Wert an einer Stelle festgelegt und dann an mehreren anderen Stellen wiederverwendet werden. Ein weiterer Vorteil sind semantische Bezeichner. So ist beispielsweise --color-link leichter zu verstehen als ein Hex-Code wie #00ff00, vor allem, wenn dieselbe Farbe auch in anderen Kontexten verwendet wird.

Syntax

Die Syntax von custom properties besteht aus zwei Teilen, dem Name und dem Wert.

            :root {
  --meine-css-variable: css-wert;
}
        

Der Name eines Custom Property muss mit zwei Minuszeichen beginnen. Die darauf folgenden Zeichen sind weitgehend frei wählbar.

Verwendung

Um den Wert einer CSS Variable zu nutzen, verwenden wir die CSS Funktion var().

            div {
	color: var(--meine-css-variable)
}
        

Beispiel

CSS Variablen bieten sich prima für eine Farbpalette an. Aber auch Layout-Definitionen wie Spaltenabstände decken wir üblicherweise mit Variablen ab. Schau doch mal folgendes Beispiel zur Erläuterung.

            :root {
  --color-primary: red;
  --color-accent: blue;
  --layout-gap-small: 1rem;
  --layout-gap-large: 2rem;
}

div {
  display: grid;
  gap: var(--layout-gap-large);
}

div a {
  color: var(--color-primary)
}

div a:hover {
  color: var(--color-secondary)
}

@media (min-width: 640px) {
  div {
	 gap: var(--layout-gap-small);
  }
}
        

Einstieg in CSS Flexbox

CSS Flexbox ist neben CSS Grid das zweite moderne Layout-Modell in CSS, das es uns ermöglicht, flexibles und responsives Design für ihre Webseiten zu erstellen. Flexbox ermöglicht es, Elemente nebeneinander in einer Zeile oder Spalte anzuordnen und ihre Größe und Position dynamisch anzupassen, um sich an die verfügbare Bildschirmgröße anzupassen. Es ist besonders nützlich für die Gestaltung von flexiblen Layouts, wie z.B. responsive Grids und flexible Navigationsmenüs.

Flexbox ist wie Magie: Faszinierend und am Anfang unbegreiflich. 🙈🤷‍♂️😍

Flexbox kann auf den ersten Blick schnell einmal verwirrend wirken. Mit Flexbox kommen wir gänzlich weg von starren Breitenangaben und überlassen dem Browser zu einem grossen Teil den Entscheid, wie er Elemente platziert und deren Grösse handhabt.

Aber: Flexbox gehört zum Alltag eines Frontend Entwicklers und sobald du den Dreh raus hast, eröffnet dir Flexbox unendliche Möglichkeiten in der Gestaltung deiner Webdesigns.

Ein einfaches Beispiel

Nehmen wir an, du hast auf deiner Website zwei Div Tags.

Per Default hat ein DIV Element bei der CSS Property Display den Wert block. HTML Tags mit der Eigenschaft display:block haben grundsätzlich eine Breite von 100%. Beide DIV Tags werden untereinander auf der ganzen Breite dargestellt.

Wenn du nun dem Eltern (Parent) Element deiner DIVs den Wert Flex übergibst – das DIV mit der Klasse .wrapper nicht mir display: block hat – tut sich ohne grosses Zutun spannendes.

            .wrapper {
	display: flex;
}
        

Neu versucht der Browser, den zur Verfügung gestellten Platz flexibel zu nutzen und er stellt beide DIVS nicht nur auf auf die gleiche Zeile, sondern vergibt ihnen gleich viel Platz.

Flex kann ganz viel mehr

Im Verlaufe unseres Kurses werden wir immer mal wieder auf Flexbox zu sprechen können. Flex kann nämlich viel mehr als einfach nur Elemente nebeneinander zu stellen, selbst wenn wir häufig aus diesem Grund auf Flex setzen.

Probier zum Beispiel mal, den Text eines der oben verwendeten DIVs bedeutend länger zu machen. Da macht der Browser plötzlich vielleicht auch unerwartete Dinge.

Alles was du über Flexbox wissen musst, findest du bei CSS-Tricks.

Aber keine Angst: All zu tief werden wir nicht in Flexbox eintauchen.

Quellenangabe