Zaawansowany, stabilny i dostosowany do pasków narzędzi CSS, z którego możesz korzystać już dziś.
Uważam, że każdy front-end developer powinien wiedzieć, jak używać zapytań dotyczących kontenerów, tworzyć przeskakiwanie przy przewijaniu, unikać position: absolute
w siatce, szybko tworzyć koła, używać warstw kaskadowych i osiągać większą skuteczność przy mniejszych nakładach za pomocą właściwości logicznych. Oto krótkie omówienie tych oczekiwań.
1. Zapytanie dotyczące kontenera
Najbardziej pożądana funkcja CSS przez 10 lat z rzędu jest stabilna w różnych przeglądarkach i będzie dostępna w 2023 r. w przypadku zapytań o szerokość.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
2. Przyciąganie podczas przewijania
Dobrze zorganizowane funkcje związane z przewijaniem wyróżniają się na tle innych, a przyciąganie to doskonały sposób na dopasowanie UX przewijania w systemie, zapewniając jednocześnie istotne punkty zatrzymania.
.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;
}
Dowiedz się więcej o potencjale tej funkcji CSS z tej ogromnej i inspirującej kolekcji Codepen, która zawiera około 25 demonstracji.
scroll-snap-type
scroll-snap-align
scroll-snap-stop
overscroll-behavior
3. Stos siatki
Unikaj pozycji bezwzględnej w przypadku siatki CSS z jedną komórką. Gdy elementy są ułożone jeden na drugim, użyj właściwości wyrównania i wyrównania poziomego, aby je ustawić.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
4. Szybki okrąg
Istnieje wiele sposobów tworzenia kół w CSS, ale ten jest zdecydowanie najbardziej minimalny.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio
5. Sterowanie wersjami za pomocą @layer
Warstwy kaskadowe mogą pomóc w wstawianiu wariantów odkrytych lub utworzonych później we właściwym miejscu w kaskadzie z pierwotnym zestawem wariantów.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
Następnie w zupełnie innym pliku, wczytanym w innym losowym momencie, dodaj nowy wariant do warstwy przycisku, tak jakby był tam od samego początku.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer
6. Mniej zapamiętywania, większy zasięg dzięki właściwościom logicznym
Zapamiętaj ten nowy model pudełka i nigdy więcej nie martw się o zmianę wyrównania do lewej i prawej lub marginesu w przypadku międzynarodowych trybów i kierunków dokumentów.
Dostosuj style z właściwości fizycznych do logicznych, takich jak padding-inline
, margin-inline
i inset-inline
. Teraz przeglądarka wykona za Ciebie tę pracę.
button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}