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ś.

Uważam, że każdy front-end developer powinien wiedzieć, jak używać zapytań dotyczących kontenerów, tworzyć przeskakiwanie przy przewijaniu, unikać position: absolutesiatce, szybko tworzyć koła, używać warstw kaskadowych i osiągać większą skuteczność przy mniejszych nakładach za pomocą właściwości logicznych. Oto krótkie omówienie tych oczekiwań.

Najbardziej pożądana funkcja CSS przez 10 lat z rzędu jest stabilna w różnych przeglądarkach i będzie dostępna w 2023 r. w przypadku zapytań o szerokość.

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

.card {
 
padding: 1rem;
}

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

Obsługa przeglądarek

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Źródło

container

Obsługa przeglądarek

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Źródło

2. Przyciąganie podczas przewijania

Dobrze zorganizowane funkcje związane z przewijaniem wyróżniają się na tle innych, a przyciąganie to doskonały sposób na dopasowanie UX przewijania w systemie, zapewniając jednocześnie istotne punkty zatrzymania.

.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 CSS z tej ogromnej i inspirującej kolekcji Codepen, która zawiera około 25 demonstracji.

scroll-snap-type

Obsługa przeglądarek

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 99.
  • Safari: 11.

Źródło

scroll-snap-align

Obsługa przeglądarek

  • Chrome: 69.
  • Krawędź: 79.
  • Firefox: 68.
  • Safari: 11.

Źródło

scroll-snap-stop

Obsługa przeglądarek

  • Chrome: 75.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 15.

Źródło

overscroll-behavior

Obsługa przeglądarek

  • Chrome: 63.
  • Edge: 18 lat.
  • Firefox: 59.
  • Safari: 16.

Źródło

3. Stos siatki

Unikaj pozycji bezwzględnej w przypadku siatki CSS z jedną komórką. Gdy elementy są ułożone jeden na drugim, użyj właściwości wyrównania i wyrównania poziomego, aby je ustawić.

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

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

Obsługa przeglądarek

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Źródło

4. Szybki okrąg

Istnieje wiele sposobów tworzenia kół w CSS, ale ten jest zdecydowanie najbardziej minimalny.

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

Obsługa przeglądarek

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 89.
  • Safari: 15.

Źródło

5. Sterowanie wersjami za pomocą @layer

Warstwy kaskadowe mogą pomóc w wstawianiu wariantów odkrytych lub utworzonych później we właściwym miejscu w kaskadzie z pierwotnym zestawem wariantów.

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

 
}
}

Następnie w zupełnie innym pliku, wczytanym w innym losowym momencie, dodaj nowy wariant do warstwy przycisku, tak jakby był tam od samego początku.

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

 
}
}
@layer

Obsługa przeglądarek

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4.

Źródło

6. Mniej zapamiętywania, większy zasięg dzięki właściwościom logicznym

Zapamiętaj ten nowy model pudełka i nigdy więcej nie martw się o zmianę wyrównania do lewej i prawej lub marginesu w przypadku międzynarodowych trybów i kierunków dokumentów. Dostosuj style z właściwości fizycznych do logicznych, takich jak padding-inline, margin-inlineinset-inline. Teraz przeglądarka wykona za Ciebie tę pracę.

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

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Źródło

margin-block

Obsługa przeglądarek

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Źródło

inset-inline

Obsługa przeglądarek

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 63.
  • Safari: 14.1.

Źródło