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 container kueri, membuat pengalaman snap scroll, hindari position: absolute dengan kisi, dengan cepat memukul lingkaran, gunakan kascade lapisan, dan menjangkau lebih banyak dengan sedikit upaya melalui logika properti. Berikut ringkasannya gambaran umum dari masing-masing 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

Dukungan Browser

• 105
• 105
• 110
• 16

Sumber

container

Dukungan Browser

• 105
• 105
• 110
• 16

Sumber

2. Mengencangkan scroll

Pengalaman scroll yang diorkestrasi dengan baik membuat pengalaman Anda berbeda dari yang lain, dan scroll snap adalah cara sempurna untuk mencocokkan UX scroll sistem sekaligus memberikan penghentian yang bermakna poin.

.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 dengan membaca artikel yang sangat menarik dan menginspirasi Koleksi Codepen 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 tahun

Sumber

overscroll-behavior

Dukungan Browser

• 63
• 18 tahun
• 59
• 16

Sumber

3. Tumpukan kisi

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

.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, tapi ini jelas yang paling akan sangat minim.

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

aspect-ratio

Dukungan Browser

• 88
• 88
• 89
• 15 tahun

Sumber

5. Mengontrol varian dengan @lapisan

Cascade lapisan dapat membantu menyisipkan varian ditemukan atau dibuat nanti, ke tempat yang tepat dalam jenjang yang sebenarnya.

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

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

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

@layer

Dukungan Browser

• 99
• 99
• 97
• 15,4

Sumber

6. Menghafal lebih sedikit dan menjangkau lebih banyak dengan properti logis

Hafalkan model kotak baru ini dan tidak perlu khawatir mengubah padding atau margin kiri dan kanan untuk penulisan internasional dan dokumen rute lagi. Sesuaikan gaya Anda dari properti fisik ke gaya logis seperti padding-inline, margin-inline, inset-inline, dan sekarang {i>browser<i} akan melakukan pekerjaan 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