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 mit der Verwendung von Containern Abfragen ein Scroll-Snap-Erlebnis schaffen, position: absolute mit Raster, hämmt schnell einen Kreis aus und verwende das Ebenen, und erreichen Sie mehr mit weniger über logische Eigenschaften. Hier eine kurze einen Überblick über diese Erwartungen.

1. Eine Containerabfrage

Die beliebteste Preisvergleichsportal-Funktion seit 10 Jahren ist jetzt ist browserübergreifend stabil und kann von Ihnen verwendet werden. für Breitenabfragen im Jahr 2023.

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

.card {
  padding: 1rem;
}

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

Unterstützte Browser

  • Chrome: 105 <ph type="x-smartling-placeholder">
  • Edge: 105. <ph type="x-smartling-placeholder">
  • Firefox: 110 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Quelle

container

Unterstützte Browser

  • Chrome: 105 <ph type="x-smartling-placeholder">
  • Edge: 105. <ph type="x-smartling-placeholder">
  • Firefox: 110 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Quelle

2. Scroll-Snap

Gut orchestriertes Scrollen hebt Ihre Nutzererfahrung von der Masse ab. und scrollen Snap ist der die perfekte Methode, um die Scroll-UX des Systems anzupassen und gleichzeitig eine sinnvolle Pause zu bieten. Punkte.

.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 über das Potenzial dieser CSS-Funktion finden Sie in dieser umfassenden und inspirierenden Codepen-Sammlung mit etwa 25 Demos.

scroll-snap-type

Unterstützte Browser

  • Chrome: 69. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 99. <ph type="x-smartling-placeholder">
  • Safari: 11. <ph type="x-smartling-placeholder">

Quelle

scroll-snap-align

Unterstützte Browser

  • Chrome: 69. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 68 <ph type="x-smartling-placeholder">
  • Safari: 11. <ph type="x-smartling-placeholder">

Quelle

scroll-snap-stop

Unterstützte Browser

  • Chrome: 75 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 103 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

Quelle

overscroll-behavior

Unterstützte Browser

  • Chrome: 63 <ph type="x-smartling-placeholder">
  • Edge: 18. <ph type="x-smartling-placeholder">
  • Firefox: 59. <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Quelle

3. Gitterstapel

Vermeiden Sie eine absolute Positionierung mit einem einzelligen CSS-Raster. Sobald sie aufgestapelt sind, untereinander, verwenden Sie und richten Sie Eigenschaften aus, um sie zu positionieren.

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

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

Unterstützte Browser

  • Chrome: 57. <ph type="x-smartling-placeholder">
  • Edge: 16. <ph type="x-smartling-placeholder">
  • Firefox: 52. <ph type="x-smartling-placeholder">
  • Safari: 10.1 <ph type="x-smartling-placeholder">

Quelle

4. Schneller Kreis

Es gibt viele Möglichkeiten, Kreise in CSS zu erstellen, aber das ist definitiv minimal.

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

Unterstützte Browser

  • Chrome: 88 <ph type="x-smartling-placeholder">
  • Edge: 88. <ph type="x-smartling-placeholder">
  • Firefox: 89. <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

Quelle

5. Varianten mit @layer steuern

Cascade Ebenen kann Varianten einfügen entdeckt oder geschaffen haben, an der richtigen Stelle ursprünglichen Variantensatzes.

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

Fügen Sie dann in einer völlig anderen Datei, die zu einem zufälligen Zeitpunkt geladen wird, eine neue Variante der Schaltflächenebene hinzu, als ob sie sich zusammen mit den übrigen Elementen die ganze Zeit über.

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

Unterstützte Browser

  • Chrome: 99. <ph type="x-smartling-placeholder">
  • Edge: 99. <ph type="x-smartling-placeholder">
  • Firefox: 97 <ph type="x-smartling-placeholder">
  • Safari: 15.4 <ph type="x-smartling-placeholder">

Quelle

6. Mit logischen Attributen mehr auswendig lernen und mehr erreichen

Dieses neue Boxmodell auswendig lernen und Sie müssen sich keine Sorgen machen, Ändern des linken und rechten Abstands oder des Rands für internationale Texterstellung Modi und Dokument Passen Sie Ihre Stile von physischen bis logischen wie padding-inline, margin-inline, inset-inline, und der Browser übernimmt 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

Unterstützte Browser

  • Chrome: 87 <ph type="x-smartling-placeholder">
  • Edge: 87. <ph type="x-smartling-placeholder">
  • Firefox: 66 <ph type="x-smartling-placeholder">
  • Safari: 14.1 <ph type="x-smartling-placeholder">

Quelle

margin-block

Unterstützte Browser

  • Chrome: 87 <ph type="x-smartling-placeholder">
  • Edge: 87. <ph type="x-smartling-placeholder">
  • Firefox: 66 <ph type="x-smartling-placeholder">
  • Safari: 14.1 <ph type="x-smartling-placeholder">

Quelle

inset-inline

Unterstützte Browser

  • Chrome: 87 <ph type="x-smartling-placeholder">
  • Edge: 87. <ph type="x-smartling-placeholder">
  • Firefox: 63 <ph type="x-smartling-placeholder">
  • Safari: 14.1 <ph type="x-smartling-placeholder">

Quelle