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

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

CSS yang layak untuk Toolbelt, canggih, dan stabil yang dapat Anda gunakan sekarang.

Adam Argyle

Saya yakin setiap front-end developer harus tahu cara menggunakan kueri penampung, membuat pengalaman scroll snap, menghindari position: absolute dengan petak, membuat lingkaran dengan cepat, menggunakan lapisan berjenjang, dan menjangkau lebih banyak orang dengan lebih sedikit upaya melalui properti logis. Berikut ringkasan singkat setiap ekspektasi tersebut.

1. Kueri container

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

Source

container

Browser Support

Source

2. Pengepasan scroll

Pengalaman scroll yang diatur dengan baik akan membedakan pengalaman Anda dari yang lain, dan snap scroll adalah cara sempurna untuk mencocokkan UX scroll sistem sambil 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 dalam koleksi Codepen yang sangat besar dan menginspirasi yang berisi sekitar 25 demo.

scroll-snap-type

Browser Support

Source

scroll-snap-align

Browser Support

Source

scroll-snap-stop

Browser Support

Source

overscroll-behavior

Browser Support

Source

3. Tumpukan petak

Hindari posisi absolut dengan petak CSS sel tunggal. Setelah ditumpuk di atas satu sama lain, gunakan properti perataan dan penyelarasan untuk memosisikannya.

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

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

grid

Browser Support

Source

4. Lingkaran cepat

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

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

aspect-ratio

Browser Support

Source

5. Mengontrol varian dengan @layer

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

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

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

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

@layer

Browser Support

Source

6. Lebih sedikit menghafal dan lebih banyak menjangkau dengan properti logis

Hafalkan satu model kotak baru ini dan Anda tidak perlu khawatir tentang mengubah padding atau margin kiri dan kanan untuk mode penulisan internasional dan arah dokumen lagi. 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

Source

margin-block

Browser Support

Source

inset-inline

Browser Support

Source

6 cuplikan CSS yang harus diketahui setiap developer front-end pada tahun 2023 Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

1. Kueri container

2. Pengepasan scroll

3. Tumpukan petak

4. Lingkaran cepat

5. Mengontrol varian dengan @layer

6. Lebih sedikit menghafal dan lebih banyak menjangkau dengan properti logis

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