Mitä ovat CSS:n loogiset ominaisuudet ja miksi ne ovat tärkeitä kansainvälistämiselle?

Question

Accepted Answer

**Loogiset ominaisuudet** kuvaavat asettelua **sisällön virtaussuunnan** (alku/loppu, inline/lohko) kannalta fyysisten suuntien (vasen/oikea/ylä/ala) sijaan. Tämä mahdollistaa yhden tyylilehden mukauttamisen automaattisesti oikealta vasemmalle kirjoitettuihin kieliin (arabia, heprea) tai ylhäältä alas kirjoitettuihin kieliin. ## Fyysinen vs looginen ```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; } ``` ## Kaksi akselia - **inline** — suunta, johon teksti virtaa (vaakasuora englannissa; "lukemisen" akseli). - **block** — suunta, johon rivit pinotaan (pystysuora englannissa; "kappaleen" akseli). ```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 */ ``` ## Miksi tämä on tärkeää i18n:lle Fyysisissä ominaisuuksissa arabian kielituki tarkoittaa koko toisen joukon peilattuja tyylejä (`margin-left` → `margin-right` jne.) kirjoittamista `[dir="rtl"]`-tagin taakse. Loogisissa ominaisuuksissa **sama CSS vain toimii** — aseta `dir="rtl"` html-elementille ja `margin-inline-start` kääntyy automaattisesti oikealle puolelle: ```html ``` ## RTL:n lisäksi Loogiset ominaisuudet käsittelevät myös pystysuuntaisia kirjoitustiloja (esim. joitain Itä-Aasian typografiaa) ja tekevät `margin-inline: auto` -omasta siistin tavan keskittää suunnasta riippumatta. ## Miksi se on tärkeää Mille tahansa tuotteelle, joka julkaistaan useilla kielillä, loogiset ominaisuudet poistavat peilattavien RTL-tyylilehtien ylläpidon tarpeen — yksi säääntöjoukko sopeutuu kirjoitussuuntaan. Jopa vain LTR-sivustoille ne ovat puhtaampi mentaalinen malli (alku/loppu, inline/lohko) ja niitä suositellaan yhä enemmän modernin CSS:n oletusarvona.