Leistungsstarkes und stabiles Preisvergleichsportal, das sich für die Tools eignet, das Sie sofort nutzen können.
Ich denke, jeder Frontend-Entwickler sollte wissen, wie man Containerabfragen verwendet, ein Scroll-Snap-Erlebnis ermöglicht, position: absolute mit Raster vermeiden, schnell einen Kreis aushämmern, Kaskadenebenen verwenden und mit weniger logischen Eigenschaften mehr erreichen sollte. Hier ist ein kurzer Überblick
über diese Erwartungen.
1. Eine Containerabfrage
Die am häufigsten angeforderte CSS-Funktion ist seit zehn Jahren jetzt stabil in allen Browsern und kann ab 2023 für Breitenabfragen verwendet werden.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
@containercontainer2. Scroll-Snap
Gut orchestriertes Scrollen hebt sich vom Rest ab. Scroll-Snap ist die perfekte Möglichkeit, die Scroll-UX des Systems anzupassen und gleichzeitig sinnvolle Stopps 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;
}
In dieser großen und inspirierenden Codepen-Sammlung mit rund 25 Demos erfahren Sie mehr über das Potenzial dieser CSS-Funktion.
scroll-snap-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. Rasterstapel
Vermeiden Sie die absolute Position mit einem CSS-Raster mit einer einzelnen Zelle. Sobald sie übereinander gelegt sind, verwenden Sie die Attribute „Justify“ und „Align“, um sie zu positionieren.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. Schnellkreis
Es gibt viele Möglichkeiten, Kreise in CSS zu erstellen, aber dies ist definitiv die geringste Version.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. Varianten mit @layer steuern
Kaskadenebenen können hilft, später erkannte oder erstellte Varianten an der richtigen Stelle in der Kaskade mit dem ursprünglichen Variantensatz einzufügen.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
Dann fügen Sie in einer völlig anderen Datei, die zu einem anderen zufälligen Zeitpunkt geladen wird, eine neue Variante an die Schaltflächenebene an, so als wäre sie die ganze Zeit zusammen mit den restlichen Elementen vorhanden.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. Mit logischen Properties weniger auswendig lernen und mehr erreichen
Merken Sie sich dieses neue Feldmodell und müssen Sie sich keine Sorgen mehr machen, dass Sie den linken und rechten Abstand oder den Rand für internationale Schreibmodi und Dokumentanweisungen noch einmal ändern müssen.
Passen Sie Ihre Stile von physischen in logische Stile wie padding-inline, margin-inline inset-inline an. Der Browser übernimmt nun die Anpassung.
button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}