CSS yang layak, kuat, dan stabil yang dapat Anda gunakan saat ini.
Saya yakin setiap developer front-end harus mengetahui bahwa :has() lebih dari sekadar "pemilih induk",
cara dan alasan subgrid, cara menyusun bertingkat dengan sintaksis CSS bawaan, cara membiarkan
browser menyeimbangkan penggabungan teks judul, dan cara menggunakan unit kueri container.
Postingan ini merupakan kelanjutan dari 6 cuplikan CSS tahun lalu yang harus diketahui setiap developer front-end pada tahun 2023.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has() tersedia di semua browser utama pada akhir tahun 2023. Pemilih baru ini tampak
kecil dan polos, tetapi Anda akan terkejut dengan semua kasus penggunaan yang dapat dibuka:
game, reaktivitas, tata letak yang peka konten, komponen cerdas, dan
banyak lagi yang dibahas dengan baik dalam artikel ini oleh Jhey.
Berikut adalah beberapa contoh penggunaan :has() sebagai pemilih induk. Nama ini mendapatkan nama ini karena
biasanya subjek pemilih berada di bagian akhir, seperti ul li, dengan li sebagai subjek
dan mendapatkan gaya. Dengan :has(), elemen di awal pemilih dapat menjadi
subjek. Pada contoh berikut, tombol memiliki celah jika ada elemen di dalamnya
dengan class .icon. Kartu akan berubah orientasi jika ada gambar di dalamnya.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Pemilih lama yang diinginkan adalah mengubah tata letak berdasarkan jumlah item yang dimilikinya. Sekarang hal ini dapat dilakukan dengan :has() karena dapat mempertahankan penampung sebagai subjek saat mengkueri jumlah turunan.
main:has(> :nth-child(5)) {…}
Contoh tingkat yang lebih tinggi lainnya, mengubah gaya yang ditetapkan di seluruh dokumen jika kotak centang tertentu di halaman diaktifkan:
html:has(#dark-mode:checked) {…}
Ini adalah kasus penggunaan sederhana yang tidak mengubah subjek pemilih. Jika hanya melihat contoh seperti ini, Anda mungkin menganggap :has() dibatasi pada menjadi pemilih induk. Namun, pertimbangkan contoh
berikut. Fungsi ini memeriksa sesuatu berdasarkan ancestor yang sama, lalu mengalihkan pemilih
ke turunan yang lebih dalam di halaman.
Simbol ini menampilkan elemen error formulir jika salah satu inputnya tidak valid:
form:has(:user-invalid) .error {
display: block;
}
Yang satu ini menggeser area konten utama saat sidebar memiliki class .--is-open:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Berikut adalah demo seru yang menggunakan :has() sebagai pemilih induk, :has() dengan kueri kuantitas,
dan kueri penampung untuk membuat tata letak petak yang mampu menampilkan
1-12 elemen secara elegan dalam orientasi potret atau lanskap:
Membuat subgrid
subgrid
Selama bertahun-tahun komunitas web front-end meminta subgrid untuk membantu melengkapi dan menyelesaikan mesin tata letak petak CSS yang sangat populer dan andal. Teknologi ini sekarang tersedia di ketiga mesin utama.
Pelajari subgrid lebih lanjut di sini, jika Anda menginginkan ringkasan.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Nest dengan cara CSS
nesting
Penyusunan bertingkat CSS bawaan tersedia di semua browser utama pada tahun 2023. Saya bahkan memperbarui situs saya untuk menghapus proses build yang mengompilasi secara bertingkat, dan sekarang saya mengirimkan stylesheet yang lebih kecil. Ya, stylesheet dengan tingkatan lebih kecil dan semua devtools browser siap mewakilinya.
Anda dapat menemukan ringkasan sintaksis bertingkat CSS di sini, untuk semua detailnya. Contoh kode berikut menunjukkan contoh sintaksis.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
Biarkan browser menyeimbangkan judul
balance
pretty
Tanpa text-wrap: balance, developer dan copy writer akan memiliki petunjuk jeda baris
seperti elemen <wbr> atau ­. Biasanya, pertempuran kalah karena segera
konten diterjemahkan, diperbesar, atau diubah dengan cara apa pun, tidak ada jaminan bahwa
petunjuk penggabungan tersebut akan berada di tempat yang tepat untuk penyajian konten yang baru.
Dengan pengemasan teks yang seimbang, Anda dapat menyerahkan pekerjaan ini ke browser. Anda dapat melihat perbandingannya di Codepen berikut.
Menggunakan unit kueri container
cqw
Postingan tahun lalu menyarankan agar setiap developer front-end tahu cara menulis kueri container. Jika Anda belum mempelajarinya, gunakan tahun 2024 sebagai tahun yang akan mengambil kesempatan Anda, dan lihat juga unit kueri penampung. Sebagai ringkasan, Ahmad Shadeed menulis artikel bagus tentang unit kueri container pada tahun 2021.
Ada enam unit kontainer baru:
- Varian inline
cqi. - Varian lebar
cqw. - Varian blok
cqb. - Varian tinggi
cqh. - Varian untuk panjang mana pun yang lebih kecil
cqmin. - Varian untuk panjang mana pun yang lebih besar
cqmax.
Pertimbangkan skenario untuk animasi relatif dan intrinsik ke container. Elemen turunan yang sepenuhnya bergeser keluar dari container-nya menggunakan 100cqi—yang merupakan 100% dari ukuran inline container.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Berikut adalah kartu dengan tipografi responsif penampung, dan gambar yang disesuaikan dengan orientasi penampung, yang menjadi setengah ukuran jika orientasinya adalah lanskap.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Jika unit ini Anda baru bagi Anda, sebaiknya tinjau semua unit yang tersedia untuk Anda pada tahun 2024.