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

CSS yang andal, canggih, dan stabil yang dapat Anda gunakan sekarang.

Adam Argyle

Saya yakin setiap developer frontend 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 penampung.

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

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

:has()

Dukungan Browser

• 105
• 105
• 121
• 15.4

Sumber

:has() akan hadir di semua browser utama pada akhir tahun 2023. Pemilih baru ini tampak kecil dan sederhana, tetapi Anda akan terkejut dengan semua kasus penggunaan yang dapat diaktifkannya: 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 diperoleh karena biasanya subjek pemilih berada di 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 dalam 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 sejak lama adalah mengubah tata letak berdasarkan jumlah item yang dimilikinya. Hal ini kini dapat dilakukan dengan :has() karena dapat mempertahankan penampung sebagai subjek saat membuat kueri jumlah turunan.

main:has(> :nth-child(5)) {…}

Contoh tingkat yang lebih tinggi lainnya, ubah 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, pertimbangkan contoh berikut. Fungsi ini memeriksa sesuatu berdasarkan ancestor umum, lalu memutar subjek pemilih ke turunan di bagian yang lebih dalam di halaman.

Contoh ini menampilkan elemen error formulir jika salah satu inputnya tidak valid:

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

Ini akan menggeser area konten utama saat sidenav 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 jumlah, dan kueri penampung untuk membuat tata letak petak yang mampu menampilkan 1-12 elemen dengan elegan dalam orientasi potret atau lanskap:

Coba di Codepen

Membuat subpetak

subgrid

Dukungan Browser

• 117
• 117
• 71
• 16

Sumber

Selama bertahun-tahun, komunitas web frontend meminta sub-petak untuk membantu melengkapi dan menyelesaikan mesin tata letak petak CSS yang sangat populer dan canggih. Fitur ini kini tersedia di ketiga mesin utama.

Pelajari sub-petak 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;
  }
}

Menyusun bertingkat dengan cara CSS

nesting

Dukungan Browser

• 120
• 120
• 117
• 17.2

Sumber

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

Anda dapat menemukan ringkasan sintaksis penyusunan bertingkat 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;
  }
}

Membiarkan browser menyeimbangkan judul

balance

Dukungan Browser

• 114
• 114
• 121
• 17,5

Sumber

pretty

Dukungan Browser

• 117
• 117
• x
• x

Sumber

Tanpa text-wrap: balance, developer dan penulis teks hanya dapat menggunakan petunjuk baris baru seperti elemen <wbr> atau ­. Hal ini sebagian besar merupakan pertempuran yang kalah karena segera setelah konten diterjemahkan, diperbesar, atau diubah dengan cara apa pun, tidak ada jaminan bahwa petunjuk penggabungan tersebut akan berada di tempat yang tepat untuk presentasi konten baru.

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

Menggunakan unit kueri penampung

cqw

Dukungan Browser

• 105
• 105
• 110
• 16

Sumber

Postingan tahun lalu menyarankan bahwa setiap developer frontend harus mengetahui cara menulis kueri penampung. Jika Anda belum mempelajarinya, jadikan tahun 2024 sebagai tahun untuk memulai, dan lihat juga unit kueri penampung. Sebagai ringkasan, Ahmad Shadeed menulis artikel bagus tentang unit kueri penampung pada tahun 2021.

Ada enam unit kueri container query 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 bergeser sepenuhnya dari penampung dengan menggunakan 100cqi—yaitu 100% dari ukuran inline penampung.

@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 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 baru bagi Anda, sebaiknya tinjau semua unit yang tersedia untuk Anda pada tahun 2024.