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

Leistungsstarkes und stabiles CSS, das Sie sofort verwenden 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 finden Sie einen kurzen Ü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 Breitenabfragen verwendet werden.

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

.card {
  padding: 1rem;
}

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

@container

Browser Support

• 105
• 105
• 110
• 16

Source

container

Browser Support

• 105
• 105
• 110
• 16

Source

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

Browser Support

• 69
• 79
• 99
• 11

Source

scroll-snap-align

Browser Support

• 69
• 79
• 68
• 11

Source

scroll-snap-stop

Browser Support

• 75
• 79
• 103
• 15

Source

overscroll-behavior

Browser Support

• 63
• 18
• 59
• 16

Source

3. Rasterstapel

Vermeiden Sie die absolute Positionierung bei einem CSS-Raster mit einer einzelnen Zelle. 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

Browser Support

• 57
• 16
• 52
• 10.1

Source

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

Browser Support

• 88
• 88
• 89
• 15

Source

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

Browser Support

• 99
• 99
• 97
• 15.4

Source

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

Merken Sie sich dieses neue Box-Modell und Sie müssen nie wieder den linken und rechten Abstand oder Rand für internationale Schreibmodi und Dokumentrichtungen ändern. 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

Browser Support

• 87
• 87
• 66
• 14.1

Source

margin-block

Browser Support

• 87
• 87
• 66
• 14.1

Source

inset-inline

Browser Support

• 87
• 87
• 63
• 14.1

Source