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 celah kecil di antara keduanya,
yang disediakan oleh margin-right pada ikon.
Namun demikian, ada masalah,
karena ini hanya akan berfungsi jika arah teks dari kiri ke kanan.
Jika arah teks berubah menjadi kanan-ke-kiri—yang seperti bahasa Arab membaca—ikon akan berada di depan teks.
Bagaimana cara Anda memperhitungkan hal ini di CSS? Properti logis memungkinkan Anda menyelesaikan situasi ini. Di antara banyak manfaat lainnya, mereka menyediakan dukungan gratis dan otomatis untuk internasionalisasi. Membantu Anda membangun front end yang lebih tangguh dan inklusif.
Terminologi
Properti fisik atas, kanan, bawah, dan kiri merujuk pada dimensi fisik area pandang. Anda dapat menganggapnya seperti mawar kompas di peta. Di sisi lain, properti logika merujuk ke tepi kotak karena berhubungan dengan aliran konten. Oleh karena itu, jenis huruf tersebut dapat berubah jika arah teks atau mode penulisan berubah. Ini adalah perubahan besar dari gaya terarah, dan memberi lebih banyak fleksibilitas saat menata gaya antarmuka.
Alur blok
Alur blok adalah arah penempatan blok konten. Misalnya, jika ada dua paragraf, alur blok adalah tempat paragraf kedua akan masuk. Dalam dokumen berbahasa Inggris, alur blok ditampilkan dari atas ke bawah. Pikirkan ini dalam konteks paragraf teks yang saling mengikuti, dari atas ke bawah.
Alur inline
Alur inline adalah bagaimana teks mengalir dalam sebuah kalimat.
Dalam dokumen berbahasa Inggris, alur inline dari kiri ke kanan.
Jika Anda mengubah bahasa dokumen halaman web ke bahasa Arab (<html lang="ar">),
maka alur {i>inline<i} akan
berada dari kanan ke kiri.
Teks mengalir ke arah yang ditentukan oleh mode penulisan dokumen.
Anda dapat mengubah arah penataan teks dengan properti writing-mode.
Ini dapat diterapkan ke seluruh dokumen, atau ke elemen individual.
Relatif aliran
Secara historis di CSS,
kita hanya dapat menerapkan properti seperti margin
sesuai dengan arah sisi mereka.
Misalnya, margin-top diterapkan ke bagian atas fisik elemen.
Dengan properti logis, margin-top menjadi margin-block-start.
Ini berarti bahwa terlepas dari bahasa dan arah teks,
alur pemblokiran memiliki aturan margin yang sesuai.
Pengaturan ukuran
Untuk mencegah elemen melebihi lebar atau tinggi tertentu, tulis aturan seperti ini:
.my-element {
max-width: 150px;
max-height: 100px;
}
Padanan yang relatif terhadap alur 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 sifat logis, aturan lebar dan tinggi maksimal akan terlihat seperti ini:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Awal dan akhir
Alih-alih menggunakan arah seperti atas, kanan, bawah, dan kiri, gunakan start dan end. Cara ini akan memberi 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 tujuan Anda bukan
untuk menyelaraskan dengan hak fisik,
melainkan ke awal
arah pembacaan,
maka hal ini tidak membantu.
Dengan nilai logis, ada nilai start dan end yang lebih bermanfaat yang memetakan ke arah teks.
Aturan perataan teks sekarang terlihat seperti ini:
p {
text-align: end;
}
Spasi dan posisi
Properti logis untuk margin, padding, dan inset
membuat elemen pemosisian, dan menentukan bagaimana elemen-elemen ini berinteraksi satu sama lain di seluruh mode penulisan menjadi lebih mudah dan lebih efisien.
Properti terkait margin dan {i>padding<i} masih
memetakan data langsung ke arah,
tetapi perbedaan utamanya adalah ketika
mode penulisan berubah, mode penulisan juga berubah.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Tindakan ini akan menambahkan beberapa ruang vertikal di dalam dengan padding dan mendorongnya dari kiri dengan margin.
Properti top juga menggesernya ke bawah.
Dengan padanan properti logis, 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 spasi di dalam inline dengan padding dan mendorongnya keluar dari mulai inline dengan margin.
Properti inset-block memindahkannya ke dalam dari blok-start.
Properti inset-block bukanlah satu-satunya opsi singkat dengan properti logis.
Aturan ini bisa dipadatkan lebih lanjut,
menggunakan versi singkat
dari 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 bagian 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 bisa menggunakan properti logis seperti ini:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
end-end di border-end-end-radius adalah ujung blok dan akhir inline.
Unit
Properti logis membawa dua unit baru: vi dan vb.
Unit vi adalah 1% ukuran area tampilan dalam arah inline.
Setara properti non-logis adalah vw.
Unit vb adalah 1% dari area tampilan dalam arah blok.
Setara properti non-logis adalah vh.
Unit ini akan selalu memetakan ke arah pembacaan.
Misalnya, jika Anda ingin elemen menggunakan 80% dari ruang inline yang tersedia dari area pandang,
menggunakan unit vi akan otomatis mengubah ukuran tersebut menjadi dari atas ke bawah jika mode penulisannya vertikal.
Menggunakan sifat logis secara pragmatis
Properti logis dan mode penulisan tidak hanya untuk internasionalisasi. Anda dapat menggunakannya untuk menghasilkan antarmuka pengguna yang lebih fleksibel.
Jika Anda memiliki diagram yang memiliki label pada sumbu X dan sumbu Y, Anda mungkin ingin teks di label Y dibaca secara vertikal.
Karena label sumbu Y dalam demo memiliki writing-mode dari vertical-rl,
Anda dapat menggunakan nilai margin yang sama pada kedua label.
Nilai margin-block-start berlaku untuk kedua label
karena awal blok ada di sebelah kanan
sumbu Y dan di bagian atas untuk sumbu X.
Sisi blok-start memiliki batas merah sehingga Anda dapat melihatnya.
Menyelesaikan masalah ikon
Setelah kita 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 spasi antara ikon dan teks mendukung semua arah pembacaan,
properti margin-inline-end harus digunakan sebagai gantinya.
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 pembacaan, ikon akan memosisikan dirinya sendiri dan mengatur spasi dengan tepat.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang sifat-sifat logika
Saat Anda menulis dengan tangan, pergelangan tangan Anda bergerak di sepanjang sumbu logis yang mana?
inlineblockCentang semua yang dapat memanfaatkan 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?