Leistungsstarkes und stabiles CSS für den Werkzeuggürtel, das Sie heute nutzen können.
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
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
container
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
scroll-snap-align
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
scroll-snap-stop
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
overscroll-behavior
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
margin-block
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
inset-inline
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">