Mantıksal özellikler, düzeni içeriğin akış yönü (başlangıç/bitiş, satır içi/blok) açısından tanımlarken, fiziksel yönler (sol/sağ/üst/alt) yerine bunu yaparlar. Bu, tek bir stil sayfasının sağdan sola (Arapça, İbranice) veya yukarıdan aşağıya yazılan dillere otomatik olarak uyum sağlamasını sağlar.
{ : ; : ; : 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 */
Fiziksel özelliklerle, Arapça desteklemek [dir="rtl"] arkasında aynalı stillerin tam bir seti yazılmasını gerektiriyordu (margin-left → margin-right, vb.). Mantıksal özelliklerle, aynı CSS çalışır — dir="rtl" öğesini html'ye ayarlayın ve margin-inline-start otomatik olarak sağ tarafa döner:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Mantıksal özellikler ayrıca dikey yazı modlarını (örn. bazı Doğu Asya tipografisini) işler ve margin-inline: auto öğesini yönden bağımsız olarak ortalamak için temiz bir yol haline getirir.
Birden çok dilde sunulan herhangi bir ürün için, mantıksal özellikler aynalı RTL stil sayfalarını korumanın gereksinimini ortadan kaldırır — tek bir kural seti yazma yönüne uyum sağlar.
Sadece LTR siteler için bile, daha temiz bir zihinsel model (başlangıç/bitiş, satır içi/blok) ve modern CSS'de giderek daha çok önerilen bir varsayılan değerdir.