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

Potężny i stabilny edytor kodu CSS, który możesz już dziś używać.

Adam Argyle

Uważam, że każdy front-end developer powinien wiedzieć, że :has() to coś więcej niż „selektor nadrzędny”, jak i dlaczego używać subgrid, jak zagnieżdżać za pomocą wbudowanej składni CSS, jak pozwolić przeglądarce na zrównoważenie łamanego tekstu nagłówka oraz jak używać jednostek zapytania kontenera.

Ten post jest kontynuacją zeszłorocznego artykułu 6 fragmentów kodu CSS, które każdy front-end developer powinien znać w 2023 r.

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

:has() została udostępniona we wszystkich głównych przeglądarkach pod koniec 2023 r. Ten nowy selektor wydaje się mały i niewinny, ale zdziwi Cię, ile zastosowań może mieć: gry, reaktywność, układ uwzględniający zawartość, inteligentne komponenty i wiele innych, które zostały dokładnie omówione w tym artykule autorstwa Jhey.

Oto kilka przykładów użycia elementu :has() jako selektora rodzica. Nazwa ta wzięła się stąd, że zwykle temat selektora znajduje się na końcu, np. ul li, gdzie li jest tematem i otrzymuje style. Dzięki :has() element na początku selektora może stać się tematem. W tym przykładzie przycisk ma odstęp, jeśli znajduje się w nim element o klasie .icon. Karta zmienia orientację, jeśli znajduje się na niej obraz.

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

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

Długo oczekiwany selektor służy do zmiany układu na podstawie liczby elementów. Jest to teraz możliwe dzięki funkcji :has(), ponieważ może ona zachować kontener jako temat podczas zapytania o liczbę elementów podrzędnych.

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

Innym przykładem zmiany na wyższym poziomie jest zmiana stylów ustawionych w całym dokumencie, gdy konkretne pole wyboru na stronie jest włączone:

html:has(#dark-mode:checked) {…}

To proste przypadki użycia, które nie zmieniają tematu selektora. Jeśli spojrzysz na takie przykłady, możesz pomyśleć, że :has() jest ograniczony do roli selektora nadrzędnego. Zastanów się jednak nad poniższymi przykładami. Te elementy sprawdzają coś na podstawie wspólnego przodka, a potem przenoszą obiekt selektora na element podrzędny gdzieś głębiej na stronie.

Ten element pokazuje błąd formularza, jeśli któryś z jego danych wejściowych jest nieprawidłowe:

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

Ten element wysuwa obszar głównej treści, gdy element menu bocznego ma klasę .--is-open:

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

Oto ciekawe demo, które wykorzystuje :has() jako selektor nadrzędny, :has() z zapytaniami ilościowymi i zapytaniami dotyczącymi kontenera, aby utworzyć układ siatki, który może elegancko wyświetlać 1–12 elementów w orientacji pionowej lub poziomej:

Tworzenie podkratki

Przez wiele lat społeczność front-endu prosiła o subgrid, aby dopełnić i dokończyć popularny i wydajny mechanizm układu siatki CSS. Jest ona teraz dostępna we wszystkich 3 głównych wyszukiwarkach.

Więcej informacji o subgridzie

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

Umieszczanie elementów w ramach CSS

Wbudowane zagnieżdżanie CSS stało się dostępne we wszystkich głównych przeglądarkach w 2023 r. Zaktualizowaliśmy nawet naszą witrynę, aby usunąć proces kompilacji, który kompilował zagnieżdżenie, a teraz wysyłamy mniejszą ściągawkę! Tak, skrypty stylów z zagnieżdżeniem są mniejsze, a wszystkie przeglądarkowe narzędzia deweloperskie są gotowe do ich wyświetlania.

Szczegółowe informacje o składni zagnieżdżania CSS znajdziesz tutaj. Przykładowy kod poniżej zawiera 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 dostosować nagłówki

Bez text-wrap: balance deweloperzy i copywriterzy muszą stosować wskazówki dotyczące podziału wiersza, takie jak elementy <wbr> lub ­. Jest to w większości niewykonalne, ponieważ gdy tylko treści zostaną przetłumaczone, powiększone lub zmodyfikowane, nie ma gwarancji, że te wskazówki dotyczące opakowania będą w odpowiednim miejscu w nowej prezentacji treści.

Dzięki równomiernemu przenoszeniu tekstu możesz zostawić tę pracę przeglądarce. Porównanie znajdziesz w tym Codepen.

Używanie jednostek zapytań kontenera

W artykule z ubiegłego roku sugerowaliśmy, że każdy front-endowy deweloper powinien wiedzieć, jak napisać zapytanie kontenera. Jeśli jeszcze tego nie zrobisz, zrób to w 2024 r. i poznaj też jednostki zapytań kontenera. W 2021 r. Ahmad Shadeed napisał świetny artykuł o jednostkach zapytań kontenerów.

Dostępnych jest 6 nowych jednostek kontenera zapytań:

1. Wariant w tekście cqi.
2. Wariant szerokości cqw.
3. Wariant bloku cqb.
4. wariant wysokości cqh,
5. Wariant o dowolnej długości, który jest krótszy cqmin.
6. Odmiana dla dowolnej długości, która jest większa cqmax.

Rozważ scenariusz dotyczący animacji względnych i właściwych dla kontenera. Element podrzędny, który wysuwa się całkowicie z kontenera, używając 100 cqi, czyli 100% rozmiaru wbudowanego kontenera.

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

Oto karta z elastycznym tekstem w kontenerze i obrazem, który dostosowuje się do orientacji kontenera, zmniejszając się do połowy w orientacji poziomej.

.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 przeanalizować wszystkie jednostki dostępne w 2024 roku.