Przydatne i stabilne usługi CSS z paskiem narzędzi, z których możesz korzystać już dziś
Uważam, że każdy programista frontonu powinien wiedzieć, jak korzystać z zapytań dotyczących kontenerów, tworzyć środowisko przewijania, unikać position: absolute
za pomocą siatki, szybko wyciskać okrąg, używać warstw kaskadowych i docierać do większej liczby odbiorców za pomocą właściwości logicznych. Oto krótkie omówienie
tych oczekiwań.
1. Zapytanie dotyczące kontenera
Funkcja CSS najczęściej wymagana przez 10 lat jest obecnie stabilna w różnych przeglądarkach, a od 2023 r. będzie można z niej korzystać w przypadku zapytań dotyczących szerokości.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
@container
container
2. Przewiń
Dobrze skonstruowane funkcje przewijania wyróżniają treści na tle innych. Funkcja przyciągania to doskonały sposób na dopasowanie UX przewijania systemu, zapewniając zarazem przydatne 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 możliwościach tej funkcji CSS z tej ogromnej i inspirującej kolekcji Codepen obejmującej około 25 prezentacji.
scroll-snap-type
scroll-snap-align
scroll-snap-stop
overscroll-behavior
3. Stos siatki
Unikaj stosowania pozycji bezwzględnej w siatce CSS z jedną komórką. Gdy zostaną ułożone na siebie, użyj wyjustowania i wyrównania, aby je rozmieścić.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
4. Szybkie koło
Istnieje wiele sposobów tworzenia okręgów w CSS, ale ten jest najmniejszy.
.circle { inline-size: 25ch; aspect-ratio: 1; border-radius: 50%; }
aspect-ratio
5. Kontroluj warianty za pomocą @layer
Warstwy kaskadowe mogą pomagać w wstawianiu wariantów, które zostały wykryte lub utworzone później, we właściwym miejscu w kaskadzie z oryginalnym zestawem wariantów.
/* file buttons.css */ @layer components.buttons { .btn.primary { … } }
Następnie w zupełnie innym pliku, wczytywanym w innym losowej chwili, dołącz do warstwy przycisku nowy wariant tak, jakby był on dostępny przez cały ten czas z resztą.
/* file video-player.css */ @layer components.buttons { .btn.player-icon { … } }
@layer
6. Mniej zapamiętuj i docieraj do większego grona dzięki właściwościom logicznym
Zapamiętaj ten nowy model pola i nigdy nie martw się o zmianę lewego i prawego dopełnienia lub marginesów dla międzynarodowych trybów pisania i kierunków dokumentu.
Dostosuj style – od właściwości fizycznych po styl logiczny, np. padding-inline
, margin-inline
czy inset-inline
. Teraz przeglądarka dostosuje styl.
button { padding-inline: 2ch; padding-block: 1ch; } article > p { text-align: start; margin-block: 2ch; } .something::before { inset-inline: auto 0; }