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

Unterstützte Browser

• 105
• 105
• 110
• 16

Quelle

container

Unterstützte Browser

• 105
• 105
• 110
• 16

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

• 69
• 79
• 99
• 11

Quelle

scroll-snap-align

Unterstützte Browser

• 69
• 79
• 68
• 11

Quelle

scroll-snap-stop

Unterstützte Browser

• 75
• 79
• 103
• 15

Quelle

overscroll-behavior

Unterstützte Browser

• 63
• 18
• 59
• 16

Quelle

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

Unterstützte Browser

• 57
• 16
• 52
• 10.1

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

• 88
• 88
• 89
• 15

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 anderen Datei, die zu einem anderen zufälligen Zeitpunkt geladen wird, der Schaltflächenebene eine neue Variante hinzu, als wäre sie schon die ganze Zeit da gewesen.

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

@layer

Unterstützte Browser

• 99
• 99
• 97
• 15.4

Quelle

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

Unterstützte Browser

• 87
• 87
• 66
• 14.1

Quelle

margin-block

Unterstützte Browser

• 87
• 87
• 66
• 14.1

Quelle

inset-inline

Unterstützte Browser

• 87
• 87
• 63
• 14.1

Quelle