Diese Seite wurde von der Cloud Translation API übersetzt.

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

Leistungsstarkes und stabiles CSS für den Werkzeuggürtel, das Sie heute nutzen können.

Adam Argyle

Ich denke, jeder Frontend-Entwickler sollte wissen, dass :has() mehr als nur ein übergeordneter Selektor ist das Wie und Warum von subgrid, wie Sie mit integrierter CSS-Syntax verschachteln, wie Sie die und die Verwendung von Container-Abfrageeinheiten.

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

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

:has()

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

:has() war Ende 2023 in allen gängigen Browsern verfügbar. Dieser neue Selector scheint klein und unschuldig sind. Sie werden jedoch überrascht sein, welche Anwendungsfälle damit möglich sind: Spiele, Reaktivität, inhaltsbewusstes Layout, intelligente Komponenten und viele weitere Informationen finden Sie in diesem Artikel von Jhey.

4 Felder mit jeweils einem Bild und einer Bildunterschrift werden angezeigt.
Jedes Bild zeigt ein Gehirn, das immer mehr Gehirnleistung aktiviert. Das erste Panel
sagt :has(). Im zweiten Panel steht „figur:has(caption)“ als übergeordnetes Element zur Auswahl.
Im dritten Bereich steht .layout:has(> :nth-child(5)) als Mengenauswahl.
Im vierten Steuerfeld wird „html:has(#checked) .new-subject“ als Selektor für bedingte Betreffänderungen angezeigt.

Hier sind einige Beispiele für die Verwendung von :has() als übergeordneten Selektor. Es hat diesen Namen, weil Normalerweise befindet sich das Subjekt eines Selektors am Ende, z. B. ul li, wobei li der Betreff ist und erhält die Stile. Mit :has() kann das Element am Anfang des Selektors zu das Subjekt. Im folgenden Beispiel weist die Schaltfläche eine Lücke auf, wenn sich darin ein Element befindet. mit der Klasse .icon. Die Ausrichtung der Karte ändert sich, wenn ein Bild darin enthalten ist.

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

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

Ein Selektor sollte ein Layout basierend auf der Anzahl der Elemente ändern. Dies ist jetzt möglich durch :has(), da so der Container als Betreff beibehalten werden kann, während die Anzahl der untergeordneten Elemente abgefragt wird.

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

Ein weiteres übergeordnetes Beispiel: Stile für das gesamte Dokument ändern Wenn ein bestimmtes Kästchen auf der Seite aktiviert ist:

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

Dies sind einfache Anwendungsfälle, bei denen sich das Thema des Selektors nicht ändert, wenn man sich nur die Beispiele ansieht. wie hier dargestellt, könnten Sie denken, dass :has() nur ein Selektor für übergeordnete Elemente ist. Hier einige Tipps: Beispiele. Diese suchen nach Inhalten, die auf einem gemeinsamen Vorgänger basieren, und pivotieren dann den Selektor irgendwo auf der Seite einem Kind ausgesetzt sind.

Hier sehen Sie ein Fehlerelement für das Formular, wenn eine der Eingaben ungültig ist:

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

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

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

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

</ph> <ph type="x-smartling-placeholder">

</ph> Codepen ausprobieren

Subraster erstellen

subgrid

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

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

Weitere Informationen zu Subgrid

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

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

CSS verschachteln

nesting

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Die integrierte CSS-Verschachtelung ist seit 2023 in allen gängigen Browsern verfügbar. Ich habe sogar meine Website aktualisiert, um den Erstellungsprozess zu entfernen, ein kleineres Stylesheet. Ja, Stylesheets mit Verschachtelung sind kleiner und die Entwicklertools bereit sind.

Hier finden Sie eine Übersicht über die Syntax für CSS-Verschachtelungen. . 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;
  }
}

Den Browser ausbalancieren lassen

balance

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

pretty

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Ohne text-wrap: balance müssen Entwickler und Texter Hinweise zum Zeilenumbruch einfügen wie <wbr>-Elemente oder . Meistens ist es eine Niederlage, denn sobald die übersetzt, gezoomt oder verändert wurde, gibt es keine Garantie dafür, Wrapping-Hinweise an der richtigen Stelle für die neue Präsentation des Inhalts sein.

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

Container-Abfrageeinheiten verwenden

cqw

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Der Beitrag aus dem letzten Jahr schlug vor, dass alle Frontend-Entwickelnden wissen sollten, wie ein Containerabfrage. Wenn Sie es noch nicht gelernt haben: Machen Sie 2024 zu dem richtigen Jahr, und schauen Sie sich Container-Abfrageeinheiten an. Als Übersicht Ahmad Shadeed hat 2021 einen tollen Artikel über Container-Abfrageeinheiten verfasst.

Es gibt sechs neue Konzahleinheiten:

Eine Inline-Variante cqi.
Eine Variante für die Breite (cqw).
Eine Blockvariante cqb.
Eine Höhenvariante cqh.
Eine Variante für die jeweilige Länge, die kürzer ist: cqmin.
Eine Variante für die jeweilige Länge, die größer ist: cqmax.

Stellen Sie sich ein Szenario mit relativen und unveränderlichen Animationen in einem Container vor. Ein untergeordnetes Element, das vollständig aus dem Container herausgeschoben wird, mit 100cqi, also 100% der Inline-Größe des Containers.

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

Hier ist eine Karte mit einer Container-responsiven Typografie und einem Bild, das sich an die die Ausrichtung des Containers, also halb so groß, wenn das Querformat verwendet wird.

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

  img {
    inline-size: 100cqi;

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

Falls Sie noch nicht mit diesen Einheiten vertraut sind, empfiehlt es sich, alle Einheiten ansehen, die dir 2024 zur Verfügung stehen.