Properti Logis CSS Level 2: Membangun Web yang Benar-Benar Global dengan Dukungan Mode Penulisan yang Ditingkatkan

Selama beberapa dekade, pengembang web telah membangun tata letak menggunakan kosakata yang berakar pada dunia fisik: atas, bawah, kiri, dan kanan. Kita mengatur margin-left, padding-top, dan border-right. Model mental ini berfungsi dengan baik ketika web didominasi oleh medium dari kiri ke kanan, atas ke bawah. Namun, web bersifat global. Ini adalah platform untuk semua bahasa dan budaya, banyak di antaranya tidak mengikuti alur arah yang sederhana ini.

Bahasa seperti Arab dan Ibrani ditulis dari kanan ke kiri. Bahasa Jepang dan Cina tradisional dapat ditulis secara vertikal, dari atas ke bawah dan dari kanan ke kiri. Memaksakan model CSS fisik dari kiri ke kanan pada sistem penulisan ini akan menghasilkan tata letak yang rusak, pengalaman pengguna yang membuat frustrasi, dan tumpukan kode pengganti (override). Di sinilah Properti dan Nilai Logis CSS berperan, mewakili pergeseran paradigma fundamental dari arah fisik ke arah logis yang relatif terhadap alur. Meskipun Level 1 telah meletakkan dasarnya, Properti Logis CSS Level 2 melengkapi gambaran tersebut, menyediakan alat yang kita butuhkan untuk membangun antarmuka pengguna yang benar-benar universal dan sadar mode penulisan.

Panduan komprehensif ini akan membawa Anda menyelami lebih dalam tentang penyempurnaan yang dibawa oleh Level 2. Kita akan mulai dengan penyegaran konsep-konsep inti, kemudian menjelajahi properti dan nilai baru yang mengisi celah, dan akhirnya, mempraktikkan semuanya dengan membangun komponen yang beradaptasi secara mulus dengan mode penulisan apa pun. Bersiaplah untuk mengubah cara Anda berpikir tentang tata letak CSS selamanya.

Penyegaran Singkat: Konsep Inti Properti Logis (Level 1)

Sebelum kita dapat mengapresiasi penambahan di Level 2, kita harus memiliki pemahaman yang kuat tentang fondasi yang diletakkan oleh Level 1. Seluruh sistem ini dibangun di atas dua konsep kunci: mode penulisan (writing mode) dan hasilnya yaitu sumbu blok (block axis) dan sumbu inline (inline axis).

Empat Mode Penulisan

Properti CSS writing-mode menentukan arah teks ditata. Meskipun kita sering menerima begitu saja nilai default-nya, ada beberapa nilai yang secara fundamental mengubah cara konten mengalir di halaman:

• horizontal-tb: Ini adalah default untuk sebagian besar bahasa Barat. Teks mengalir secara horizontal (sumbu inline) dari kiri ke kanan (atau kanan ke kiri berdasarkan arah), dan baris-baris menumpuk dari atas ke bawah (sumbu blok).
• vertical-rl: Digunakan untuk tipografi Asia Timur tradisional (misalnya, Jepang, Cina). Teks mengalir secara vertikal dari atas ke bawah (sumbu inline), dan baris-baris menumpuk dari kanan ke kiri (sumbu blok).
• vertical-lr: Mirip dengan yang di atas, tetapi baris-baris menumpuk dari kiri ke kanan (sumbu blok). Kurang umum, tetapi digunakan dalam beberapa konteks seperti aksara Mongolia.
• sidelong-rl / sidelong-lr: Ini untuk kasus penggunaan spesifik di mana Anda ingin meletakkan mesin terbang di sisinya. Ini kurang umum dalam konten web umum.

Konsep Krusial: Sumbu Blok vs. Sumbu Inline

Ini adalah konsep terpenting untuk dipahami. Di dunia logis, kita berhenti berpikir tentang "vertikal" dan "horizontal" dan mulai berpikir dalam istilah sumbu blok dan inline. Orientasi mereka sepenuhnya bergantung pada writing-mode.

• Sumbu Inline adalah arah alur teks dalam satu baris.
• Sumbu Blok adalah arah di mana baris-baris baru ditumpuk.

Mari kita lihat bagaimana ini berjalan:

• Dalam bahasa Inggris standar (writing-mode: horizontal-tb): Sumbu inline berjalan secara horizontal, dan sumbu blok berjalan secara vertikal.
• Dalam bahasa Jepang tradisional (writing-mode: vertical-rl): Sumbu inline berjalan secara vertikal, dan sumbu blok berjalan secara horizontal.

Karena sumbu-sumbu ini dapat beralih, properti seperti width dan height menjadi ambigu. Apakah width adalah ukuran sepanjang sumbu horizontal atau sumbu inline? Properti logis menyelesaikan ambiguitas ini. Kita sekarang memiliki start dan end untuk setiap sumbu:

• block-start: "Atas" dalam bahasa Inggris, tetapi "kanan" dalam bahasa Jepang vertikal.
• block-end: "Bawah" dalam bahasa Inggris, tetapi "kiri" dalam bahasa Jepang vertikal.
• inline-start: "Kiri" dalam bahasa Inggris, tetapi "atas" dalam bahasa Jepang vertikal.
• inline-end: "Kanan" dalam bahasa Inggris, tetapi "bawah" dalam bahasa Jepang vertikal.

Memetakan Properti Fisik ke Logis (Level 1)

Level 1 memperkenalkan serangkaian pemetaan komprehensif dari properti fisik ke logis. Berikut adalah beberapa contoh kunci:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (untuk pemosisian) → inset-inline-start / inset-inline-end
• top / bottom (untuk pemosisian) → inset-block-start / inset-block-end

Level 1 juga memberi kita singkatan yang berguna seperti margin-inline (untuk start dan end) dan padding-block (untuk start dan end).

Selamat Datang di Level 2: Apa yang Baru dan Mengapa Ini Penting

Meskipun Level 1 merupakan langkah maju yang monumental, ia meninggalkan beberapa celah yang terlihat. Properti CSS fundamental tertentu seperti float, clear, dan resize tidak memiliki padanan logis. Selain itu, properti seperti border-radius tidak dapat dikontrol secara logis, memaksa pengembang untuk kembali ke properti fisik untuk penataan gaya yang lebih rinci. Ini berarti Anda bisa membangun tata letak 90% dengan properti logis, tetapi masih memerlukan penggantian fisik untuk mode penulisan yang berbeda, yang sebagian mengalahkan tujuannya.

Properti Logis CSS Level 2 mengatasi kekurangan ini secara langsung. Ini bukan tentang memperkenalkan sistem baru yang radikal, tetapi tentang melengkapi sistem yang dimulai di Level 1. Ini dicapai dengan dua cara utama:

1. Memperkenalkan properti dan nilai logis baru untuk fitur CSS lama yang secara inheren bersifat fisik (seperti float).
2. Menambahkan pemetaan properti logis untuk singkatan kompleks yang sebelumnya diabaikan (seperti border-radius).

Dengan Level 2, visi sistem penataan gaya yang sepenuhnya relatif terhadap alur hampir lengkap, memungkinkan kita untuk membangun komponen yang kompleks, indah, dan kuat yang berfungsi di mana saja, untuk semua orang, tanpa peretasan atau penggantian.

Kupas Tuntas: Nilai dan Properti Logis Baru di Level 2

Mari kita jelajahi penambahan paling berdampak yang dibawa Level 2 ke perangkat pengembang kita. Ini adalah alat yang mengisi celah dan memberdayakan desain komponen yang benar-benar universal.

Float dan Clear: Revolusi Logis

Properti float telah menjadi landasan tata letak CSS selama bertahun-tahun, tetapi nilainya, left dan right, adalah definisi dari arah fisik. Jika Anda mem-float gambar ke left dari paragraf dalam bahasa Inggris, itu terlihat benar. Tetapi alihkan arah dokumen ke kanan-ke-kiri (RTL) untuk bahasa Arab, dan gambar sekarang berada di sisi yang "salah" dari blok teks. Seharusnya di sebelah kanan, yang merupakan awal baris.

Level 2 memperkenalkan dua kata kunci logis baru untuk properti float:

• float: inline-start; Ini mem-float elemen ke awal arah inline. Dalam bahasa LTR, ini adalah kiri. Dalam bahasa RTL, ini adalah kanan. Dalam mode penulisan vertical-rl, ini adalah atas.
• float: inline-end; Ini mem-float elemen ke akhir arah inline. Dalam LTR, ini adalah kanan. Dalam RTL, ini adalah kiri. Dalam vertical-rl, ini adalah bawah.

Demikian pula, properti clear, yang digunakan untuk mengontrol pembungkusan konten di sekitar elemen yang di-float, mendapatkan padanan logisnya:

• clear: inline-start; Membersihkan float di sisi inline-start.
• clear: inline-end; Membersihkan float di sisi inline-end.

Ini adalah pengubah permainan. Anda sekarang dapat membuat tata letak gambar-dengan-teks klasik yang secara otomatis beradaptasi dengan arah bahasa apa pun tanpa satu baris pun CSS tambahan.

Kontrol yang Ditingkatkan dengan Resize Logis

Properti resize, yang biasa digunakan pada textarea, memungkinkan pengguna untuk mengubah ukuran elemen. Nilai tradisionalnya adalah horizontal, vertical, dan both. Tapi apa arti "horizontal" dalam mode penulisan vertikal? Itu masih berarti mengubah ukuran sepanjang sumbu horizontal fisik, yang mungkin bukan yang dimaksudkan oleh pengguna atau desainer. Pengguna kemungkinan ingin mengubah ukuran elemen sepanjang sumbu inline-nya untuk membuat baris lebih panjang atau lebih pendek.

Level 2 memperkenalkan nilai logis untuk resize:

• resize: inline; Memungkinkan pengubahan ukuran sepanjang sumbu inline.
• resize: block; Memungkinkan pengubahan ukuran sepanjang sumbu blok.

Menggunakan resize: block; pada textarea dalam bahasa Inggris memungkinkan pengguna untuk membuatnya lebih tinggi. Menggunakannya dalam mode penulisan vertikal memungkinkan pengguna untuk membuatnya lebih lebar (yang merupakan arah blok). Itu просто bekerja.

`caption-side`: Pemosisian Logis untuk Keterangan Tabel

Properti caption-side menentukan penempatan caption tabel. Nilai lama adalah top dan bottom. Sekali lagi, ini adalah fisik. Jika maksud desainer adalah menempatkan keterangan "sebelum" konten tabel, top berfungsi untuk mode penulisan horizontal. Tetapi dalam mode vertical-rl, "awal" dari alur blok ada di sebelah kanan, bukan di atas.

Level 2 memberikan solusi logis:

• caption-side: block-start; Menempatkan keterangan di awal alur blok.
• caption-side: block-end; Menempatkan keterangan di akhir alur blok.

`text-align`: Nilai Logis Fundamental

Meskipun nilai start dan end untuk text-align telah ada selama beberapa waktu, mereka adalah bagian inti dari filosofi properti logis dan layak untuk diperkuat. Menggunakan text-align: left; adalah kesalahan umum yang segera menyebabkan masalah tata letak dalam bahasa RTL. Pendekatan yang benar dan modern adalah selalu menggunakan:

• text-align: start; Meratakan teks ke awal arah inline.
• text-align: end; Meratakan teks ke akhir arah inline.

Mahkota Permata Level 2: `border-radius` Logis

Mungkin penambahan yang paling signifikan dan kuat di Level 2 adalah serangkaian properti untuk mengontrol radius batas secara logis. Sebelumnya, jika Anda ingin sebuah kartu memiliki sudut membulat hanya di bagian "atas", Anda akan menggunakan border-top-left-radius dan border-top-right-radius. Ini benar-benar rusak dalam mode penulisan vertikal, di mana sudut "atas" sekarang menjadi sudut start-start dan end-start.

Level 2 memperkenalkan empat properti longhand baru yang memetakan ke empat sudut elemen secara relatif terhadap alur. Konvensi penamaannya adalah border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Sudut di mana sisi block-start dan inline-start bertemu.
• border-start-end-radius: Sudut di mana sisi block-start dan inline-end bertemu.
• border-end-start-radius: Sudut di mana sisi block-end dan inline-start bertemu.
• border-end-end-radius: Sudut di mana sisi block-end dan inline-end bertemu.

Ini bisa sulit untuk divisualisasikan pada awalnya, jadi mari kita petakan untuk mode penulisan yang berbeda:

Memetakan `border-radius` dalam `writing-mode: horizontal-tb` (misalnya, Bahasa Inggris)

• border-start-start-radius memetakan ke top-left-radius.
• border-start-end-radius memetakan ke top-right-radius.
• border-end-start-radius memetakan ke bottom-left-radius.
• border-end-end-radius memetakan ke bottom-right-radius.

Memetakan `border-radius` dalam `writing-mode: horizontal-tb` dengan `dir="rtl"` (misalnya, Bahasa Arab)

Di sini, arah inline dibalik.

• border-start-start-radius memetakan ke top-right-radius. (Block-start adalah atas, inline-start adalah kanan).
• border-start-end-radius memetakan ke top-left-radius.
• border-end-start-radius memetakan ke bottom-right-radius.
• border-end-end-radius memetakan ke bottom-left-radius.

Memetakan `border-radius` dalam `writing-mode: vertical-rl` (misalnya, Bahasa Jepang)

Di sini, kedua sumbu diputar.

• border-start-start-radius memetakan ke top-right-radius. (Block-start adalah kanan, inline-start adalah atas).
• border-start-end-radius memetakan ke bottom-right-radius.
• border-end-start-radius memetakan ke top-left-radius.
• border-end-end-radius memetakan ke bottom-left-radius.

Dengan menggunakan properti baru ini, Anda dapat mendefinisikan radius sudut yang secara semantik terikat pada alur konten, bukan layar fisik. Sudut "start-start" akan selalu menjadi sudut yang benar, terlepas dari bahasa atau arah teks.

Implementasi Praktis: Membangun Komponen Siap-Global

Teori itu bagus, tetapi mari kita lihat bagaimana ini bekerja dalam praktik. Kita akan membangun komponen kartu profil sederhana, pertama menggunakan properti fisik lama, dan kemudian merefaktornya untuk menggunakan properti logis modern dari Level 1 dan Level 2.

Kartu akan memiliki gambar yang di-float ke satu sisi, judul, beberapa teks, dan batas dekoratif serta sudut yang membulat.

Cara "Lama": Kartu Properti Fisik yang Rapuh

Berikut adalah bagaimana kita mungkin menata kartu ini beberapa tahun yang lalu:

/* --- CSS (Properti Fisik) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

Dalam konteks LTR bahasa Inggris standar, ini terlihat baik-baik saja. Tetapi jika kita menempatkan ini di dalam wadah dengan dir="rtl" atau writing-mode: vertical-rl, tata letaknya rusak. Batas dekoratif berada di sisi yang salah, avatar berada di sisi yang salah, margin tidak benar, dan sudut yang membulat salah tempat.

Cara "Baru": Kartu Properti Logis yang Kuat

Sekarang, mari kita refaktor komponen yang sama menggunakan properti logis. Kita akan memanfaatkan properti dari Level 1 dan penambahan baru dari Level 2.

/* --- CSS (Properti Logis) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` shorthand sudah logis! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Kekuatan Level 2! */

  border-end-start-radius: 8px; /* Kekuatan Level 2! */

}

.logical-card .avatar {

  float: inline-start; /* Kekuatan Level 2! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Pengujian dan Verifikasi

Dengan CSS baru ini, Anda dapat menempatkan komponen ke dalam wadah apa pun, dan itu akan beradaptasi secara otomatis.

• Dalam konteks LTR: Ini akan terlihat identik dengan versi fisik aslinya.
• Dalam konteks RTL (dir="rtl"): Avatar akan mengapung ke kanan, marginnya akan berada di sebelah kiri, batas dekoratif akan berada di sebelah kanan, dan teks akan rata awal (ke kanan). Sudut yang membulat akan berada di kanan atas dan kanan bawah dengan benar. Itu просто bekerja.
• Dalam konteks vertikal (writing-mode: vertical-rl): "Lebar" kartu (sekarang inline-size vertikalnya) akan menjadi 300px. Avatar akan mengapung ke "atas" (inline-start) dengan margin di "bawahnya" (inline-end). Batas dekoratif akan berada di sisi kanan (inline-start), dan sudut yang membulat akan berada di kanan atas dan kiri atas. Komponen telah sepenuhnya mengubah orientasinya dengan benar tanpa media query atau penggantian.

Dukungan Browser dan Fallback

Ini semua terdengar fantastis, tetapi bagaimana dengan dukungan browser? Kabar baiknya adalah dukungan untuk properti logis Level 1 sangat baik di semua browser modern. Anda dapat dan harus menggunakan properti seperti margin-inline-start dan padding-block hari ini.

Dukungan untuk fitur Level 2 yang lebih baru meningkat pesat tetapi belum universal. Nilai logis untuk float, clear, dan resize didukung dengan baik. Properti border-radius logis adalah yang terbaru dan mungkin masih di belakang bendera fitur atau dalam versi browser terbaru. Seperti biasa, Anda harus berkonsultasi dengan sumber daya seperti MDN Web Docs atau CanIUse.com untuk data kompatibilitas terbaru.

Strategi untuk Peningkatan Progresif

Karena CSS dirancang untuk tangguh, kita dapat dengan mudah menyediakan fallback untuk browser lama. Cascade akan memastikan bahwa jika browser tidak memahami properti logis, ia akan mengabaikannya dan menggunakan properti fisik yang didefinisikan sebelumnya.

Berikut cara Anda dapat menulis CSS yang siap fallback:

.card {

  /* Fallback untuk browser lama */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Properti logis modern yang akan menimpa fallback */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Pendekatan ini memastikan pengalaman dasar yang solid untuk semua orang sambil memberikan tata letak yang ditingkatkan dan adaptif bagi pengguna di browser modern. Untuk proyek yang tidak perlu mendukung beberapa mode penulisan, ini mungkin berlebihan. Tetapi untuk aplikasi global, sistem desain, atau tema apa pun, ini adalah strategi yang kuat dan tahan masa depan.

Masa Depan itu Logis: Melampaui Level 2

Transisi dari pola pikir fisik ke logis adalah salah satu pergeseran terpenting dalam CSS modern. Ini menyelaraskan bahasa penataan gaya kita dengan realitas web global yang beragam. Ini menjauhkan kita dari peretasan yang rapuh dan berorientasi layar menuju desain yang tangguh dan berorientasi konten.

Apakah masih ada celah? Beberapa. Nilai logis untuk properti seperti background-position atau gradien masih didiskusikan. Tetapi dengan dirilisnya Level 2, sebagian besar tugas tata letak dan penataan gaya sehari-hari sekarang dapat diselesaikan menggunakan pendekatan yang murni logis.

Seruan untuk bertindak bagi pengembang sudah jelas: mulai default ke properti logis. Jadikan inline-size sebagai pilihan utama Anda alih-alih width. Gunakan margin-inline alih-alih mengatur margin kiri dan kanan secara terpisah. Ini bukan hanya tentang mendukung bahasa yang berbeda; ini tentang menulis CSS yang lebih baik dan lebih tangguh. Komponen yang dibangun dengan properti logis secara inheren lebih dapat digunakan kembali dan adaptif, baik itu digunakan dalam tata letak LTR, RTL, atau vertikal. Ini просто rekayasa yang lebih baik.

Kesimpulan: Rangkul Alurnya

Properti Logis CSS Level 2 bukan hanya kumpulan fitur baru; ini adalah penyelesaian sebuah visi. Ini menyediakan bagian-bagian penting terakhir yang diperlukan untuk membangun tata letak yang menghormati alur alami konten mereka, apa pun alur itu. Dengan merangkul properti seperti float: inline-start dan border-start-start-radius, kita meningkatkan keahlian kita dari sekadar memposisikan kotak di layar menjadi merancang pengalaman web yang benar-benar global, inklusif, dan tahan masa depan.

Lain kali Anda memulai proyek baru atau membangun komponen baru, berhenti sejenak sebelum Anda mengetik margin-left. Tanyakan pada diri sendiri, "Apakah maksud saya kiri, atau maksud saya awal?" Dengan melakukan pergeseran mental kecil itu, Anda akan berkontribusi pada web yang lebih adaptif dan dapat diakses untuk semua orang, di mana saja.