Proprietățile logice descriu layoutul în termeni ai direcției fluxului conținutului (start/end, inline/block) în loc de direcții fizice (left/right/top/bottom). Aceasta face ca o singură foaie de stiluri să se adapteze automat la limbile scrise de la dreapta la stânga (arabă, ebraică) sau de sus în jos.
{ : ; : ; : 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 */
Cu proprietăți fizice, suportul limbii arabe înseamnă scrierea unui întreg al doilea set de stiluri reflectate (margin-left → margin-right, etc.) în spatele [dir="rtl"]. Cu proprietăți logice, același CSS funcționează pur și simplu — setați dir="rtl" pe html și margin-inline-start se răstoarnă automat la dreapta:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Proprietățile logice gestionează, de asemenea, modurile de scriere verticale (de exemplu, unele tipografii din Asia de Est) și fac din margin-inline: auto o modalitate curată de centrare indiferent de direcție.
Pentru orice produs care se lansează în mai multe limbi, proprietățile logice elimină necesitatea de a menține foi de stiluri RTL reflectate — un singur set de reguli se adaptează la direcția de scriere.
Chiar și pentru site-urile doar LTR, acestea sunt un model mental mai curat (start/end, inline/block), și sunt din ce în ce mai mult recomandate ca standard implicit în CSS modern.