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

Wartościowe, wydajne i stabilne CSS, z których możesz korzystać już dziś.

Adam Argyle

Uważam, że każdy programista front-endu powinien wiedzieć, że :has() to coś więcej niż „selektor nadrzędny”, jak i dlaczego używać subgrid, jak umieszczać elementy za pomocą wbudowanej składni CSS, jak pozwolić przeglądarce zrównoważyć zawijanie tekstu nagłówka i jak używać jednostek zapytań o kontener.

Ten post jest kontynuacją zestawu 6 fragmentów kodu CSS, które każdy programista front-endu powinien znać w 2023 r..

CSS:has(.potential-beyond-being-a-parent-selector)

:has() została wprowadzona we wszystkich głównych przeglądarkach pod koniec 2023 roku. Ten nowy selektor wydaje się mały i niepozorny, ale zaskoczy Cię liczbą zastosowań: gry, reaktywność, układ uwzględniający treść, inteligentne komponenty i wiele innych, które zostały szczegółowo opisane w tym artykule Jhey.

Oto kilka przykładów użycia selektora nadrzędnego :has(). Nazwa ta pochodzi od tego, że zwykle podmiot selektora znajduje się na końcu, np. ul li, gdzie li jest podmiotem i otrzymuje style. Za pomocą :has() element na początku selektora może stać się podmiotem. W tym przykładzie przycisk ma przerwę, jeśli wewnątrz znajduje się element z klasą .icon. Jeśli karta zawiera obraz, zmienia orientację.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

Długo oczekiwanym selektorem jest możliwość zmiany układu w zależności od liczby elementów. Jest to teraz możliwe dzięki :has(), ponieważ może ona zachować kontener jako temat, sprawdzając liczbę elementów podrzędnych.

main:has(> :nth-child(5)) {…}

Inny przykład wyższego poziomu: zmiana stylów ustawionych w całym dokumencie, 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 spojrzysz tylko na takie przykłady, możesz pomyśleć, że :has() jest ograniczone do bycia selektorem nadrzędnym. Zapoznaj się z przykładami poniżej. Sprawdzają one coś na podstawie wspólnego elementu nadrzędnego, a następnie zmieniają selektor na element podrzędny znajdujący się gdzieś głębiej na stronie.

Ten kod wyświetla element błędu formularza, jeśli którekolwiek z jego danych wejściowych są nieprawidłowe:

form:has(:user-invalid) .error {
  display: block;
}

Ten kod przesuwa główny obszar treści, gdy pasek boczny ma klasę .--is-open:

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

Oto ciekawa demonstracja, w której jako selektora nadrzędnego użyto :has(), a zapytań o liczbę :has(). Zastosowano też zapytania o kontener, aby utworzyć układ siatki, który może elegancko wyświetlać 1–12 elementów w orientacji pionowej lub poziomej:

Tworzenie podsiatki

Od wielu lat społeczność zajmująca się tworzeniem stron internetowych prosiła o dodanie funkcji subgrid, która uzupełniłaby i dokończyła niezwykle popularny i wydajny silnik układu siatki CSS. Jest ona teraz dostępna we wszystkich 3 głównych wyszukiwarkach.

Jeśli chcesz poznać ogólne informacje, tutaj znajdziesz więcej informacji o podsiatce.

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 stylu CSS

Wbudowane zagnieżdżanie CSS stało się dostępne we wszystkich głównych przeglądarkach w 2023 roku. Zaktualizowałem nawet moją witrynę, aby usunąć proces kompilacji, który usuwał zagnieżdżanie, i teraz wysyłam mniejszy arkusz stylów. Tak, arkusze stylów z zagnieżdżaniem są mniejsze, a wszystkie narzędzia deweloperskie w przeglądarce są gotowe do ich reprezentowania.

Szczegółowe informacje znajdziesz w omówieniu składni zagnieżdżania CSS. Poniższy przykład kodu pokazuje przykład składni.

.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;
  }
}

Pozwól przeglądarce zrównoważyć nagłówki

Bez text-wrap: balance programiści i copywriterzy muszą korzystać ze wskazówek dotyczących podziału wiersza, takich jak elementy <wbr> lub ­. To w większości przegrana walka, ponieważ gdy tylko treść zostanie przetłumaczona, powiększona lub w jakikolwiek sposób zmodyfikowana, nie ma gwarancji, że te wskazówki dotyczące zawijania będą we właściwym miejscu w nowej prezentacji treści.

Dzięki zrównoważonemu zawijaniu tekstu możesz pozostawić to zadanie przeglądarce. Porównanie znajdziesz w tym Codepenie.

Używanie jednostek zapytań o kontener

W ubiegłorocznym poście sugerowaliśmy, że każdy deweloper front-endu powinien wiedzieć, jak pisać zapytania o kontener. Jeśli jeszcze tego nie wiesz, w 2024 roku warto się tego nauczyć. Sprawdź też jednostki zapytań o kontener. W 2021 roku Ahmad Shadeed napisał świetny artykuł o jednostkach zapytań dotyczących kontenerów.

Dostępnych jest 6 nowych jednostek zapytań o kontener:

1. Wariant w tekście cqi.
2. wariant szerokości cqw,
3. Wariant bloku cqb.
4. wariant wysokości cqh,
5. Wariant o mniejszej długości cqmin.
6. Wariant o większej długości cqmax.

Rozważ scenariusz animacji względnych i wewnętrznych w kontenerze. Element podrzędny, który całkowicie wysuwa się z kontenera, używając 100cqi, czyli 100% rozmiaru w linii kontenera.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

Oto karta z elastyczną typografią kontenera i obrazem, który dostosowuje się do orientacji kontenera, zmniejszając się o połowę, jeśli orientacja jest pozioma.

.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, warto zapoznać się ze wszystkimi jednostkami dostępnymi w 2024 roku.