Podcast CSS - 012: Properti Logis
Pola antarmuka pengguna yang sangat umum adalah label teks dengan ikon inline pendukung.
Ikon berada di sebelah kiri teks dengan sedikit jarak di antara keduanya,
yang disediakan oleh margin-right pada ikon.
Ada masalah, karena ini hanya akan berfungsi jika arah teks dari kiri ke kanan.
Jika arah teks diubah menjadi kanan-ke-kiri—seperti yang digunakan dalam bahasa Arab—ikon akan diletakkan berdampingan dengan teks.
Bagaimana Anda memperhitungkan hal ini di CSS? Properti logika memungkinkan Anda mengatasi situasi ini. Di antara berbagai manfaat lainnya, jenis dukungan ini menyediakan dukungan gratis dan otomatis untuk internasionalisasi. Keduanya membantu Anda membangun front-end yang lebih tangguh dan inklusif.
Terminologi
Properti fisik atas, kanan, bawah, dan kiri mengacu pada dimensi fisik area pandang. Anda dapat menganggap ini seperti mawar kompas di peta. Di sisi lain, properti logis mengacu pada tepi kotak karena berkaitan dengan aliran konten. Oleh karena itu, keduanya dapat berubah jika arah teks atau mode penulisan berubah. Ini merupakan pergeseran besar dari gaya arah, dan memberi kita lebih banyak fleksibilitas saat menata gaya antarmuka.
Blokir alur
Alur blok adalah arah penempatan blok konten. Misalnya, jika ada dua paragraf, alur blok adalah tempat paragraf kedua akan ditempatkan. Dalam dokumen berbahasa Inggris, alur blok adalah dari atas ke bawah. Pikirkan hal ini dalam konteks paragraf teks yang saling mengikuti, dari atas ke bawah.
{i>Inline flow<i}
Alur inline adalah alur teks dalam kalimat.
Dalam dokumen berbahasa Inggris, alur inline terletak dari kiri ke kanan.
Jika Anda mengubah bahasa dokumen halaman web ke bahasa Arab (<html lang="ar">),
alur inline akan berada di kanan ke kiri.
Teks mengalir ke arah yang ditentukan oleh mode penulisan dokumen.
Anda dapat mengubah arah tata letak teks dengan properti writing-mode.
Ini dapat diterapkan ke seluruh dokumen, atau ke elemen individual.
Relatif terhadap alur
Secara historis di CSS,
kita hanya dapat menerapkan properti seperti margin sesuai dengan arah sisinya.
Misalnya, margin-top diterapkan ke bagian atas fisik elemen.
Dengan properti logis, margin-top menjadi margin-block-start.
Artinya, terlepas dari bahasa dan arah teks,
alur blok memiliki aturan margin yang sesuai.
Ukuran
Untuk mencegah elemen melebihi lebar atau tinggi tertentu, tulis aturan seperti ini:
.my-element {
max-width: 150px;
max-height: 100px;
}
Setara yang relatif terhadap flow adalah max-inline-size dan max-block-size.
Anda juga dapat menggunakan min-block-size dan min-inline-size, bukan min-height dan min-width.
Dengan properti logis, aturan lebar dan tinggi maksimal akan terlihat seperti ini:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Awal dan akhir
Gunakan rute awal dan akhir, bukan menggunakan rute seperti atas, kanan, bawah, dan kiri. Cara ini akan memberikan Anda block-start, inline-end, block-end, dan inline-start. Ini memungkinkan Anda menerapkan properti CSS yang merespons perubahan mode penulisan.
Misalnya, untuk meratakan teks ke kanan, Anda dapat menggunakan CSS ini:
p {
text-align: right;
}
Jika tujuannya bukan untuk menyelaraskan dengan kanan fisik,
tetapi lebih ke awal arah pembacaan,
hal ini tidak membantu.
Dengan nilai logis, ada nilai start dan end yang lebih bermanfaat yang dipetakan ke arah teks.
Aturan perataan teks sekarang terlihat seperti ini:
p {
text-align: end;
}
Spasi dan posisi
Properti logika untuk margin, padding, dan inset
membuat elemen pemosisian, dan menentukan cara elemen tersebut berinteraksi satu sama lain di seluruh mode penulisan lebih mudah dan lebih efisien.
Properti terkait margin dan padding masih merupakan pemetaan langsung ke arah,
tetapi perbedaan utamanya adalah saat mode penulisan berubah, properti tersebut akan berubah.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Tindakan ini akan menambahkan beberapa ruang dalam vertikal dengan padding dan mendorongnya keluar dari kiri dengan margin.
Properti top juga menggesernya ke bawah.
Dengan padanan properti logis, maka akan terlihat seperti ini:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
Tindakan ini akan menambahkan beberapa inline dalam ruang dengan padding dan mendorongnya keluar dari inline-start dengan margin.
Properti inset-block memindahkannya ke dalam dari awal blok.
Properti inset-block bukan satu-satunya opsi singkatan dengan properti logis.
Aturan ini dapat lebih ringkas,
menggunakan versi singkat properti margin dan padding.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Batas
Menambahkan border dan border-radius juga dapat dilakukan dengan properti logis.
Untuk menambahkan batas di bawah dan kanan, dengan radius sebelah kanan, Anda dapat menulis aturan seperti ini:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
Atau, Anda dapat menggunakan properti logika seperti ini:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
end-end dalam border-end-end-radius adalah akhir blok dan akhir inline.
Unit
Properti logika membawa dua unit baru: vi dan vb.
Unit vi adalah 1% dari ukuran area pandang dalam arah inline.
Properti non-logis yang setara adalah vw.
Unit vb adalah 1% dari area pandang dalam arah blok.
Properti non-logis yang setara adalah vh.
Unit ini akan selalu dipetakan ke arah pembacaan.
Misalnya, jika Anda ingin elemen menggunakan 80% ruang inline yang tersedia di area pandang,
menggunakan unit vi akan otomatis mengalihkan ukuran tersebut dari atas ke bawah jika mode penulisan vertikal.
Menggunakan properti logis secara pragmatis
Properti logika dan mode penulisan bukan hanya untuk internasionalisasi. Anda dapat menggunakannya untuk membuat antarmuka pengguna yang lebih fleksibel.
Jika memiliki diagram dengan label pada sumbu X dan sumbu Y, Anda mungkin ingin teks pada label Y dibaca secara vertikal.
Karena label sumbu Y dalam demo memiliki writing-mode vertical-rl,
Anda dapat menggunakan nilai margin yang sama di kedua label.
Nilai margin-block-start berlaku untuk kedua label
karena awal blok berada di kanan untuk sumbu Y dan di bagian atas untuk sumbu X.
Bagian awal blok memiliki batas merah sehingga Anda dapat melihatnya.
Menyelesaikan masalah ikon
Setelah membahas properti logika, pengetahuan ini dapat diterapkan pada masalah desain yang kita mulai.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
Margin telah diterapkan di sebelah kanan elemen ikon.
Agar jarak antara ikon dan teks mendukung semua arah membaca,
properti margin-inline-end harus digunakan.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
Sekarang, terlepas dari arah membaca, ikon akan memposisikan dirinya sendiri dan memberi ruang dengan tepat.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang sifat-sifat logika
Saat menulis dengan tangan, pergelangan tangan Anda bergerak di sepanjang sumbu logis yang mana?
inlineblockMemeriksa semua yang dapat memperoleh manfaat dari properti logis
flex-start, block-end, dan inline-startblock-start dan inline.inline-size dan max-block-size.border-end-end-radius.Sisi logis kata mana yang digarisbawahi?