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

CSS yang layak pakai, canggih, dan stabil yang dapat Anda gunakan saat ini.

Adam Argyle

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()

Dukungan Browser

• 105
• 105
• 121
• 15,4

Sumber

: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.

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:

Coba Codepen

Membuat subgrid

subgrid

Dukungan Browser

• 117
• 117
• 71
• 16

Sumber

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

Dukungan Browser

• 120
• 120
• 117
• 17,2

Sumber

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

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 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

Dukungan Browser

• 105
• 105
• 110
• 16

Sumber

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:

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 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.