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

Browser Support

• 105
• 105
• 110
• 16

Source

container

Browser Support

• 105
• 105
• 110
• 16

Source

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

Browser Support

• 69
• 79
• 99
• 11

Source

scroll-snap-align

Browser Support

• 69
• 79
• 68
• 11

Source

scroll-snap-stop

Browser Support

• 75
• 79
• 103
• 15

Source

overscroll-behavior

Browser Support

• 63
• 18
• 59
• 16

Source

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

Browser Support

• 57
• 16
• 52
• 10.1

Source

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

Browser Support

• 88
• 88
• 89
• 15

Source

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

Browser Support

• 99
• 99
• 97
• 15.4

Source

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

Ingat satu model kotak baru ini dan tidak perlu khawatir lagi 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

Browser Support

• 87
• 87
• 66
• 14.1

Source

margin-block

Browser Support

• 87
• 87
• 66
• 14.1

Source

inset-inline

Browser Support

• 87
• 87
• 63
• 14.1

Source