6 cuplikan CSS yang harus diketahui setiap developer front-end pada tahun 2023

CSS yang layak pakai, canggih, dan stabil yang dapat Anda gunakan saat ini.

Adam Argyle

Saya yakin setiap developer front-end harus tahu cara menggunakan kueri container, membuat pengalaman snap scroll, menghindari position: absolute dengan grid, dengan cepat memotong lingkaran, menggunakan lapisan kaskade, dan menjangkau lebih banyak dengan lebih sedikit melalui properti logis. Berikut adalah ringkasan singkat tentang setiap ekspektasi tersebut.

1. Kueri penampung

Fitur CSS yang paling banyak diminta selama 10 tahun berturut-turut, kini stabil di seluruh browser dan tersedia untuk Anda gunakan untuk kueri lebar pada tahun 2023.

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

.card {
  padding: 1rem;
}

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

@container

Dukungan Browser

• 105
• 105
• 110
• 16

Sumber

container

Dukungan Browser

• 105
• 105
• 110
• 16

Sumber

2. Pengepasan posisi scroll

Pengalaman scroll yang diatur dengan baik akan membedakan pengalaman Anda dengan yang lain, dan snap scroll adalah cara sempurna untuk mencocokkan UX scroll sistem sekaligus memberikan titik berhenti yang bermakna.

.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;
}

Pelajari lebih lanjut potensi fitur CSS ini di koleksi Codepen yang besar dan menginspirasi yang berisi sekitar 25 demo.

scroll-snap-type

Dukungan Browser

• 69
• 79
• 99
• 11

Sumber

scroll-snap-align

Dukungan Browser

• 69
• 79
• 68
• 11

Sumber

scroll-snap-stop

Dukungan Browser

• 75
• 79
• 103
• 15

Sumber

overscroll-behavior

Dukungan Browser

• 63
• 18
• 59
• 16

Sumber

3. Tumpukan kisi

Hindari posisi absolut dengan petak CSS satu sel. Setelah ditumpuk satu sama lain, gunakan properti justify dan align untuk memosisikan keduanya.

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

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

grid

Dukungan Browser

• 57
• 16
• 52
• 10.1

Sumber

4. Lingkaran cepat

Ada banyak cara untuk membuat lingkaran di CSS, tetapi ini jelas yang paling minimal.

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

aspect-ratio

Dukungan Browser

• 88
• 88
• 89
• 15

Sumber

5. Mengontrol varian dengan @lapisan

Lapisan Cascade dapat membantu menyisipkan varian yang ditemukan atau dibuat nanti, ke tempat yang tepat dalam turunan dengan kumpulan varian asli.

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

Kemudian, di beberapa file yang sama sekali berbeda, yang dimuat pada waktu acak lainnya, tambahkan varian baru ke lapisan tombol seolah-olah ada di sana bersama yang lainnya selama ini.

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

@layer

Dukungan Browser

• 99
• 99
• 97
• 15,4

Sumber

6. Ingat lebih sedikit dan jangkau lebih banyak dengan properti logis

Ingat satu model kotak baru ini dan tidak perlu khawatir mengubah padding atau margin kiri dan kanan untuk mode penulisan internasional dan petunjuk dokumen. Sesuaikan gaya Anda dari properti fisik ke properti logis seperti padding-inline, margin-inline, inset-inline, dan sekarang browser akan melakukan penyesuaian.

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

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

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

padding-inline

Dukungan Browser

• 87
• 87
• 66
• 14.1

Sumber

margin-block

Dukungan Browser

• 87
• 87
• 66
• 14.1

Sumber

inset-inline

Dukungan Browser

• 87
• 87
• 63
• 14.1

Sumber