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

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

Adam Argyle

Ich bin der Meinung, dass jeder Frontend-Entwickler wissen sollte, dass :has() mehr als nur ein übergeordneter Selector ist. Er sollte wissen, wie und warum :has() verwendet wird, wie man mit der integrierten CSS-Syntax verschachtelt, wie der Browser den Textumbruch von Überschriften ausbalancieren lässt und wie man Containerabfrageeinheiten verwendet.subgrid

Dieser Beitrag ist eine Fortsetzung der 6 CSS-Snippets, die jeder Frontend-Entwickler 2023 kennen sollte.

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

:has() wurde Ende 2023 in allen gängigen Browsern eingeführt. Diese neue Auswahl erscheint zwar klein und unscheinbar, aber Sie werden überrascht sein, wie viele Anwendungsfälle sich damit eröffnen: Spiele, Reaktivität, inhaltsbezogenes Layout, intelligente Komponenten und viel mehr, was in diesem Artikel von Jhey gut erläutert wird.

Hier einige Beispiele für die Verwendung von :has() als übergeordneten Selektor. Dieser Name wurde gewählt, weil sich das Subjekt einer Auswahl normalerweise am Ende befindet, z. B. bei ul li, wobei li das Subjekt ist und die Stile erhält. Mit :has() kann das Element am Anfang der Auswahl zum Betreff 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 sich ein Bild darauf befindet.

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

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

Seit langem wird eine Auswahlmöglichkeit gefordert, mit der sich das Layout je nach Anzahl der Elemente ändern lässt. Das ist jetzt mit :has() 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: Stile, die für das gesamte Dokument festgelegt sind, werden geändert, 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 der Auswahl nicht ändert. Wenn Sie sich nur solche Beispiele ansehen, könnten Sie denken, dass :has() nur als übergeordnete Auswahl verwendet werden kann. Sehen wir uns jedoch die folgenden Beispiele an. Dabei wird anhand eines gemeinsamen übergeordneten Elements nach etwas gesucht und dann das Auswahlobjekt auf ein untergeordnetes Element weiter unten auf der Seite umgelenkt.

In diesem Beispiel wird ein Formularfehlerelement angezeigt, wenn eine der Eingaben ungültig ist:

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

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

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

Hier ist eine unterhaltsame Demo, in der :has() als übergeordnete Auswahl, :has() mit Mengenabfragen und Containerabfragen verwendet wird, um ein Rasterlayout zu erstellen, in dem 1–12 Elemente im Hoch- oder Querformat elegant dargestellt werden können:

Unterraster erstellen

Seit vielen Jahren forderte die Front-End-Web-Community ein Subgrid, um das äußerst beliebte und leistungsstarke CSS-Grid-Layout-System zu vervollständigen. Sie ist jetzt in allen drei großen Suchmaschinen 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

Eingebettetes CSS-Verschachteln war 2023 in allen gängigen Browsern verfügbar. Ich habe sogar meine Website aktualisiert, um den Build-Prozess zu entfernen, der das Verschachtelungs-Markup kompiliert hat. Jetzt kann ich ein kleineres Stylesheet bereitstellen. Ja, Stylesheets mit Verschachtelung sind kleiner und alle Browser-Entwicklertools sind bereit, sie darzustellen.

Eine Übersicht über die CSS-Verschachtelungssyntax 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;
  }
}

Anzeigentitel vom Browser ausrichten lassen

Ohne text-wrap: balance müssen Entwickler und Texter sich auf Hinweise für Zeilenumbrüche wie <wbr>-Elemente oder ­ verlassen. Das ist in den meisten Fällen ein Kampf gegen Windmühlen, denn sobald die Inhalte übersetzt, herangezoomt oder in irgendeiner Weise geändert werden, gibt es keine Garantie dafür, dass diese Umbruchhinweise für die neue Präsentation der Inhalte an der richtigen Stelle sind.

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

Containerabfrageeinheiten verwenden

Im Beitrag vom letzten Jahr wurde vorgeschlagen, dass jeder Frontend-Entwickler wissen sollte, wie man eine Containerabfrage schreibt. Wenn Sie es noch nicht getan haben, sollten Sie 2024 das Jahr sein, in dem Sie sich mit diesem Thema vertraut machen und sich auch Containerabfrageeinheiten ansehen. Ahmad Shadeed hat 2021 einen guten Artikel über Containerabfrageeinheiten geschrieben.

Es gibt sechs neue Container-Abfrageblöcke:

1. Eine Inline-Variante cqi.
2. Eine Breitevariante 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 sich mit 100 cqi vollständig aus seinem Container herausschiebt, d. h. 100% der In-Line-Größe des Containers.

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

Hier sehen Sie eine Karte mit responsiver Typografie für den Container und ein Bild, das sich an die Ausrichtung des Containers anpasst und 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 Sie diese Einheiten noch nicht kennen, sollten Sie sich alle Einheiten ansehen, die Ihnen 2024 zur Verfügung stehen.