Kelompok Kerja CSS (CSSWG) bertemu setiap minggu (atau hampir bersamaan) untuk berdiskusi dan menyelesaikan masalah dengan cepat di GitHub yang mungkin hilang dalam percakapan forum bolak-balik. Meski setiap pertemuan selalu menghadirkan perbincangan menarik, Rabu (4 Desember) lalu terasa istimewa. CSSWG berkumpul untuk mencoba meredam perdebatan yang telah berlangsung selama lima tahun ini: Apakah Freemasonry harus menjadi bagian dari jaringan atau sistem yang terpisah.
Saya akan mencoba merangkum keadaan diskusi saat ini, tetapi jika Anda mencari versi yang panjang, saya sarankan membaca CSS Masonry & CSS Grid oleh Jeff dan Select Masonry Syntax in CSS oleh Miriam Susan.
-Advertisement-.
Pada tahun 2017, itu adalah Kami sering ditanya apakah Grid dapat menangani tata letak bangunan; Tata letak di mana kolom (atauBaris) dapat berisi elemen dengan ukuran yang tidak sama tanpa ada celah di antara elemen tersebut. Meskipun ini hanyalah salah satu dari beberapa kemungkinan terkait konstruksi, Anda dapat mempertimbangkan tata letak yang dipopulerkan oleh Pinterest:

Pada tahun 2020, Firefox merilis prototipe yang strukturnya diintegrasikan ke dalam modul tata letak CSS Grid. Pendukung utama yang menentang hal ini adalah Rachel Andrew, yang berargumentasi bahwa hal tersebut harus menjadi hal tersendiri. Sejak itu, diskusi meningkat dengan dua proposal dari Apple dan Google, masing-masing mendukung dan menentang sintaksis jaringan terintegrasi.
Terdapat beberapa permasalahan teknis mengenai implementasi pembangunan jaringan yang telah diselesaikan. Yang perlu Anda ketahui adalah ini: Sekarang, ini masalah sintaksis. Secara khusus, apa sintaksnya
A. Lebih mudah dipelajari bagi penulis dan
untuk. Bagaimana keputusan ini memengaruhi potensi pengembangan di masa depan pada salah satu atau kedua model (atau CSS secara umum).
Di sela-selanya, Technical Architecture Group (TAG) W3C diminta memberikan masukan mengenai masalah tersebut yang berujung pada upaya menyatukan kedua proposal tersebut. Kedua belah pihak mengemukakan argumen-argumen yang kuat dalam serangkaian publikasi, dan pada pertemuan berikutnya, mereka diminta untuk mengemukakan kembali argumen-argumen tersebut dalam sebuah presentasi, dengan harapan mencapai konsensus.
Ingat, Anda dapat berlangganan dan membaca prosiding selengkapnya di W3C.org
Pertempuran presentasi
Alison Maher, perwakilan Google dan penganjur penerapan Freemasonry sebagai proposisi nilai baru, membuka pertemuan dengan presentasi. Poin utamanya adalah:
- Banyak properti berperilaku berbeda antara struktur dan mesh.
- Pengaturan default yang lebih baik saat pengaturan
display: masonry
Ini adalah sesuatu yang baru-baru ini dibela oleh Rachel Andrew. - Ada argumen yang menentang
display: masonry
Karena tindakan fallback akan lebih lama penerapannya, sedangkan pada jaringan yang terintegrasi, tindakan fallback jaringan sudah ada. Alison Maher membantahnya karena “kebutuhan akan seseorang adalah masalah sementara, jadi [we] “Mereka harus fokus pada masa depan,” dan “penulis harus mengambil tindakan pencegahan yang jelas, untuk menghindari kejutan.” - “Penempatan posisi dalam konstruksi lebih sederhana daripada pada grid, karena hanya ditempatkan pada satu sumbu, bukan dua.”
- Pintasan juga lebih baik: “Pintasan mesh rumit dan sulit digunakan. Pintasan konstruksi lebih mudah karena Anda tidak perlu mengingat urutannya.
- “Penempatan bekerja secara berbeda dalam jaringan versus konstruksi” dan “Penyelarasan juga sangat berbeda.”
- Akan ada “perubahan build/subnet lain yang akan mengakibatkan perbedaan”.
- “Mengintegrasikan konstruksi ke dalam jaringan akan membuat spesifikasi membengkak, akan sulit untuk diajarkan, dan akan membingungkan pengembang.”
com.alisonmaher: “Kesimpulan: Konstruksi harus merupakan jenis tampilan terpisah”
Ini diikuti dengan presentasi lain oleh Gene Simmons, yang mewakili tim WebKit dan merupakan pendukung pendekatan “Just Use Grid”. Dalam aspek ini, poin yang paling menonjol adalah:
- Pembelajaran penulis dapat menyimpang karena “tipe tata letak baru membuat alat terpisah dengan sintaksis terpisah yang mirip tetapi tidak identik dengan yang sudah ada” […]. “Mereka familiar, tapi tidak persis sama.”
- Proposal Chrome akan menambahkan sekitar 10 fitur baru. “Kami rasa tidak ada alasan kuat untuk menambahkan banyak properti baru ke CSS.”

- “Chromium mengatakan sintaks baru mereka lebih mudah dimengerti. Kami tidak setuju, gunakan saja
grid-auto-flow
“ - “Saat Anda memplot baris dalam kisi, sintaks templatnya sedikit berbeda – Anda menumpuk nama templat untuk benar-benar memplot nama baris. Hanya menggunakan kisi akan menggunakan kembali sintaks ini sepenuhnya; tetapi tata letak konstruksi baru menggunakan sintaks kolom untuk barisan”
- “Perbedaan lainnya adalah aliran otomatis – kisi menunjukkan arah pengisian dasar, Chrome menganggap ini tidak logis dan mengubahnya agar sesuai dengan arah garis.”

- “Chrome berpendapat bahwa tipe tampilan baru memungkinkan pengaturan default yang lebih baik — tetapi saran default tidak ada gunanya […] Ini tidak bekerja semudah yang diklaim [see article] Membutuhkan pemahaman mendalam tentang penskalaan otomatis”
- “Lebih mudah untuk beralih, misalnya pada titik henti sementara atau peningkatan bertahap”
- “Mengikuti prinsip desain CSS dalam menggunakan kembali apa yang sudah ada”
Tinjauan tag
Setelah memberikan dua presentasi dengan argumen yang meyakinkan, Leah Ferro (juga anggota TAG) melanjutkan intervensinya.
Lea: Kami telah meninjau TAG tentang masalah ini. Pendapat saya sepenuhnya tercermin di sana. Saya pikir argumen yang dibuat oleh tim WebKit cukup meyakinkan. Kami percaya bahwa konstruksi tidak hanya harus menjadi bagian dari jaringan, namun lebih dari itu. Banyak argumen yang mendukung integrasi adalah bahwa “jaringan listrik terlalu sulit.” Dalam hal ini kita harus membuat jaringan menjadi lebih mudah. Hal-hal rumit mungkin terjadi, tetapi hal-hal sederhana tidaklah mudah.
Sebagian besar argumen Google adalah default, namun kita dapat memiliki default yang lebih cerdas — ada preseden untuk hal ini di CSS jika kita memutuskan bahwa hal tersebut akan membantu ergonomi. Kami setuju bahwa peralihan antara jaringan dan gedung adalah hal biasa. Jaringan mungkin merupakan opsi cadangan yang sedikit lebih baik daripada tidak sama sekali, namun argumennya sederhana karena orang dapat menggunakannya
@supports
. Memperkenalkan semua properti baru ini meningkatkan permukaan API yang perlu dipelajari penulis. Lebih sedikit yang bisa mereka angkut. Bahkan jika kita mengatakan kita akan mendisiplinkan, pengalaman menunjukkan bahwa kita tidak akan melakukannya. Meski tidak disengaja, itu tidak disengaja. Kering – Anda tidak memiliki banyak sumber kebenaranSalah satu argumen yang menentang pembangunan grid adalah bahwa grid bersifat dua dimensi, namun pada kenyataannya grid desain grafis sering kali berbentuk satu dimensi. Saya setuju bahwa sebagian besar kasus penggunaan build memerlukan mesh yang lebih sederhana daripada kasus penggunaan mesh pada umumnya, namun itu berarti kita harus membuat pendefinisian mesh ini lebih mudah untuk mesh dan build. Semakin dalam kami memeriksanya, semakin kami menyadari bahwa ada 3 mode tata letak berbeda yang memberi Anda pengaturan 2D untuk anak-anak. Kami merekomendasikan untuk tidak hanya menjadikan build sebagai bagian dari jaringan, namun mencari cara untuk mengintegrasikan dengan lebih baik apa yang sudah kita miliki, dapatkah kita menemukan jalan pintas yang mendefinisikan
grid-auto-flow
Danflex-direction
Jadi mempromosikan arah perencanaan secara umum? Maka penulis perlu mempelajari satu kontrol saja untuk itu.
Diskusi
Semuanya sudah diletakkan di atas meja, dan yang tersisa hanyalah apa yang dikatakan anggota lainnya.
Oriole: Masalah dengan logika Gene Simmons. Dia mengatakan bahwa properti arah konstruksi yang diusulkan akan menjadi sintaksis baru yang tidak cocok
grid-auto-flow
Properti, tapi properti ini cocokflex-direction
Properti jadi alih-alih mencoba mendekati grid, ia mencoba mendekati flexbox. Yang paling dekat dengan grid adalah sebuah opsi, dan dapat konsisten dengan berbagai hal.
com.asterns: Salah satu pertanyaan yang saya ajukan adalah, apakah ada yang berubah pikiran tentang proposal yang mereka dukung? Saya pribadi punya. Saya pikir fitur tampilan terpisah lebih masuk akal, dalam hal desain fitur, dan saya cukup terintimidasi oleh gagasan bahwa kita harus mempertimbangkan grid dan bangunan untuk setiap pengembangan baru yang mana keduanya tampak statis bagi saya tetapi Argumen TAG meyakinkan saya bahwa kita harus melakukan upaya mengintegrasikan Hal-hal ini.
Tabatkin: Terima kasih telah menyiapkan ini untuk saya, karena saya akan membantah argumen TAG! Saya rasa mereka salah dalam kasus ini. Anda dapat menggambar banyak koneksi tingkat permukaan antara Grid, Masonry, Flexbox, dan tata letak default lainnya, namun ketika Anda benar-benar melihat detail cara kerjanya, perilaku yang mampu dilakukan masing-masingnya, sangatlah berbeda Anda mencoba menggabungkannya bersama-sama, itu akan menjadi kekacauan yang tidak lengkap. Suci dari batasan yang saling bertentangan – misalnya, tekuk elemen bangunan atau jaring atau Anda akan mendapatkan kombinasi “tata letak 2D” yang aneh.
Namun jika Anda menyebutnya fleksibel, Anda akan dapat mengakses properti ini, atau menyebutnya mesh, atau mengakses properti lainnya (contoh nyata, contoh “substrat” yang disebutkan dalam postingan blog webKit, yang tidak konsisten dengan konsep inti dalam membangun dan melenturkan karena Anda menginginkan jaringan konteks koordinasi blok bersama, dll. yang memiliki konteks koordinasi berbeda, dan tidak dapat menggunakan float.
Lea: Faktanya, argumen TAG adalah bahwa tata letak sebenarnya tampak seperti sebuah kontinum, dan sintaksisnya harus mengakomodasi hal tersebut daripada memaksakan salah satu dari dua ekstrem (jaringan fleksibel vs. jaringan yang ada).
Perdebatan berlanjut bolak-balik hingga ada upaya untuk menetapkan bintang utara secara umum menyusul.
jyaskin: Saya ingin menekankan dua aspek tinjauan TAG. Tampaknya sangat bagus untuk menjaga properti dari saran Chrome bahwa Anda tidak harus mempelajari keduanya, Anda cukup mempelajari cara membangun tanpa mempelajari semua mesh meskipun itu dalam sistem terpadu yang mungkin masih menentukan pintasan build, atur jaring milik
jesimmons: Untuk membuat tata letak gaya batu sederhana di Grid, Anda hanya memerlukan 3 baris kode (4 baris diberi celah). Ini sangat sederhana.
jyaskin: Bagian paling bulat dari masukan TAG adalah berbagi properti bila memungkinkan. Tidak perlu berbagi nilai “tampilan” yang sama; Nilai “lebar” yang berbeda dapat ditentukan tetapi berbagi properti. Satu-satunya hal yang tidak kami sukai dari proposal terpadu ini adalah…
grid-auto-flow
Dalam proposal terpadu, beberapa nilai diabaikan. Ya, inilah kemudahan penggunaan yang saya fokuskan
Keputusan terpisah lainnya
Terlepas dari segalanya, sepertinya tidak ada yang menyerah, dan perdebatan kembali terhenti:
com.asterns: Saya belum mendengar jalan ke depan. Pada titik tertentu, satu kubu harus berkompromi agar hal ini dapat berjalan maju.
Lea: Bagaimana jika kita melakukan jajak pendapat? Bukan untuk mengambil keputusan, tapi untuk mengetahui seberapa jauh kita dari konsensus? +1 Lea
Pemungutan suara telah dilakukan dan hasilnya telah dibagi.

Florian: Meskipun kami masih belum dapat mencapai konsensus, saya ingin mengucapkan terima kasih kepada kedua belah pihak yang telah menyampaikan argumen-argumen yang jelas, padat dan disajikan dengan baik. Saya akan kembali ke presentasi dan meninjau kembali beberapa poin, sangat membantu untuk membuat presentasi seperti semula.
Itu semua orang, keputusan terpisah! Tidak ada keunggulan dari kedua proposal tersebut, dan menerapkan sesuatu dengan pendapat yang bertentangan adalah sesuatu yang tidak akan disetujui oleh siapa pun. Setelah berdiskusi selama lebih dari lima tahun, saya yakin pertemuan ini merupakan pertanda baik bahwa proposal baru yang menjawab kekhawatiran kedua belah pihak harus dipertimbangkan, namun ini hanyalah pendapat pribadi saya. Bagi saya, konstruksi (atau apa pun namanya) adalah langkah penting dalam tata letak CSS yang dapat membentuk tata letak masa depan, dan tidak boleh terburu-buru, jadi sampai saat itu, saya dengan senang hati menunggu proposal yang memuaskan kedua belah pihak.
Bacaan lebih lanjut
- Bantu kami memilih versi final CSS Freemasonry (Gene Simmons dan Elika Etemad, dengan Brandon Stewart)
- Komentar Diperlukan: Bagaimana kita mendefinisikan sintaksis CSS? (Rachel Andrew, Ian Kilpatrick, dan Tab Atkins-Bittner)
- Bobot pada CSS Masonry (Keith J. Grant)
- Freemasonry dan Asumsi Baik (Rachel Andrew)
- Haruskah konstruksi menjadi bagian dari grid CSS? (Ahmed Shedid)
Masalah terkait
- Dukungan tata letak gaya Pinterest/Masonry #945
- Komentar desainer/pengembang tentang tata letak bangunan #10233
- Jalur pembangunan alternatif ke depan #9041
- Tata Letak Konstruksi CSS #1003
- Pembahasan Sintaks Masonik No.11243
CSSWG Minutes Telecon (2024-12-04): Just Grid vs. Demo: Freemasonry awalnya diterbitkan di CSS-Tricks, yang merupakan bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.