Properti logis mendeskripsikan tata letak dalam hal arah aliran konten (awal/akhir, inline/blok) alih-alih arah fisik (kiri/kanan/atas/bawah). Ini memungkinkan satu stylesheet beradaptasi secara otomatis dengan bahasa yang ditulis kanan-ke-kiri (Arab, Ibrani) atau atas-ke-bawah.
{ : ; : ; : left; : solid; }
{
: ;
: ;
: start;
: solid;
}
margin-inline: 1rem; /* left + right in LTR (both inline sides) */
margin-block: 2rem; /* top + bottom */
margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */
padding-block-end: 1rem; /* bottom in horizontal writing */
inset-inline-start: 0; /* logical version of left/right for positioning */
Dengan properti fisik, mendukung Arab berarti menulis seluruh set gaya cermin kedua (margin-left → margin-right, dll.) di balik [dir="rtl"]. Dengan properti logis, CSS yang sama saja berfungsi — atur dir="rtl" pada html dan margin-inline-start secara otomatis berubah ke sisi kanan:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Properti logis juga menangani mode penulisan vertikal (misalnya tipografi beberapa Asia Timur) dan membuat margin-inline: auto cara yang rapi untuk memusatkan terlepas dari arah.
Untuk produk apa pun yang dikirimkan dalam berbagai bahasa, properti logis menghilangkan kebutuhan untuk mempertahankan stylesheet RTL cermin — satu set aturan beradaptasi dengan arah penulisan.
Bahkan untuk situs LTR saja, mereka adalah model mental yang lebih bersih (awal/akhir, inline/blok), dan semakin menjadi standar yang direkomendasikan dalam CSS modern.