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;
}
}
@containercontainer2. 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-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. 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;
}
grid4. 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-ratio5. 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 {
…
}
}
@layer6. 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;
}