În CSS folosim frecvent proprietăți precum margin-left, padding-right sau border-top. Acestea sunt legate de direcțiile fizice ale ecranului. Când un proiect trebuie să funcționeze și pentru limbi scrise de la dreapta la stânga sau pentru moduri de scriere diferite, proprietățile logice oferă o abordare mai flexibilă.
Ce sunt proprietățile logice?
Proprietățile logice descriu poziția în raport cu fluxul de scriere, nu cu marginile fixe ale ecranului. De exemplu, margin-inline-start înseamnă spațiu la începutul direcției textului. Într-un document LTR poate corespunde părții stângi, iar într-un document RTL poate corespunde părții drepte.
.card {
margin-inline: auto;
padding-block: 1.5rem;
padding-inline: 1rem;
border-inline-start: 4px solid #3987e8;
}
inline se referă la axa textului, iar block la axa perpendiculară. Astfel, padding-block controlează spațierea de început și sfârșit pe axa blocului, fără să fie nevoie să alegi explicit top și bottom.
De ce merită să le folosești?
- Reduc regulile CSS duplicate pentru versiuni LTR și RTL.
- Fac componentele reutilizabile în proiecte multilingve.
- Clarifică intenția codului: începutul fluxului este mai relevant decât stânga sau dreapta.
- Ajută la menținerea unei structuri responsive și ușor de întreținut.
Cum faci trecerea treptat?
Începe cu componente noi și înlocuiește proprietățile fizice acolo unde sensul lor este legat de direcția conținutului. Nu schimba automat toate valorile: unele elemente decorative pot avea nevoie de poziționare fizică. Testează pagina cu atributul dir="rtl" și verifică alinierea textului, pictogramelor și elementelor de navigare.
Documentația MDN despre logical properties prezintă corespondențele dintre proprietățile fizice și cele logice.
Un sistem vizual bine gândit trebuie să fie consecvent și în mediul fizic. Pentru decorarea unui spațiu comercial poți alege stickere decorative pentru vitrine și pereți, în acord cu identitatea brandului.
Proprietățile logice sunt o schimbare mică în sintaxă, dar pot face codul mult mai adaptabil atunci când același website deservește utilizatori și limbi diferite.
