Diese Seite wurde von der Cloud Translation API übersetzt.

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

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

Adam Argyle

Ich bin der Meinung, dass jeder Frontend-Entwickler wissen sollte, wie man Containerabfragen verwendet, einen Scroll-Snap erstellt, position: absolute mit Grid vermeidet, schnell einen Kreis zeichnet, abgestufte Ebenen verwendet und mit logischen Eigenschaften mehr mit weniger erreicht. Hier ist ein kurzer Überblick über diese Erwartungen.

1. Containerabfrage

Die seit zehn Jahren am häufigsten angefragte CSS-Funktion ist jetzt plattformübergreifend stabil und kann 2023 für Breiteabfragen verwendet werden.

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

.card {
  padding: 1rem;
}

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

@container

Unterstützte Browser

Quelle

container

Unterstützte Browser

Quelle

2. Scroll-Snap

Eine gut abgestimmte Scrollfunktion hebt Ihre Website von der Masse ab. Snap-Scrolling ist die perfekte Möglichkeit, die Scrollfunktion des Systems anzupassen und gleichzeitig sinnvolle Endpunkte zu bieten.

.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;
}

Weitere Informationen zum Potenzial dieser CSS-Funktion finden Sie in dieser großen und inspirierenden Codepen-Sammlung mit etwa 25 Demos.

scroll-snap-type

Unterstützte Browser

Quelle

scroll-snap-align

Unterstützte Browser

Quelle

scroll-snap-stop

Unterstützte Browser

Quelle

overscroll-behavior

Unterstützte Browser

Quelle

3. Rasterstapel

Vermeiden Sie eine absolute Positionierung mit einem einzelligen CSS-Raster. Sobald sie übereinander gestapelt sind, können Sie sie mithilfe der Eigenschaften „justify“ und „align“ positionieren.

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

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

grid

Unterstützte Browser

Quelle

4. Schneller Kreis

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

Unterstützte Browser

Quelle

5. Varianten mit @layer steuern

Kaskadenebenen können dabei helfen, später entdeckte oder erstellte Varianten an der richtigen Stelle in der Kaskade mit der ursprünglichen Gruppe von Varianten einzufügen.

/* 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 über da gewesen.

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

@layer

Unterstützte Browser

Quelle

6. Mit logischen Properties weniger auswendig lernen und mehr Nutzer erreichen

Sie können sich dieses einzige Boxmodell merken und Sie müssen sich keine Sorgen machen, dass der linke und rechte Innenrand oder der Rand für internationale Schreibmodi und die Anweisungen zum Dokument geändert werden müssen. Passen Sie Ihre Stile von physischen zu logischen Eigenschaften an, z. B. padding-inline, margin-inline oder inset-inline. Die Anpassung erfolgt dann automatisch durch den Browser.

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

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

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

padding-inline

Unterstützte Browser

Quelle

margin-block

Unterstützte Browser

Quelle

inset-inline

Unterstützte Browser

Quelle