Menggali Properti Tampilan: Dua Nilai Tampilan

Tata letak flex atau grid dimulai dengan Anda mendeklarasikan display: flex atau display: grid . Metode tata letak ini adalah nilai dari properti display CSS. Kami cenderung tidak membicarakan properti ini sendiri, alih-alih berkonsentrasi pada nilai flex atau grid , namun, ada beberapa hal menarik untuk dipahami tentang display dan bagaimana itu didefinisikan yang akan membuat hidup Anda lebih mudah saat Anda menggunakan CSS untuk tata letak.

Dalam artikel ini, yang pertama dalam seri pendek, saya akan melihat bagaimana nilai display didefinisikan dalam spesifikasi Level 3. Ini adalah perubahan cara kami mendefinisikan display di versi CSS sebelumnya. Meskipun mungkin tampak tidak biasa pada awalnya bagi kita yang telah melakukan CSS selama bertahun-tahun, saya pikir perubahan ini sangat membantu untuk menjelaskan apa yang terjadi ketika kita mengubah nilai display pada suatu elemen.

Blok Dan Elemen Sebaris

Salah satu hal pertama yang kami ajarkan kepada orang-orang yang baru mengenal CSS adalah konsep blok dan elemen sebaris. Kami akan menjelaskan bahwa beberapa elemen pada halaman adalah display: block dan mereka memiliki fitur tertentu karena ini. Mereka meregang ke arah inline, mengambil ruang sebanyak yang tersedia untuk mereka. Mereka menerobos ke baris baru; kita bisa memberi mereka lebar, tinggi, margin serta padding, dan properti ini akan mendorong elemen lain pada halaman menjauh dari mereka.

Kita juga tahu bahwa beberapa elemen adalah display: inline . Elemen sebaris seperti kata-kata dalam sebuah kalimat; mereka tidak masuk ke baris baru, melainkan memesan karakter spasi putih di antara mereka. Jika Anda menambahkan margin dan padding, ini akan ditampilkan tetapi tidak akan mendorong elemen lain menjauh.

Perilaku elemen blok dan sebaris merupakan dasar CSS dan fakta bahwa dokumen HTML yang ditandai dengan benar akan dapat dibaca secara default. Tata letak ini disebut sebagai “Block and Inline Layout” atau “Normal Flow” karena ini adalah cara elemen menata dirinya sendiri jika kita tidak melakukan hal lain pada elemen tersebut.

Nilai display Dalam Dan Luar

Kami memahami elemen blok dan sebaris, tetapi apa yang terjadi jika kami membuat item display: grid ? Apakah ini sesuatu yang sama sekali berbeda? Jika kita melihat komponen yang telah kita tentukan display: grid , dalam hal elemen induk dalam tata letak, ia berperilaku seperti elemen block level . Elemen akan meregang dan mengambil sebanyak mungkin ruang dalam dimensi sebaris yang tersedia, elemen tersebut akan mulai pada baris baru. Ini berperilaku seperti elemen block dalam hal bagaimana berperilaku di samping tata letak lainnya. Kami belum mengatakan display: block , atau sudahkah?

Ternyata kita punya. Di Level 3 spesifikasi Tampilan, nilai display didefinisikan sebagai dua kata kunci. Kata kunci ini menentukan nilai luar tampilan, yang akan menjadi inline atau block dan oleh karena itu menentukan bagaimana elemen berperilaku dalam tata letak bersama elemen lainnya. Mereka juga menentukan nilai dalam elemen — atau bagaimana anak-anak langsung dari elemen itu berperilaku.

Ini berarti bahwa ketika Anda mengatakan display: grid , yang sebenarnya Anda katakan adalah display: block grid . Anda meminta wadah kotak tingkat blok. Sebuah elemen yang akan memiliki semua atribut blok — Anda dapat memberikan tinggi dan lebar, margin dan padding, dan itu akan meregang untuk mengisi wadah. Anak-anak dari wadah itu, bagaimanapun, telah diberi nilai dalam grid sehingga mereka menjadi item kotak. Bagaimana item kisi tersebut berperilaku ditentukan dalam Spesifikasi Grid CSS: spesifikasi display memberi kita cara untuk memberi tahu browser bahwa ini adalah metode tata letak yang ingin kita gunakan.

Saya pikir cara berpikir tentang display ini sangat membantu; itu secara langsung menjelaskan apa yang kami lakukan dengan berbagai metode tata letak. Jika Anda menentukan display: inline flex , apa yang Anda harapkan? Mudah-mudahan, sebuah kotak yang berperilaku sebagai elemen sebaris, dengan anak-anak yang merupakan item fleksibel.

Ada beberapa hal lain yang dijelaskan dengan rapi dengan memikirkan display dengan cara baru ini, dan saya akan melihat beberapa di antaranya di sisa artikel ini.

Kami Selalu Kembali ke Arus Normal

Saat memikirkan properti tampilan dalam dan luar ini, akan sangat membantu untuk mempertimbangkan apa yang terjadi jika kita tidak mengacaukan nilai tampilan sama sekali. Jika Anda menulis beberapa HTML dan melihatnya di browser, yang Anda dapatkan adalah Block and Inline Layout, atau Normal Flow. Elemen ditampilkan sebagai elemen block atau inline .

Contoh di bawah ini berisi beberapa markup yang saya ubah menjadi objek media, dengan membuat tampilan div display: flex (dua anak langsung) sekarang menjadi item flex, jadi gambar sekarang berjajar dengan konten. Namun jika dilihat dari kontennya, ada heading dan paragraf yang kembali tampil normal. Anak-anak langsung dari objek media menjadi item fleksibel; anak-anak mereka kembali ke aliran normal kecuali kita mengubah nilai tampilan pada item fleksibel. Wadah fleksibel itu sendiri adalah kotak blok, seperti yang Anda lihat dari fakta bahwa perbatasan meluas ke tepi induknya.

Jika Anda bekerja dengan proses ini, fakta bahwa elemen pada halaman Anda akan ditata dengan tata letak aliran normal yang bagus dan dapat dibaca ini, daripada melawannya dan mencoba menempatkan semuanya, CSS jauh lebih mudah. Anda juga cenderung tidak jatuh ke dalam masalah aksesibilitas, karena Anda bekerja dengan urutan dokumen, yang persis seperti yang dilakukan oleh pembaca layar atau orang yang menelusuri dokumen.

Menjelaskan flow-root Dan inline-block

Nilai inline-block juga mungkin tidak asing lagi bagi banyak dari kita yang telah melakukan CSS untuk sementara waktu. Nilai ini adalah cara untuk mendapatkan beberapa perilaku blok pada elemen inline . Misalnya, elemen inline-block dapat memiliki lebar dan tinggi. Elemen dengan display: inline-block juga berperilaku dengan cara yang menarik karena menciptakan konten B kunci F pemformatan ( BFC ).

BFC melakukan beberapa hal yang berguna dalam hal tata letak, misalnya, berisi pelampung. Untuk membaca tentang Konteks Pemformatan Blok secara lebih rinci, lihat artikel saya sebelumnya “Memahami Tata Letak CSS Dan Konteks Pemformatan Blok.” Oleh karena itu mengatakan display: inline-block memberi Anda kotak inline yang juga membentuk BFC.

Seperti yang akan Anda temukan (jika Anda membaca artikel yang disebutkan di atas tentang Konteks Pemformatan Blok), ada nilai tampilan yang lebih baru yang juga secara eksplisit membuat BFC. Ini adalah nilai flow-root . Nilai ini membuat BFC pada blok, bukan elemen sebaris.

• display: inline-block memberi Anda BFC pada kotak inline.
• display: flow-root memberi Anda BFC pada kotak blok.

Anda sekarang mungkin berpikir bahwa semuanya agak membingungkan: mengapa kita memiliki dua kata kunci yang sama sekali berbeda di sini, dan apa yang terjadi dengan sintaks dua nilai yang kita bicarakan sebelumnya? Ini mengarah dengan rapi ke hal berikutnya yang perlu saya jelaskan tentang display , yaitu fakta bahwa CSS memiliki riwayat yang perlu kita tangani dalam hal properti display .

Nilai Tampilan Lama

Spesifikasi CSS2 merinci nilai berikut untuk properti display :

• inline
• block
• inline-block
• list-item
• none
• table
• inline-table

Juga didefinisikan berbagai properti internal tabel seperti table-cell yang tidak kita bahas dalam artikel ini.

Kami kemudian menambahkan beberapa nilai ini untuk tampilan, untuk mendukung tata letak flex dan grid:

• grid
• inline-grid
• flex
• inline-flex

Catatan : Spesifikasi juga mendefinisikan ruby ​​​​dan inline-ruby untuk mendukung Teks Ruby yang dapat Anda baca di spesifikasi Ruby.

Ini semua adalah nilai tunggal untuk properti display , yang ditentukan sebelum spesifikasi diperbarui untuk menjelaskan Tata Letak CSS dengan cara ini. Sesuatu yang sangat penting tentang CSS adalah fakta bahwa kita tidak berkeliling merusak web; kita tidak bisa begitu saja mengubah banyak hal . Kami tidak dapat tiba-tiba memutuskan bahwa setiap orang harus menggunakan sintaks dua nilai baru ini dan oleh karena itu setiap situs web yang pernah dibuat yang menggunakan sintaks nilai tunggal akan rusak kecuali jika pengembang kembali dan memperbaikinya!

Sambil memikirkan masalah ini, Anda mungkin menikmati daftar kesalahan dalam desain CSS yang lebih sedikit kesalahan dalam banyak kasus seperti hal-hal yang dirancang tanpa bola kristal untuk melihat ke masa depan! Namun, faktanya adalah kami tidak dapat merusak web, itulah sebabnya kami memiliki situasi ini di mana saat ini browser mendukung satu set nilai tunggal untuk tampilan, dan spesifikasi berpindah ke dua nilai untuk tampilan.

Cara kami menyiasatinya adalah dengan menentukan nilai lama dan nilai pendek untuk tampilan, yang mencakup semua nilai tunggal ini. Ini berarti bahwa pemetaan dapat ditentukan antara nilai tunggal dan dua nilai kata kunci baru. Yang memberi kita tabel nilai berikut:

Untuk menjelaskan cara kerjanya, kita dapat memikirkan wadah kotak. Di dunia dua nilai, kami akan membuat wadah kotak tingkat blok dengan:

 .container { display: block grid; }

Namun, kata kunci legacy berarti bahwa yang berikut ini melakukan hal yang sama:

 .container { display: grid; }

Sebaliknya, jika kami menginginkan wadah kotak sebaris, di dunia dua nilai kami akan menggunakan:

 .container { display: inline grid; }

Dan jika menggunakan nilai warisan:

 .container { display: inline-grid; }

Kita sekarang dapat kembali ke tempat percakapan ini dimulai dan melihat display: inline-block . Melihat tabel, Anda dapat melihat bahwa ini didefinisikan di dunia dua nilai sebagai display: inline flow-root . Sekarang cocok dengan display: flow-root yang di dunia dua nilai akan display: block flow-root . Sedikit merapikan dan klarifikasi tentang bagaimana hal-hal ini didefinisikan. Pemfaktoran ulang CSS, jika Anda suka.

Dukungan Browser Untuk Sintaks Dua Nilai

Sampai sekarang, browser tidak mendukung sintaks dua nilai untuk properti display . Bug implementasi untuk Firefox dapat ditemukan di sini. Implementasi — ketika itu terjadi — pada dasarnya akan melibatkan aliasing nilai warisan ke versi dua nilai. Oleh karena itu, mungkin perlu waktu yang cukup lama, sebelum Anda benar-benar dapat menggunakan versi dua nilai ini dalam kode Anda. Namun, sebenarnya bukan itu inti dari artikel ini. Sebaliknya, saya pikir melihat nilai tampilan dalam model dua nilai membantu menjelaskan banyak hal yang sedang terjadi.

Saat Anda mendefinisikan tata letak pada sebuah kotak di CSS, Anda mendefinisikan apa yang terjadi pada kotak ini dalam kaitannya dengan bagaimana ia berperilaku dalam kaitannya dengan semua kotak lain dalam tata letak . Anda juga mendefinisikan bagaimana anak- anak dari kotak itu berperilaku. Anda dapat berpikir dengan cara ini jauh sebelum Anda dapat mendeklarasikan nilai secara eksplisit sebagai dua hal yang terpisah, karena kata kunci lawas memetakan ke nilai tersebut, dan ini akan membantu Anda memahami apa yang terjadi saat Anda mengubah nilai display .