5 cuplikan CSS yang harus diketahui setiap developer front-end pada tahun 2024

CSS yang layak untuk Toolbelt, canggih, dan stabil yang dapat Anda gunakan sekarang.

Adam Argyle

Saya yakin setiap developer front-end harus tahu bahwa :has() bukan hanya "pemilih induk", cara dan alasan penggunaan subgrid, cara menyusun dengan sintaksis CSS bawaan, cara membiarkan browser menyeimbangkan pelengkapan teks judul, dan cara menggunakan unit kueri penampung.

Postingan ini adalah kelanjutan dari 6 cuplikan CSS yang harus diketahui setiap front-end developer pada tahun 2023 tahun lalu.

CSS:has(.potential-beyond-being-a-parent-selector)

:has() telah tersedia di semua browser utama pada akhir tahun 2023. Pemilih baru ini tampak kecil dan tidak berbahaya, tetapi Anda akan terkejut dengan semua kasus penggunaan yang dapat diaktifkannya: game, reaktivitas, tata letak yang sesuai konten, komponen smart, dan banyak lagi yang dibahas dalam artikel ini oleh Jhey.

Berikut beberapa contoh penggunaan :has() sebagai pemilih induk. Nama ini didapatkan karena biasanya subjek pemilih berada di akhir, seperti ul li, dengan li adalah subjek dan mendapatkan gaya. Dengan :has(), elemen di awal pemilih dapat menjadi subjek. Dalam 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 yang sudah lama diinginkan adalah mengubah tata letak berdasarkan jumlah item yang dimilikinya. Hal ini kini 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 saat 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 berpikir bahwa :has() terbatas sebagai pemilih induk. Namun, perhatikan contoh berikut. Pemeriksaan ini dilakukan berdasarkan elemen induk yang sama, lalu memutar subjek pemilih ke elemen turunan di suatu tempat yang lebih dalam di halaman.

Contoh ini menampilkan elemen error formulir jika ada input yang tidak valid:

form:has(:user-invalid) .error {
  display: block;
}

Yang ini menggeser area konten utama saat sidenav memiliki class .--is-open:

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

Berikut demo menarik yang menggunakan :has() sebagai pemilih induk, :has() dengan kueri jumlah, dan kueri penampung untuk membuat tata letak petak yang mampu menampilkan 1-12 elemen dengan elegan dalam orientasi potret atau lanskap:

Membuat sub-petak

Selama bertahun-tahun, komunitas web front-end meminta subgrid untuk membantu melengkapi dan menyelesaikan mesin tata letak grid CSS yang sangat populer dan canggih. Kini tersedia di ketiga mesin game utama.

Pelajari subgrid 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;
  }
}

Menyusun dengan cara CSS

Penyusunan CSS bawaan tersedia di semua browser utama pada tahun 2023. Saya bahkan memperbarui situs saya untuk menghapus proses build yang mengompilasi nesting, dan sekarang saya mengirimkan stylesheet yang lebih kecil. Ya, stylesheet dengan nesting lebih kecil dan semua devtools browser siap merepresentasikannya.

Anda dapat menemukan ringkasan sintaksis penyusunan CSS di sini untuk mengetahui 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

Tanpa text-wrap: balance, developer dan penulis teks harus menggunakan petunjuk jeda baris seperti elemen <wbr> atau ­. Hal ini sebagian besar merupakan perjuangan yang sia-sia karena segera setelah konten diterjemahkan, di-zoom, atau dimodifikasi dengan cara apa pun, tidak ada jaminan bahwa petunjuk pelengkapan tersebut akan berada di tempat yang tepat untuk presentasi konten yang baru.

Dengan penggabungan teks yang seimbang, Anda dapat menyerahkan pekerjaan ini kepada browser. Anda dapat melihat perbandingan di Codepen berikut.

Menggunakan unit kueri penampung

Postingan tahun lalu menyarankan agar setiap developer front-end mengetahui cara menulis kueri penampung. Jika Anda belum mempelajarinya, jadikan tahun 2024 sebagai tahun untuk mulai mempelajarinya, dan pelajari juga unit kueri penampung. Sebagai ringkasan, Ahmad Shadeed menulis artikel bagus tentang unit kueri penampung pada tahun 2021.

Ada enam unit kueri kontainer baru:

1. Varian inline cqi.
2. Varian lebar cqw.
3. Varian blok cqb.
4. Varian tinggi cqh.
5. Varian untuk panjang mana pun yang lebih kecil cqmin.
6. Varian untuk panjang mana pun yang lebih besar cqmax.

Pertimbangkan skenario untuk animasi relatif dan intrinsik ke penampung. Elemen turunan yang meluncur keluar sepenuhnya dari containernya dengan menggunakan 100cqi—yaitu 100% ukuran inline container.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

Berikut adalah kartu dengan tipografi responsif penampung, dan gambar yang beradaptasi dengan orientasi penampung, menjadi setengah ukuran jika orientasinya 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 baru bagi Anda, sebaiknya tinjau semua unit yang tersedia untuk Anda pada tahun 2024.