CSS yang layak, kuat, dan stabil yang dapat Anda gunakan saat ini.
Saya yakin setiap developer front-end harus tahu cara menggunakan kueri
container,
membuat pengalaman scroll snap, menghindari
position: absolute dengan
kisi,
membentuk lingkaran dengan cepat, menggunakan lapisan
bertingkat,
dan menjangkau lebih banyak hal dengan lebih sedikit
melalui properti
logis. Berikut adalah ikhtisar singkat
dari setiap harapan 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;
}
}
2. Scroll snap
Pengalaman scroll yang dirancang dengan baik membuat pengalaman Anda berbeda dari yang lain, dan scroll snap adalah cara yang tepat untuk mencocokkan UX scroll sistem sekaligus memberikan titik perhentian 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 besar dan menginspirasi dari sekitar 25 demo ini.
scroll-snap-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. Tumpukan petak
Hindari posisi absolut dengan petak CSS sel tunggal. Setelah ditumpuk di atas satu sama lain, gunakan properti rata dan ratakan untuk memosisikannya.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. Lingkaran cepat
Ada banyak cara untuk membuat lingkaran di CSS, tetapi ini jelas merupakan yang paling minimal.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. Mengontrol varian dengan @layer
Lapisan Cascade dapat membantu menyisipkan varian yang ditemukan atau dibuat nanti, ke tempat yang tepat dalam urutan dengan kumpulan varian asli.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
Kemudian, di beberapa file yang sama sekali berbeda, yang dimuat di waktu acak, tambahkan varian baru ke lapisan tombol seolah-olah ada di sana bersama seluruh file lainnya selama ini.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. Kurangi hafal dan jangkau lebih banyak hal dengan properti logis
Hafalkan satu model kotak baru ini
dan tidak perlu khawatir tentang
mengubah padding atau margin kiri dan kanan untuk mode
penulisan dan
petunjuk
dokumen internasional lagi.
Sesuaikan gaya Anda dari properti fisik ke yang logis seperti
padding-inline,
margin-inline,
inset-inline,
dan kini browser 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;
}