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

Leistungsstarkes und stabiles Preisvergleichsportal, das sich für die Tools eignet, das Sie sofort nutzen können.

Ich denke, jeder Frontend-Entwickler sollte wissen, dass :has() mehr ist als ein übergeordneter Selektor, das Wie und Warum einer subgrid, wie sie mit der integrierten CSS-Syntax verschachtelt werden, wie der Browser den Zeilenumbruch von Anzeigentiteln ausbalanciert und wie Container-Abfrageeinheiten verwendet werden können.

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

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

:has() war Ende 2023 in allen gängigen Browsern verfügbar. Dieser neue Selektor scheint klein und unschuldig zu sein, aber Sie werden überrascht sein, welche Anwendungsfälle ihn ermöglichen: Spiele, Reaktivität, inhaltsorientiertes Layout, intelligente Komponenten und vieles mehr, das in diesem Artikel von Jhey gut erörtert wird.

Hier einige Beispiele für die Verwendung von :has() als übergeordneten Selektor. Dieser Name wird genannt, weil sich das Thema eines Selektors normalerweise am Ende befindet, z. B. ul li, wobei li das Subjekt ist und die Stile abruft. Mit :has() kann das Element am Anfang des Selektors zum Thema werden. Im folgenden Beispiel hat die Schaltfläche eine Lücke, wenn sich ein Element mit einer Klasse von .icon befindet. Die Ausrichtung der Karte ändert sich, wenn darin ein Bild zu sehen ist.

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

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

Eine lang erwünschte Auswahl besteht darin, ein Layout basierend auf der Anzahl der Elemente zu ändern. Dies 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: Sie können Stile ändern, die im gesamten Dokument festgelegt werden, wenn ein bestimmtes Kästchen auf der Seite aktiviert ist:

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

Dies sind einfache Anwendungsfälle, bei denen das Thema des Selektors nicht geändert wird. Wenn Sie sich Beispiele wie dieses ansehen, könnten Sie denken, dass :has() auf einen übergeordneten Selektor beschränkt ist. Betrachten Sie jedoch die folgenden Beispiele. Diese prüfen etwas, das auf einem gemeinsamen Vorgänger basiert, und pivotieren dann den Selektor auf ein untergeordnetes Element weiter unten auf der Seite.

Hier wird ein Formularfehlerelement angezeigt, wenn eine Eingabe ungültig ist:

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

Hier wird der Hauptinhaltsbereich verschoben, wenn eine seitliche Navigationsleiste eine Klasse von .--is-open hat:

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

In der folgenden unterhaltsamen Demo wird :has() als übergeordneter Selektor, :has() mit Mengenabfragen und Containerabfragen verwendet, um ein Rasterlayout zu erstellen, das auf elegante Weise 1–12 Elemente im Hoch- oder Querformat anzeigen kann:

Unterraster erstellen

Viele Jahre lang bat die Frontend-Web-Community um Subgrid, um die äußerst beliebte und leistungsstarke CSS-Grid-Layout-Engine zu ergänzen und fertigzustellen. Es ist jetzt in allen drei großen Suchmaschinen verfügbar.

Weitere Informationen zum Subraster

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

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

Preisvergleichsportal-Verschachtelung

Die integrierte CSS-Verschachtelung wurde 2023 in allen gängigen Browsern verfügbar. Ich habe sogar meine Website aktualisiert, um den Build-Prozess zu entfernen, der die Verschachtelung verschachtelt. Jetzt versende ich ein kleineres Stylesheet. Ja, verschachtelte Stylesheets sind kleiner und alle Browser-Entwicklertools können sie darstellen.

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

Der Browser sollte Anzeigentitel ausbalancieren.

Ohne text-wrap: balance müssen Entwickler und Texter Richtlinien für Zeilenumbrüche wie <wbr>-Elemente oder ­ eingeben. Dabei handelt es sich größtenteils um eine unübertroffene Schlacht, denn sobald der Inhalt übersetzt, vergrößert oder verändert wurde, gibt es keine Garantie, dass diese Umbruchhinweise auch bei der neuen Präsentation an der richtigen Stelle platziert werden.

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

Containerabfrageeinheiten verwenden

Im letzten Beitrag wurde vorgeschlagen, dass jeder Frontend-Entwickler wissen sollte, wie eine Containerabfrage geschrieben wird. Wenn Sie noch nicht gelernt haben, sollten Sie 2024 zum Jahr des Sprungs machen und sich auch Container-Abfrageeinheiten ansehen. Zum Überblick: Ahmad Shadeed hat 2021 einen tollen Artikel über Container-Abfrageeinheiten geschrieben.

Es gibt sechs neue Container-Quereinheiten:

1. Eine Inline-Variante cqi.
2. Eine Breitenvariante cqw.
3. Eine Blockvariante cqb.
4. Eine Höhenvariante cqh.
5. Eine Variante für eine kleinere Länge: cqmin.
6. Eine Variante für eine beliebige Länge ist größer als cqmax.

Stellen Sie sich ein Szenario für relative und unveränderliche Animationen eines Containers vor. Ein untergeordnetes Element, das mithilfe von 100cqi (100% der Container-Inline-Größe) vollständig aus dem Container gleitet.

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

Hier sehen Sie eine Karte mit Container-Responsive-Typografie und ein 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 Sie diese Einheiten neu für Sie sind, empfiehlt es sich wahrscheinlich, alle Einheiten zu überprüfen, die Ihnen 2024 zur Verfügung stehen.