Ta strona została przetłumaczona przez Cloud Translation API.

6 fragmentów kodu CSS, które każdy programista interfejsów powinien znać w 2023 r.

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 frontendu powinien wiedzieć, jak korzystać z kontenera , tworzyć scrolling, unikaj position: absolute z siatka, szybko przekreślić okrąg, użyć kaskady warstwy, i docieraj do większej liczby odbiorców przy mniejszych kosztach korzystania z funkcji logicznych usługi. Oto krótkie podsumowanie Omówienie każdego z nich.

1. Zapytanie dotyczące kontenera

Funkcja CSS, o którą prosiliśmy najczęściej od 10 lat, jest obecnie stabilnej w różnych przeglądarkach i dostępnej do użycia dla zapytań dotyczących szerokości w 2023 r.

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

Obsługa przeglądarek

Źródło

container

Obsługa przeglądarek

Źródło

2. Przewiń widok

Dobrze zorganizowane przewijanie treści wyróżnia się na tle innych, i przewiń przyciąga doskonały sposób na dopasowanie UX systemu przewijania przy jednoczesnym istotnym zatrzymaniu pkt.

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

Dowiedz się więcej o potencjale tej funkcji usługi porównywania cen w tym ogromnym i inspirującym filmie Kolekcja Codepen obejmująca około 25 wersji demonstracyjnych.

scroll-snap-type

Obsługa przeglądarek

Źródło

scroll-snap-align

Obsługa przeglądarek

Źródło

scroll-snap-stop

Obsługa przeglądarek

Źródło

overscroll-behavior

Obsługa przeglądarek

Źródło

3. Stos siatki

Unikaj pozycji bezwzględnej w przypadku siatki CSS z jedną komórką. Gdy zostaną nałożone od siebie nawzajem, użyj funkcji i wyrównywać właściwości.

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

grid

Obsługa przeglądarek

Źródło

4. Szybkie kółko

Jest wiele sposobów tworzenia kręgów w CSS, ale ten sposób tworzenia jest najprostszy jest minimalna.

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

aspect-ratio

Obsługa przeglądarek

Źródło

5. Zarządzanie wariantami za pomocą @layer

Cascade warstwy może pomóc w wstawianiu wariantów wykryte lub utworzone później, we właściwe miejsce w kaskadzie za pomocą oryginalnego zestawu wariantów.

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

Następnie w zupełnie innym pliku, wczytywanym w innym losowym czasie, dołączyć ciąg znaków nową wersję warstwy przycisków, tak jakby była widoczna z pozostałymi elementami. przez cały czas.

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

Obsługa przeglądarek

Źródło

6. Zapamiętuj mniej zapamiętywania i zwiększaj zasięg dzięki właściwościom logicznym

Zapamiętaj ten jeden nowy model prostopadłościanu i nie musisz się martwić zmienianie dopełnienia lewego i prawego lub marginesu w przypadku pisania międzynarodowej tryby oraz dokument wskazówki dojazdu. Dostosuj style, od właściwości fizycznych na logiczne, takie jak padding-inline margin-inline, inset-inline, a teraz przeglądarka zajmie się dostosowywaniem.

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}

padding-inline

Obsługa przeglądarek

Źródło

margin-block

Obsługa przeglądarek

Źródło

inset-inline

Obsługa przeglądarek

Źródło