Zaawansowany, stabilny i dostosowany do pasków narzędzi CSS, z którego możesz korzystać już dziś.
Uważam, że każdy programista interfejsu powinien wiedzieć, że :has() to więcej niż „selektor elementów nadrzędnych”
jak i dlaczego subgrid, jak zagnieżdżać z wbudowaną składnią CSS, jak umożliwić
przeglądarki zawijania tekstu nagłówków i używania jednostek zapytań w kontenerach.
Ten post jest kontynuacją 6 z zeszłych lat 6 fragmentów kodu CSS, które każdy programista interfejsu powinien znać w 2023 r.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
Pod koniec 2023 roku aplikacja :has() pojawiła się we wszystkich popularnych przeglądarkach. Nowy selektor wydaje się,
ale jak małe i niewinne, ale zdziwi się, ile z nich można uzyskać:
gier, reaktywności, układu uwzględniającego treść, inteligentnych komponentów
o wiele więcej omawianego w tym artykule Jheya.
Oto kilka przykładów użycia elementu :has() jako selektora nadrzędnego. Wziął tę nazwę,
zwykle obiekt selektora znajduje się na końcu, np. ul li, gdzie li to temat
i dobiera style. Dzięki :has() element na początku selektora może zostać
tematu. W poniższym przykładzie w przycisku jest luka, jeśli w środku jest element
z klasą .icon. Jeśli na środku znajduje się obraz, karta zmieni orientację.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Długi selektor to zmiana układu w zależności od liczby elementów. Teraz jest to możliwe
z funkcją :has(), ponieważ może on zachować kontener jako obiekt przy wysyłaniu zapytań o liczbę elementów podrzędnych.
main:has(> :nth-child(5)) {…}
Inny przykład wyższego poziomu: zmiana stylów ustawionych dla całego dokumentu gdy na stronie jest zaznaczone określone pole wyboru:
html:has(#dark-mode:checked) {…}
To proste przypadki użycia, które nie zmieniają tematu selektora, jeśli tylko spojrzysz na przykłady
w taki sposób możesz uznać, że :has() może być tylko selektorem nadrzędnym. Weź pod uwagę te kwestie
ale przykłady. Wyszukują one coś na podstawie wspólnego elementu nadrzędnego, a następnie przestawiają selektor
dzieci mogą pojawiać się gdzieś w dalszej części strony.
Pojawia się on wtedy, gdy jakieś dane wejściowe są nieprawidłowe:
form:has(:user-invalid) .error {
display: block;
}
Ten przesuwa się z głównego obszaru treści, gdy panel boczny ma klasę .--is-open:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Oto zabawna prezentacja, w której nadrzędnym selektorem jest :has(), a :has() z zapytaniami dotyczącymi ilości,
i zapytań dotyczących kontenerów w celu utworzenia układu siatki, który będzie elegancko wyświetlać
1–12 elementów w orientacji pionowej lub poziomej:
Tworzenie podrzędnej siatki
subgrid
Przez wiele lat społeczność internetowa interfejsu prosiła o pomoc w dokończeniu i dokończeniu siatki. na niezwykle popularny i zaawansowany mechanizm układu siatki CSS. Jest on obecnie dostępny we wszystkich trzech głównych silnikach.
Więcej informacji o siatce podrzędnej znajdziesz tutaj.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Zagnieżdżanie w usługach porównywania cen
nesting
Wbudowane zagnieżdżanie CSS jest dostępne we wszystkich popularnych przeglądarkach od 2023 roku. Zaktualizowaliśmy nawet witrynę, usuwając proces tworzenia, który następował w wyniku gniazdowania. Teraz wysyłam mniejszy arkusz stylów! Tak, arkusze stylów z zagnieżdżeniem są mniejsze i wszystkie możesz za to zreprezentować narzędzia deweloperskie w przeglądarce.
Omówienie składni zagnieżdżania CSS znajdziesz tutaj, . Poniżej znajduje się przykładowy kod.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
Przeglądarka może równoważyć nagłówki
balance
pretty
Bez text-wrap: balance deweloperzy i twórcy tekstu sami mogą korzystać ze wskazówek dotyczących przerw w wierszu
takich jak <wbr> lub ­. To przeważnie przegrana bitwa, ponieważ gdy tylko
nie ma gwarancji, że treść zostanie w jakikolwiek sposób przetłumaczona, powiększona lub zmodyfikowana.
wskazówki dotyczące zawijania będą w odpowiednim miejscu dla nowej prezentacji treści.
Dzięki zrównoważonemu zawijaniu tekstu możesz pozostawić tę pracę przeglądarce. Porównanie możesz zobaczyć w poniższym Codepen.
Używaj jednostek zapytań w kontenerach
cqw
W ubiegłorocznym poście zasugerowano, że każdy programista frontendu powinien wiedzieć, jak napisać w kontenerze. Jeśli jeszcze tego nie wiesz, niech 2024 będzie dla Ciebie rokiem, w którym warto się ruszyć. i zapoznaj się z jednostkami zapytań w kontenerach. W skrócie: Ahmad Shadeed napisał świetny artykuł o jednostkach zapytań dotyczących kontenerów w 2021 roku.
Dostępnych jest 6 nowych jednostek kontariatu:
- Wbudowany wariant
cqi. - Wariant szerokości:
cqw. - Wariant blokujący
cqb. - Wariant wysokości
cqh. - Wariant o zależności od tego, która długość jest mniejsza (
cqmin). - Wariant o większej długości (
cqmax).
Rozważ scenariusz dotyczący względnych i wewnętrznych animacji kontenera. Element podrzędny, który całkowicie wysuwa się z kontenera przez używając 100cqi, czyli 100% rozmiaru wbudowanego kontenera.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Oto karta z typografią elastyczną kontenera oraz obraz, który dostosowuje się do i w orientacji poziomej, zmieniając orientację o połowę.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Jeśli te jednostki są dla Ciebie nowe, zapewne warto sprawdź wszystkie jednostki dostępne w 2024 roku.