Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

Adam Argyle

Uważam, że każdy programista front-endu powinien wiedzieć, jak używać zapytań o kontener, tworzyć przewijanie z przyciąganiem, unikać position: absolute za pomocą siatki, szybko tworzyć okrąg, używać warstw kaskadowych i docierać do większej liczby odbiorców przy mniejszym nakładzie pracy za pomocą właściwości logicznych. Oto krótkie omówienie każdego z tych wymagań.

1. Zapytanie dotyczące kontenera

Najczęściej zgłaszana funkcja CSS od 10 lat jest obecnie stabilna w różnych przeglądarkach i możesz jej używać w 2023 r. do zapytań o szerokość.

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

.card {
  padding: 1rem;
}

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

@container

Browser Support

Source

container

Browser Support

Source

2. Przewijanie z przyciąganiem

Dobrze zorganizowane przewijanie wyróżnia Twoją aplikację na tle innych, a przyciąganie przewijania to doskonały sposób na dopasowanie interfejsu przewijania do systemu przy jednoczesnym zapewnieniu znaczących punktów 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;
}

Więcej informacji o potencjale tej funkcji CSS znajdziesz w tej ogromnej i inspirującej kolekcji Codepen, która zawiera około 25 demonstracji.

scroll-snap-type

Browser Support

Source

scroll-snap-align

Browser Support

Source

scroll-snap-stop

Browser Support

Source

overscroll-behavior

Browser Support

Source

3. Siatka

Unikaj pozycjonowania bezwzględnego w przypadku siatki CSS z jedną komórką. Gdy elementy nałożą się na siebie, użyj właściwości justify i align, aby je ustawić.

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

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

grid

Browser Support

Source

4. Szybkie kółko

W CSS jest wiele sposobów na utworzenie okręgów, ale ten jest zdecydowanie najbardziej minimalistyczny.

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

aspect-ratio

Browser Support

Source

5. Sterowanie wariantami za pomocą @layer

Warstwy kaskadowe mogą pomóc wstawić warianty odkryte lub utworzone później we właściwe miejsce 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 przez cały czas.

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

@layer

Browser Support

Source

6. Zapamiętuj mniej, a osiągaj więcej dzięki właściwościom logicznym

Zapamiętaj ten nowy model pudełkowy i nie musisz się już martwić zmianą dopełnienia lub marginesu po lewej i prawej stronie w przypadku międzynarodowych trybów pisania i kierunków dokumentu. Dostosuj style z właściwości fizycznych do logicznych, takich jak padding-inline, margin-inline, inset-inline, a przeglądarka sama dokona korekty.

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

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

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

padding-inline

Browser Support

Source

margin-block

Browser Support

Source

inset-inline

Browser Support

Source

6 fragmentów kodu CSS, które każdy programista interfejsów powinien znać w 2023 r. Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

1. Zapytanie dotyczące kontenera

2. Przewijanie z przyciąganiem

3. Siatka

4. Szybkie kółko

5. Sterowanie wariantami za pomocą @layer

6. Zapamiętuj mniej, a osiągaj więcej dzięki właściwościom logicznym

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