DanLevy.net

Quiz: Kennen Sie modernes CSS? (für 2025)

Bist du genugFront‑End?

Quiz: Kennst du CSS?

1. 

Aufwärmen

Wie verwendet man die CSS‑Variable --main-color korrekt, um die Hintergrundfarbe eines Elements festzulegen?

:root {
  --main-color: blue;
}
div {
  /* How do we use --main-color here? */
}

CSS‑Variablen werden mit der var‑Funktion verwendet, daher ist die richtige Antwort background-color: var(--main-color);. Diese Syntax ruft den Wert von --main-color ab und wendet ihn an.

Die anderen Optionen stammen möglicherweise aus anderen Sprachen oder Präprozessor‑Syntaxen, nämlich Sass oder Less.

2. 

CSS-Funktionen

Wenn die Breite des Eltern-/Container-Elements 400 px beträgt, welche berechnete Breite hat das folgende Element?

div {
  width: min(250px, 50%);
}

Die min()‑Funktion wählt den kleinsten Wert zwischen 250 px und 50 % der Breite des übergeordneten Elements.

Um den berechneten Wert zu verstehen, müssen wir die relativen Einheiten in Pixel umrechnen:

  • 50% von 400px sind 200px
  • 250px sind bereits Pixel
/* This gets computed to */
width: min(250px, 200px);
/* -> 200px wins */

Die min()‑Funktion ist besonders nützlich für responsives Design, da Sie sicherstellen können, dass ein Komponenten (oder die Schriftgröße) einen bestimmten Grenzwert nicht überschreitet.

3. 

CSS-Funktionen

Gegeben ein Container mit einer Breite von 200 px, welche berechnete Breite hätte das <div>?

div {
  width: max(50px, 10%, 6rem);
}

Die max()‑Funktion akzeptiert zwei oder mehr Eingaben und verwendet automatisch den größten Wert. Angenommen, die Root‑Schriftgröße ist der Browser‑Standard 16px, ergibt sich eine Breite von 96px.

Um den berechneten Wert zu verstehen, müssen wir die relativen Einheiten in Pixel umrechnen:

  • 50px ist bereits in Pixel
  • 10% von 200px sind 20px
  • 6rem sind 6 * 16px (die Standard‑Schriftgröße), also 96px
/* This gets computed to */
width: max(50px, 20px, 96px);
/* -> 96px wins */

4. 

CSS‑Grid‑Funktionen

Welche Wirkung hat die Verwendung von minmax(100px, 200px) für einen CSS‑Grid‑Track?

grid-template-columns: minmax(100px, 200px);

Die Verwendung von minmax(100px, 200px) ermöglicht es dem Grid‑Track, zwischen 100px und 200px zu skalieren, sich dem verfügbaren Platz anzupassen, aber niemals unter 100px oder über 200px zu gehen.

Sie können automatisch anpassende Layouts erstellen, bei denen Container und Kinder jeweils eine Rolle bei der Berechnung der Layouts spielen. Das ist besonders kraftvoll in Kombination mit repeat() und auto-fill oder auto-fit, die so viele Tracks wie möglich innerhalb der Vorgaben erzeugen.

5. 

CSS-Variablen

Welche Farbe hat der Hintergrund für das folgende CSS?

div {
  background: var(--primary, olivedrab);
}

Die var()‑Funktion ermöglicht es, einen Fallback‑Wert festzulegen, falls die Variable nicht definiert ist. In diesem Fall wird der Hintergrund olivedrab (#6b8e23) sein, weil --primary nicht definiert ist.

Das ist eine großartige Methode, um sicherzustellen, dass deine Styles nicht brechen, wenn eine Variable fehlt oder nicht unterstützt wird.

6. 

CSS-Funktionen

Was macht clamp()?

.card {
  width: clamp(200px, 50vw, 500px);
}

Die clamp()‑Funktion lässt die Breite basierend auf 50vw skalieren, hält sie aber innerhalb eines Bereichs von 200 px bis 500 px.

Das bedeutet, die Breite ist 200 px, wenn 50vw weniger als 200 px ergeben würde, 500 px, wenn 50vw mehr als 500 px ergeben würde, und linear dazwischen.

Sie macht dein Layout automatisch responsiv! Wichtig bei clamp ist, dass es feste Einheiten mit responsiven oder berechneten Einheiten kombiniert.

Normalerweise würde man Viewport‑Einheiten nicht für Schriftgrößen verwenden, aber mit clamp() können wir sicherstellen, dass die Schriftgröße nicht zu klein oder zu groß wird.

7. 

CSS-Nesting

Unterstützt CSS Nesting nativ?

Ja! Wir haben endlich nativen CSS-Nesting! CSS hat in den letzten Jahren (2023) native Nesting‑Syntax eingeführt, die hierarchisches Styling direkt im CSS ermöglicht.

8. 

CSS-Nesting

Ist dies eine korrekte Verwendung von nativen CSS-Nesting?

.container {
  color: black;
  .title {
    color: white;
    background: black;
  }
}

Die Klasse .title ist innerhalb der Klasse .container verschachtelt, und die Eigenschaften werden wie erwartet angewendet.

Das ist eine großartige Methode, um zusammengehörige Styles zu bündeln und lange Selektoren zu vermeiden.

9. 

CSS-Verschachtelung

Welche Hintergrundfarbe wird auf direkte Kind-divs von .container angewendet?

.container {
  background-color: red;
  > div {
    background-color: white;
  }
  background-color: blue !important;
}

Der >‑Selektor in der verschachtelten Regel wendet background-color: white nur auf direkte Kind‑div‑Elemente innerhalb von .container an.

Die letzte Regel, background-color: blue !important;, ist eine kleine Ablenkung. Sie ist außerhalb der verschachtelten Regel und wird auf alle .container‑Elemente angewendet.

10. 

CSS-Variablen

Wie kann man den Wert einer CSS-Variable zur Laufzeit ändern?

CSS-Variablen können über Klassen & JavaScript gesetzt werden. Sie können sogar ‘nach’ ihrer eigentlichen Verwendung definiert werden.

document.documentElement.style.setProperty('--main-color', 'blue');

Dies ändert den Wert von --main-color zu blue für das gesamte Dokument.

CSS-Variablen sind veränderlich und können zur Laufzeit mit JavaScript geändert werden.

Sie können auch durch Hinzufügen oder Entfernen von Klassen geändert werden, was ein gängiges Muster für Themen ist.

11. 

CSS-Variablen

Wie groß wird die berechnete Breite des Elements?

:root {
  --base-width: 100px;
}
div {
  width: calc(var(--base-width) + 10px);
}

Die calc()‑Funktion kombiniert den Wert von --base-width (100px) mit zusätzlichen 10px und ergibt eine Breite von 110px.

Loading comments...