CSS yang layak pakai, canggih, dan stabil yang dapat Anda gunakan saat ini.
Saya yakin setiap developer front-end harus mengetahui bahwa :has()
lebih dari sekadar "pemilih induk",
bagaimana dan mengapa subgrid
, cara bersarang dengan sintaksis CSS bawaan, cara memungkinkan
pengemasan teks judul keseimbangan browser, dan cara menggunakan unit kueri penampung.
Postingan ini adalah kelanjutan dari 6 cuplikan CSS tahun lalu yang harus diketahui setiap front-end developer pada tahun 2023.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has()
hadir di semua browser utama pada akhir tahun 2023. Pemilih baru ini tampaknya
kecil dan polos tetapi Anda akan terkejut dengan semua kasus penggunaan yang dapat dibukanya:
{i>game<i}, reaktivitas, tata letak
yang sadar konten, komponen cerdas, dan
banyak hal lainnya yang dibahas dengan baik dalam artikel oleh Jhey ini.
![4 panel ditampilkan, masing-masing dengan gambar dan keterangan.
Setiap gambar menunjukkan otak yang mengaktifkan lebih banyak kekuatan otak. Panel pertama adalah
mengatakan :has(). Panel kedua mengatakan angka:has(caption) sebagai pemilih induk.
Panel ketiga mengatakan .layout:has(> :nth-child(5)) sebagai pemilih kuantitas.
Panel keempat menyatakan html:has(#inspect) .new-subject sebagai pemilih perubahan subjek bersyarat.](/static/articles/5-css-snippets-every-front-end-developer-should-know-in-2024/image/has-meme.jpg)
Berikut beberapa contoh penggunaan :has()
sebagai pemilih induk. Disebut demikian karena
biasanya subjek pemilih ada di akhir, seperti ul li
, dengan li
sebagai subjek
dan mendapatkan {i>style<i}. 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 mengubah orientasi jika ada gambar di dalamnya.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Pemilih yang diinginkan adalah mengubah tata letak berdasarkan berapa banyak item yang dimilikinya. Hal ini sekarang dapat dilakukan
dengan :has()
karena dapat mempertahankan container sebagai subjek saat mengkueri jumlah turunan.
main:has(> :nth-child(5)) {…}
Contoh lain yang lebih tinggi, mengubah gaya yang ditetapkan di seluruh dokumen saat kotak centang tertentu di halaman diaktifkan:
html:has(#dark-mode:checked) {…}
Ini adalah kasus penggunaan sederhana yang tidak mengubah subjek pemilih, jika Anda hanya melihat contoh
seperti ini, Anda mungkin berpikir bahwa :has()
terbatas hanya untuk menjadi pemilih induk. Pertimbangkan hal berikut
contoh. Ini memeriksa sesuatu berdasarkan ancestor yang sama, lalu memutar pemilih
konten dengan konten turunan di bagian yang lebih dalam di halaman.
Kode ini menampilkan elemen error formulir jika inputnya tidak valid:
form:has(:user-invalid) .error {
display: block;
}
Contoh ini menggeser area konten utama ketika sidenav memiliki class .--is-open
:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Berikut demo seru yang menggunakan :has()
sebagai pemilih induk, :has()
dengan kueri kuantitas,
dan penampung untuk membuat tata letak petak yang mampu menampilkan
1-12 elemen dalam orientasi potret atau lanskap:
Membuat subgrid
subgrid
Selama bertahun-tahun, komunitas web {i>front-end<i} meminta sub{i> <i}untuk membantu menyelesaikan dan mesin tata letak {i>grid<i} CSS yang sangat populer dan kuat. Sekarang tersedia di ketiga mesin utama.
Pelajari subkisi lebih lanjut di sini jika Anda ingin melihat ringkasannya.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Menyarangkan dengan cara CSS
nesting
Penyusunan bertingkat CSS bawaan tersedia di semua browser utama pada tahun 2023. Saya bahkan memperbarui {i>website<i} saya untuk menghapus proses build yang membuatnya bersarang, dan sekarang saya lembar gaya yang lebih kecil! Ya, stylesheet dengan {i>nesting <i}menjadi lebih kecil dan browser devtools siap merepresentasikannya.
Anda dapat menemukan ringkasan tentang 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;
}
}
Memungkinkan browser menyeimbangkan judul
balance
pretty
Tanpa text-wrap: balance
, developer dan penulis teks hanya memerlukan petunjuk jeda baris
seperti elemen <wbr>
atau ­
. Kebanyakan hal ini akan membuat Anda kalah
karena segera setelah
diterjemahkan, diperbesar, atau dimodifikasi dengan cara apa pun, tidak ada jaminan bahwa
Petunjuk penggabungan akan berada di tempat yang tepat untuk presentasi konten yang baru.
Dengan pengemasan teks seimbang, Anda dapat menyerahkan tugas ini ke browser. Anda dapat melihat perbandingannya di Codepen berikut.
Menggunakan unit kueri penampung
cqw
Posting tahun lalu menyarankan bahwa setiap pengembang {i>front-end<i} harus tahu cara menulis untuk kueri container. Jika Anda belum belajar, jadikan tahun 2024 sebagai tahun untuk terjun, dan periksa juga unit kueri kontainer. Sebagai gambaran umum, Ahmad Shadeed menulis artikel bagus tentang unit kueri container pada tahun 2021.
Ada enam unit kkontainer 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 dari
cqmax
.
Pertimbangkan skenario untuk animasi relatif dan intrinsik ke sebuah container. Elemen turunan yang bergeser keluar sepenuhnya dari container-nya dengan menggunakan 100cqi—ini 100% dari ukuran inline container.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Berikut adalah kartu dengan tipografi responsif container, dan gambar yang disesuaikan dengan orientasi container, menjadi setengah dari 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 Anda baru mengenal unit ini, sebaiknya meninjau semua unit yang tersedia untuk Anda pada tahun 2024.