Coba CSS Bersarang hari ini

Kembali pada bulan Desember, kami menulis artikel yang merinci tiga opsi berbeda untuk Nesting CSS. Di dalamnya, kami menjelaskan perbedaan antara Opsi 3, Opsi 4, dan Opsi 5, mendemonstrasikan bagaimana masing-masing akan bekerja melalui serangkaian contoh. Lalu kami mengajukan pertanyaan sederhana: “Opsi mana yang terbaik untuk masa depan CSS?”

Pengembang web menanggapi jajak pendapat dengan sangat jelas. Opsi 3 menang telak.

Dan sekarang, Safari dan Chrome telah mengimplementasikan Opsi 3. Dua minggu lalu, pada tanggal 25 Januari, CSS Nesting dikirimkan dalam Pratinjau Teknologi Safari 162, secara default. Jika Anda memiliki Mac, cukup unduh dan buka Pratinjau Teknologi Safari, tulis beberapa CSS bersarang, dan rasakan cara kerjanya!

Bagaimana CSS Bersarang Bekerja

Bayangkan Anda memiliki beberapa CSS yang ingin Anda tulis dengan cara yang lebih ringkas.

.foo 
  color: green;

.foo .bar 
  font-size: 1.4rem;

Dengan CSS Nesting, Anda dapat menulis kode seperti:

.foo 
  color: green;
 .bar 
    font-size: 1.4rem;
  

Jika Anda telah membuat gaya bersarang di Sass, Anda akan menemukan ini sangat familiar.

Tidak seperti Sass, bagaimanapun, jenis sarang ini tidak akan selalu berhasil. Karena keterbatasan mesin parsing browser, Anda harus memastikan pemilih bersarang (.bar dalam contoh di atas) selalu dimulai dengan simbol. Jika itu adalah class, ID, pseudo-class, pseudo-element, pemilih atribut, atau pemilih apa pun yang menggunakan simbol di awal — Anda berhasil. Misalnya, semua ini akan baik-baik saja. Semua pemilih bersarang berikut dimulai dengan simbol — . # : [ * + > ~ — bukan surat:

main ="zh"]  ... 
 *  ... 
 + article  ... 
 > p  ... 
 ~ main  ... 

Namun, ada satu jenis pemilih yang dimulai dengan huruf — pemilih elemen bersarang. Contoh ini tidak akan berfungsi:

main 
 article  ... 

Kode itu akan gagal, karena article dimulai dengan huruf, dan bukan simbol. Bagaimana itu akan gagal? Cara yang sama akan gagal jika Anda salah mengeja article sebagai atirlce. CSS bersarang yang bergantung pada pemilih tertentu itu diabaikan begitu saja.

Anda memiliki beberapa opsi tentang apa yang harus dilakukan terkait batasan ini. Mari kita mulai dengan melihat solusi yang mungkin paling sering Anda gunakan. Anda cukup menempatkan sebuah & sebelum pemilih elemen, seperti ini:

main 
 & article  ... 

Itu & sinyal ke browser “di sinilah saya ingin pemilih dari luar sarang ini pergi”. Dengan menggunakan sebuah & sebelum pemilih elemen apa pun, Anda berhasil memulai pemilih bersarang dengan simbol, bukan huruf. Oleh karena itu, ini akan berhasil.

aside 
 & p  ... 

adalah ekuivalen bersarang dengan:

aside p  ... 

Itu & juga sangat berguna untuk kasus penggunaan lainnya.

Bayangkan Anda memiliki kode yang tidak bersarang ini:

ul 
  padding-left: 1em;

.component ul 
  padding-left: 0;

Anda akan melihat bahwa pemilih yang dimaksud adalah .component ul – Dimana ul adalah yang kedua.

Untuk menulis aturan bersarang yang menghasilkan hasil seperti itu, Anda dapat menulis:

ul 
  padding-left: 1em;
  .component & 
    padding-left: 0;
  

Sekali lagi, & memberi Anda cara untuk mengatakan “di sinilah saya ingin pemilih bersarang pergi”.

Ini juga berguna saat Anda tidak menginginkan ruang di antara pemilih Anda. Misalnya:

a 
  color: blue;
  &:hover 
    color: lightblue;
  

Kode tersebut menghasilkan hasil yang sama seperti a:hover {. Tanpa &Anda akan mendapatkan a :hover { – perhatikan jarak antara a Dan :hover — yang akan gagal menata tautan hover Anda.

Tetapi bagaimana jika Anda memiliki kode yang tidak bersarang ini?

ul 
  padding-left: 1em;

article ul 
  padding-left: 0;

Anda lakukan bukan ingin menulis versi bersarang seperti ini:

ul 
  padding-left: 1em;
  & article & 
    padding-left: 0;
  

Mengapa tidak? Karena itu akan benar-benar berperilaku dengan cara yang sama seperti aturan yang tidak bersarang ini:

ul 
  padding-left: 1em;

ul article ul 
  padding-left: 0;

Dua daftar tidak berurutan masuk ul article ul? Tidak, bukan itu yang kita inginkan.

Jadi, apa yang harus kita lakukan, karena kita harus mulai article & dengan simbol?

Kita dapat menulis kode kita seperti ini:

ul 
  padding-left: 1em;
  :is(article) & 
    padding-left: 0;
  

Setiap pemilih dapat dibungkus oleh sebuah :is() pseudo-class dan pertahankan kekhususan dan makna yang sama (saat itu satu-satunya pemilih di dalam tanda kurung). Letakkan pemilih elemen di dalamnya :is()dan Anda mendapatkan pemilih yang dimulai dengan simbol untuk tujuan Penyusunan CSS.

Singkatnya, CSS Nesting akan bekerja seperti Sass, tetapi dengan satu aturan baru: Anda harus memastikan pemilih bersarang selalu dimulai dengan simbol.

Investigasi sedang dilakukan untuk melihat apakah pembatasan ini dapat dilonggarkan tanpa membuat mesin parsing lebih lambat. Pembatasan mungkin akan dihapus – baik dalam waktu dekat atau bertahun-tahun di masa depan. Semua orang setuju Nesting akan jauh lebih baik tanpa batasan seperti itu. Tapi kita juga semua setuju bahwa halaman web harus langsung muncul di jendela browser. Menambahkan jeda sekecil apa pun sebelum rendering dimulai bukanlah suatu pilihan.

Apa itu pilihan? Anda dapat menyusun kode bersarang sesuka Anda. Anda dapat menyarangkan lebih dari satu lapisan — menyarangkan CSS di dalam CSS yang sudah disarangkan — di sebanyak mungkin level yang Anda inginkan. Anda dapat menggabungkan Nesting dengan Kueri Kontainer, Kueri Fitur, Kueri Media, dan/atau Lapisan Kaskade sesuka Anda. Apa pun bisa masuk ke dalam apa pun.

Cobalah CSS Nesting hari ini dan lihat pendapat Anda. Uji kode Anda di Pratinjau Teknologi Safari dan Chrome Dev (setelah membalik tanda “Fitur Platform Web Eksperimental”) untuk memastikannya memberikan hasil yang sama. Ini adalah waktu terbaik untuk menemukan bug — sebelum fitur baru ini dikirimkan di browser mana pun. Anda dapat melaporkan masalah di bugs.webkit.org atau bugs.chromium.org. Perhatikan juga catatan rilis untuk beberapa versi Pratinjau Teknologi Safari berikutnya. Masing-masing dapat menyempurnakan penerapan CSS Nesting kami, termasuk upaya yang menambahkan dukungan untuk CSSOM atau pembaruan lainnya agar sesuai dengan potensi perubahan spesifikasi yang dibuat oleh Kelompok Kerja CSS.

Banyak orang di beberapa perusahaan telah bekerja untuk membawa nesting ke CSS selama hampir lima tahun. Sintaksnya telah diperdebatkan dengan hangat, dalam percakapan panjang tentang pro dan kontra dari berbagai solusi. Kami harap Anda menemukan hasilnya sangat membantu.