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

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ć, że :has() to nie tylko „selektor nadrzędny”, informacje o tym, jak i dlaczego subgrid, jak zagnieżdżać za pomocą wbudowanej składni CSS, jak umożliwić zawijanie tekstu nagłówka na potrzeby balansu przeglądarki i jak używać jednostek zapytań w kontenerze.

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

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

Aplikacja :has() została udostępniona we wszystkich najpopularniejszych przeglądarkach pod koniec 2023 r. Nowy selektor wydaje się mały i niewinny, ale zaskakuje wszystkie jego przypadki użycia: gry, reaktywność, układ uwzględniający treść, inteligentne komponenty i wiele innych kwestii, o których dobrze opowiedzieć Jhey.

Oto kilka przykładów użycia elementu :has() jako selektora nadrzędnego. Otrzymano tę nazwę, ponieważ temat selektora znajduje się zwykle na końcu, np. ul li, gdzie li to temat i określa style. W przypadku :has() element na początku selektora może stać się tematem. W przykładzie poniżej przycisk jest pusty, jeśli w jego wnętrzu znajduje się element z klasą .icon. Jeśli w środku znajduje się obraz, zmienia ona orientację.

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

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

Pożądany selektor to zmiana układu na podstawie liczby elementów, które się w nim znajdują. Jest to teraz możliwe dzięki :has(), ponieważ kontener może być obiektem podczas wysyłania zapytań dotyczących liczby elementów podrzędnych.

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

Innym przykładem z wyższym poziomem jest zmiana stylów ustawionych w całym dokumencie po włączeniu określonego pola wyboru na stronie:

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

Oto proste przypadki użycia, w których nie zmienia się temat selektora. Po zapoznaniu się z takimi przykładami możesz pomyśleć, że właściwość :has() jest ograniczona do funkcji selektora nadrzędnego. Rozważmy jednak poniższe przykłady. Sprawdzają one coś na podstawie wspólnego przodka, a następnie przestawiają selektor na element podrzędny w dalszej części strony.

Ten przykład pokazuje element błędu formularza, jeśli którekolwiek z jego danych wejściowych jest nieprawidłowe:

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

Ten wysuwa się, gdy panel boczny zawiera klasę .--is-open:

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

Oto zabawna prezentacja, w której selektor nadrzędny jest :has(), a :has() z zapytaniami ilościowymi i zapytaniami kontenera w celu utworzenia układu siatki, który umożliwia eleganckie wyświetlanie 1–12 elementów w orientacji pionowej lub poziomej:

Utwórz siatkę podrzędną

Przez wiele lat społeczność internetowa frontendów prosiła o pomoc w dopełnieniu i uzupełnieniu niezwykle popularnego i zaawansowanego mechanizmu siatkowego CSS. Jest już dostępny we wszystkich trzech głównych wyszukiwarkach.

Więcej informacji o siatce podrzędnej

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

Wbudowane funkcje zagnieżdżania arkuszy CSS zostały udostępnione we wszystkich popularnych przeglądarkach w 2023 roku. Zaktualizowaliśmy nawet witrynę, aby usunąć proces kompilacji, który polegał na kompilowaniu zagnieżdżenia. Teraz wysyłam mniejszy arkusz stylów. Tak, arkusze stylów z zagnieżdżaniem są mniejsze i wszystkie narzędzia deweloperskie przeglądarki są gotowe do prezentowania treści.

Wszystkie szczegóły znajdziesz w omówieniu składni zagnieżdżania CSS. Poniższy przykładowy kod zawiera przykładową 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 funkcji text-wrap: balance deweloperzy i twórcy tekstu mogą korzystać ze wskazówek dotyczących podziału wiersza, takich jak elementy <wbr> czy ­. Przegrywamy w większości przypadków, ponieważ gdy tylko treść zostanie w jakikolwiek sposób przetłumaczona, powiększona lub zmodyfikowana, nie ma gwarancji, że wskazówki podsumowujące znajdą się we właściwym miejscu dla nowego sposobu prezentacji treści.

Dzięki zrównoważonemu zawijaniu tekstu możesz pozostawić tę pracę przeglądarce. Porównanie znajdziesz w Codepen.

Użyj jednostek zapytań dotyczących kontenerów

W ubiegłorocznym poście zasugerowano, że każdy programista front-endu powinien wiedzieć, jak napisać zapytanie dotyczące kontenera. Jeśli nie masz jeszcze żadnej wiedzy, to wykorzystaj 2024 rok, aby spokojnie spędzić czas na rynku i zobaczyć też jednostki zapytań dotyczących kontenerów. W 2021 roku Ahmad Shadeed napisał świetny artykuł o jednostkach zapytań dotyczących kontenerów.

Pojawiło się 6 nowych jednostek reklamowych kreacyjnych:

1. Wbudowany wariant: cqi.
2. Wariant o szerokości cqw.
3. Wariant blokowania cqb.
4. Wariant wysokości cqh.
5. Wariant o krótszej długości: cqmin.
6. Wariant dla wersji o większej długości (cqmax).

Przeanalizuj scenariusz animacji względnych i wewnętrznych w kontenerze. Element podrzędny, który wysuwa się w całości z kontenera przy użyciu parametru 100cqi – to 100% rozmiaru wbudowanego kontenera.

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

Oto karta z typografią responsywną kontenera i obraz, który dostosowuje się do orientacji kontenera, zmniejszając rozmiar o połowę 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 nie masz doświadczenia w tych jednostkach, warto przejrzeć wszystkie jednostki dostępne w 2024 roku.