5 fragmentów kodu CSS, które każdy deweloper interfejsów powinien znać w 2024 roku

Zaawansowany, stabilny i dostosowany do pasków narzędzi CSS, z którego możesz korzystać już dziś.

Adam Argyle

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)

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

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

Wbudowane zagnieżdżanie CSS jest dostępne we wszystkich najpopularniejszych 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

Bez text-wrap: balance programiści 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 tekstu 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

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:

1. Wbudowany wariant cqi.
2. Wariant szerokości: cqw.
3. Wariant blokujący cqb.
4. Wariant wysokości cqh.
5. Wariant o zależności od tego, która długość jest mniejsza (cqmin).
6. 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.