Leistungsstarkes und stabiles CSS, das Sie sofort verwenden können.
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;
}
}
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
scroll-snap-align
scroll-snap-stop
overscroll-behavior
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
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
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
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; }