5 CSS-Snippets, die jeder Front-End-Entwickler 2024 kennen sollte

Leistungsstarkes und stabiles CSS, das Sie heute schon verwenden können.

Adam Argyle

Ich bin der Meinung, dass jeder Frontend-Entwickler wissen sollte, dass :has() mehr als nur ein „übergeordneter Selektor“ ist, wie und warum ein subgrid funktioniert, wie man mit der integrierten CSS-Syntax verschachtelt, wie man den Browser den Zeilenumbruch von Überschriften ausgleichen lässt und wie man Einheiten für Containerabfragen verwendet.

Dieser Beitrag ist eine Fortsetzung von 6 CSS-Snippets, die jeder Frontend-Entwickler 2023 kennen sollte aus dem letzten Jahr.

CSS:has(.potential-beyond-being-a-parent-selector)

:has() wurde Ende 2023 in allen wichtigen Browsern eingeführt. Diese neue Auswahlfunktion sieht klein und unschuldig aus, aber sie kann für viele Anwendungsfälle genutzt werden: Spiele, Reaktivität, inhaltsbewusstes Layout, Smart Components und vieles mehr, was in diesem Artikel von Jhey ausführlich beschrieben wird.

Hier einige Beispiele für die Verwendung von :has() als übergeordneter Selektor. Der Name kommt daher, dass das Subjekt eines Selektors normalerweise am Ende steht, z. B. ul li, wobei li das Subjekt ist, das die Formatierungen erhält. Mit :has() kann das Element am Anfang des Selektors zum Subjekt werden. Im folgenden Beispiel hat die Schaltfläche einen Abstand, wenn sich darin ein Element mit der Klasse .icon befindet. Die Karte ändert die Ausrichtung, wenn sie ein Bild enthält.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

Ein lange gewünschter Selektor ist das Ändern eines Layouts basierend auf der Anzahl der Elemente. Mit :has() ist das jetzt möglich, da der Container als Subjekt beibehalten werden kann, während die Anzahl der untergeordneten Elemente abgefragt wird.

main:has(> :nth-child(5)) {…}

Ein weiteres Beispiel auf höherer Ebene: Ändern Sie Stile, die für das gesamte Dokument festgelegt sind, wenn ein bestimmtes Kästchen auf der Seite aktiviert ist:

html:has(#dark-mode:checked) {…}

Das sind einfache Anwendungsfälle, bei denen sich das Subjekt des Selektors nicht ändert. Wenn Sie sich nur solche Beispiele ansehen, könnten Sie denken, dass :has() auf die Funktion eines übergeordneten Selektors beschränkt ist. Sehen Sie sich dazu die folgenden Beispiele an. Bei diesen wird anhand eines gemeinsamen Vorfahrenelements geprüft und dann das Selektorsubjekt an ein untergeordnetes Element weiter unten auf der Seite weitergeleitet.

Dieses Beispiel zeigt ein Formularfehlerelement, wenn eine der Eingaben ungültig ist:

form:has(:user-invalid) .error {
  display: block;
}

Bei diesem Beispiel wird der Hauptinhaltsbereich ausgeblendet, wenn eine Seitenleiste die Klasse .--is-open hat:

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

Hier ist eine interessante Demo, in der :has() als übergeordneter Selektor, :has() mit Mengenabfragen und Containerabfragen verwendet wird, um ein Rasterlayout zu erstellen, das 1 bis 12 Elemente im Hoch- oder Querformat elegant darstellen kann:

Unterraster erstellen

Viele Jahre lang hat die Frontend-Web-Community nach Subgrid gefragt, um die äußerst beliebte und leistungsstarke CSS-Grid-Layout-Engine zu vervollständigen. Sie ist jetzt in allen drei wichtigen Engines verfügbar.

Weitere Informationen zu Unterrastern

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

CSS-konform verschachteln

Die integrierte CSS-Verschachtelung wurde 2023 in allen gängigen Browsern verfügbar. Ich habe meine Website sogar aktualisiert, um den Build-Prozess zu entfernen, der die Verschachtelung kompiliert hat, und jetzt wird ein kleineres Stylesheet ausgeliefert. Ja, Stylesheets mit Verschachtelung sind kleiner und alle Browser-Entwicklertools sind bereit, sie darzustellen.

Eine Übersicht über die CSS-Schachtelungssyntax finden Sie hier. Das folgende Codebeispiel zeigt ein Syntaxbeispiel.

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

Überschriften vom Browser ausgleichen lassen

Ohne text-wrap: balance sind Entwickler und Texter auf Hinweise zum Zeilenumbruch wie <wbr>-Elemente oder ­ angewiesen. Das ist meistens ein Kampf gegen Windmühlen, denn sobald der Inhalt übersetzt, gezoomt oder in irgendeiner Weise geändert wird, gibt es keine Garantie, dass die Wrapping-Hinweise an der richtigen Stelle für die neue Darstellung des Inhalts platziert werden.

Mit dem ausgeglichenen Zeilenumbruch können Sie diese Arbeit dem Browser überlassen. Im folgenden Codepen sehen Sie einen Vergleich.

Containerabfrageeinheiten verwenden

Im Beitrag aus dem letzten Jahr wurde empfohlen, dass jeder Frontend-Entwickler wissen sollte, wie man eine Containerabfrage schreibt. Wenn Sie noch nicht gelernt haben, sollten Sie 2024 die Gelegenheit nutzen und sich auch die Einheiten für Containerabfragen ansehen. Ahmad Shadeed hat 2021 einen tollen Artikel über Einheiten für Containerabfragen geschrieben.

Es gibt sechs neue container query units:

1. Eine Inline-Variante cqi.
2. Eine Breitenvariante cqw.
3. Eine Blockvariante cqb
4. Eine Höhenvariante cqh.
5. Eine Variante für die kürzere Länge cqmin.
6. Eine Variante für die jeweils größere Länge cqmax.

Stellen Sie sich ein Szenario für relative und intrinsische Animationen für einen Container vor. Ein untergeordnetes Element, das mit 100cqi vollständig aus seinem Container herausgleitet. Das entspricht 100% der Inline-Größe des Containers.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

Hier sehen Sie eine Karte mit containerresponsiver Typografie und einem Bild, das sich an die Ausrichtung des Containers anpasst und bei einer Ausrichtung im Querformat halb so groß wird.

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

Wenn diese Einheiten neu für Sie sind, sollten Sie sich alle Einheiten ansehen, die Ihnen 2024 zur Verfügung stehen.