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

CSS yang andal, canggih, dan stabil yang dapat Anda gunakan sekarang.

Adam Argyle

Saya yakin setiap developer frontend harus mengetahui cara menggunakan kueri penampung, membuat pengalaman snap scroll, menghindari position: absolute dengan petak, membuat lingkaran dengan cepat, menggunakan lapisan cascade, dan menjangkau lebih banyak dengan lebih sedikit melalui properti logika. 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 scroll snap 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 petak

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 merupakan cara 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 @layer

Lapisan cascade dapat membantu menyisipkan varian yang ditemukan atau dibuat nanti, ke tempat yang tepat dalam cascade 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 lagi untuk mengubah padding atau margin kiri dan kanan untuk mode tulisan dan arah dokumen internasional. 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