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 Containerabfrageeinheiten 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() ist seit Ende 2023 in allen gängigen Browsern verfügbar. Diese neue Auswahlfunktion sieht klein und unschuldig aus, aber Sie werden überrascht sein, wie viele Anwendungsfälle sie ermöglicht: Spiele, Reaktivität, inhaltsbewusstes Layout, Smart-Komponenten und vieles mehr, das in diesem Artikel von Jhey ausführlich beschrieben wird.

Hier einige Beispiele für die Verwendung von :has() als übergeordneten 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 auf ein untergeordnetes Element weiter unten auf der Seite ausgerichtet.

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, in dem 1 bis 12 Elemente im Hoch- oder Querformat elegant dargestellt werden können:

Unterraster erstellen

Viele Jahre lang hat die Front-End-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-Verschachtelung

Die integrierte CSS-Verschachtelung ist seit 2023 in allen gängigen Browsern verfügbar. Ich habe meine Website sogar aktualisiert, um den Build-Prozess zu entfernen, bei dem die Verschachtelung kompiliert wurde. Jetzt wird ein kleineres Stylesheet ausgeliefert. Ja, Stylesheets mit Verschachtelung sind kleiner und alle Browser-Entwicklertools können sie darstellen.

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 aussichtsloser Kampf, denn sobald der Inhalt übersetzt, gezoomt oder in irgendeiner Weise geändert wird, gibt es keine Garantie, dass die Umbruchhinweise für die neue Darstellung des Inhalts an der richtigen Stelle sind.

Mit dem ausgeglichenen Zeilenumbruch können Sie diese Arbeit dem Browser überlassen. Einen Vergleich finden Sie im folgenden Codepen.

Containerabfrageeinheiten verwenden

Im Beitrag aus dem letzten Jahr wurde vorgeschlagen, dass jeder Frontend-Entwickler wissen sollte, wie man eine Containerabfrage schreibt. Wenn Sie noch nicht gelernt haben, sollten Sie 2024 nutzen, um den Sprung zu wagen. Sehen Sie sich auch die Einheiten für Containerabfragen an. 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 sind 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.