CSS yang layak pakai, canggih, dan stabil yang dapat Anda gunakan saat ini.
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;
}
}
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
scroll-snap-align
scroll-snap-stop
overscroll-behavior
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
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
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
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; }