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 und browserübergreifend verfügbar. Sie können sie 2023 für Breitenabfragen verwenden.

.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 abgestimmte 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: 63.
  • Edge: 18.
  • Firefox: 59.
  • 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 den ursprünglichen 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 dieses neue Boxmodell und müssen sich nie wieder Gedanken über das Ändern des linken und rechten Innen- oder Außenabstands für internationale Schreibmodi und Dokumentrichtungen machen. Passen Sie Ihre Stile von physischen Eigenschaften an logische 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