6 CSS-Snippets, die jeder Front-End-Entwickler 2023 kennen sollte

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

Adam Argyle

Meiner Meinung nach sollte jeder Frontend-Entwickler wissen, wie man Containerabfragen verwendet, Scroll-Snap-Effekte erstellt, position: absolute mit Grid vermeidet, schnell einen Kreis erstellt, Cascading Layers verwendet und mit logischen Eigenschaften mehr mit weniger erreicht. Hier ist ein kurzer Überblick über die einzelnen Erwartungen.

1. Containerabfrage

Die am häufigsten angeforderte CSS-Funktion seit 10 Jahren ist jetzt stabil in allen Browsern und kann 2023 für Breitenabfragen verwendet werden.

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}
@container

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

container

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

2. Scroll Snap

Gut inszenierte Scrollvorgänge heben Ihre App von anderen ab. Mit Scroll-Snapping können Sie die Scroll-UX des Systems nachbilden und gleichzeitig sinnvolle Haltepunkte schaffen.

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

Hier finden Sie eine große und inspirierende Codepen-Sammlung mit etwa 25 Demos, die das Potenzial dieser CSS-Funktion veranschaulichen.

scroll-snap-type

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 99.
  • Safari: 11.

Source

scroll-snap-align

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 68.
  • Safari: 11.

Source

scroll-snap-stop

Browser Support

  • Chrome: 75.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 15.

Source

overscroll-behavior

Browser Support

  • Chrome: 144.
  • Edge: 18.
  • Firefox: 150.
  • Safari: 16.

Source

3. Rasterstapel

Vermeiden Sie „position: absolute“ bei einem CSS-Grid mit einer einzelnen Zelle. Sobald sie übereinander gestapelt sind, können Sie sie mit den Eigenschaften „justify“ und „align“ positionieren.

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}
grid

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

4. Schnellzugriff

Es gibt viele Möglichkeiten, Kreise in CSS zu erstellen, aber diese ist definitiv die minimalistischste.

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}
aspect-ratio

Browser Support

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 89.
  • Safari: 15.

Source

5. Varianten mit @layer steuern

Kaskadenschichten können helfen, Varianten einzufügen, die später erkannt oder erstellt wurden, und zwar an der richtigen Stelle in der Kaskade mit dem ursprünglichen Satz von Varianten.

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

Fügen Sie dann in einer völlig anderen Datei, die zu einem anderen zufälligen Zeitpunkt geladen wird, der Schaltflächenebene eine neue Variante hinzu, als wäre sie die ganze Zeit mit den anderen vorhanden gewesen.

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}
@layer

Browser Support

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4.

Source

6. Weniger auswendig lernen und mehr erreichen mit logischen Eigenschaften

Merken Sie sich ein neues Boxmodell und müssen sich nie wieder um das Ändern des linken und rechten Innenabstands oder Rands für internationale Schreibmodi und Dokumentrichtungen kümmern. Passen Sie Ihre Stile von physischen zu logischen Eigenschaften wie padding-inline, margin-inline und inset-inline an. Der Browser übernimmt dann die Anpassung.

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}
padding-inline

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Source

margin-block

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Source

inset-inline

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 63.
  • Safari: 14.1.

Source