Kaj so CSS logične lastnosti in zakaj so pomembne za mednarodno prilagodljivost?

Question

Accepted Answer

**Logične lastnosti** opisujejo postavitev glede na **smer toka vsebine** (začetek/konec, vrstica/blok) namesto fizičnih smeri (levo/desno/zgoraj/spodaj). To omogoči, da se ena slogovna predloga samodejno prilagodi jezikom, ki se pišejo desno-levo (arabščina, hebrejščina) ali od zgoraj navzdol. ## Fizično proti logičnemu ```css /* ❌ physical — hard-codes "left", breaks in RTL languages */ .card { margin-left: 1rem; padding-right: 2rem; text-align: left; border-left: 2px solid; } /* ✅ logical — follows the writing direction */ .card { margin-inline-start: 1rem; /* "start" = left in LTR, RIGHT in RTL */ padding-inline-end: 2rem; text-align: start; border-inline-start: 2px solid; } ``` ## Dve osi - **vrstica** — smer, v katero se besedilo preteka (vodoravno v angleščini; os "branja"). - **blok** — smer, v katero se vrstice zlagajo (navpično v angleščini; os "odstavka"). ```css 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 */ ``` ## Zakaj je to pomembno za i18n Z fizičnimi lastnostmi je podpora arabščini pomenila pisanje celotnega drugega niza zrcaljenih slogov (`margin-left` → `margin-right` itd.) v ozadju `[dir="rtl"]`. Z logičnimi lastnostmi **ista CSS le deluje** — nastavite `dir="rtl"` na html in `margin-inline-start` se samodejno seli na desno stran: ```html ``` ## Onkraj RTL Logične lastnosti obravnavajo tudi navpične pisave (npr. nekatere vzhodno-azijske tipografije) in naredijo `margin-inline: auto` čist način za centriranje ne glede na smer. ## Zakaj je to važno Za kateri koli proizvod, ki se nahaja v večih jezikih, logične lastnosti odpravijo potrebo po vzdrževanju zrcaljenih RTL slogov — en niz pravil se prilagodi smeri pisanja. Celo za spletne strani samo v LTR smeri so jasnejši duševni model (začetek/konec, vrstica/blok), in so vedno bolj priporočeni privzeti v sodobnem CSS.