Logické vlastnosti CSS úrovne 2: Tvorba skutočne globálneho webu s rozšírenou podporou režimov písania

Desaťročia vytvárali weboví vývojári layouty pomocou slovníka zakoreneného vo fyzickom svete: top, bottom, left a right. Nastavovali sme margin-left, padding-top a border-right. Tento mentálny model nám dobre slúžil, keď bol web prevažne médiom orientovaným zľava doprava a zhora nadol. Web je však globálny. Je to platforma pre všetky jazyky a kultúry, z ktorých mnohé sa neriadia týmto jednoduchým smerovým tokom.

Jazyky ako arabčina a hebrejčina sa píšu sprava doľava. Tradičná japončina a čínština sa môžu písať vertikálne, zhora nadol a sprava doľava. Vnucovanie fyzického, zľava doprava orientovaného CSS modelu týmto systémom písania vedie k rozbitým layoutom, frustrujúcemu používateľskému zážitku a hore kódu na prepisovanie pravidiel. Práve tu prichádzajú na scénu logické vlastnosti a hodnoty CSS, ktoré predstavujú zásadnú zmenu paradigmy od fyzických smerov k logickým smerom relatívnym voči toku obsahu. Zatiaľ čo úroveň 1 položila základy, logické vlastnosti CSS úrovne 2 dopĺňajú celkový obraz a poskytujú nástroje, ktoré potrebujeme na vytváranie skutočne univerzálnych používateľských rozhraní, ktoré si uvedomujú režim písania.

Táto komplexná príručka vás prevedie hĺbkovou analýzou vylepšení, ktoré prináša úroveň 2. Začneme zopakovaním základných konceptov, potom preskúmame nové vlastnosti a hodnoty, ktoré vypĺňajú medzery, a nakoniec to všetko uvedieme do praxe vytvorením komponentu, ktorý sa bezproblémovo prispôsobí akémukoľvek režimu písania. Pripravte sa na to, že navždy zmeníte spôsob, akým premýšľate o CSS layoute.

Rýchle zopakovanie: Základné koncepty logických vlastností (úroveň 1)

Predtým, ako oceníme novinky v úrovni 2, musíme mať pevné základy položené úrovňou 1. Celý systém je postavený na dvoch kľúčových konceptoch: režim písania a z neho vyplývajúce bloková a inline os.

Štyri režimy písania

Vlastnosť CSS writing-mode určuje smer, ktorým sa text rozkladá. Hoci často berieme predvolenú hodnotu za samozrejmosť, existuje niekoľko hodnôt, ktoré zásadne menia tok obsahu na stránke:

• horizontal-tb: Toto je predvolená hodnota pre väčšinu západných jazykov. Text plynie horizontálne (inline os) zľava doprava (alebo sprava doľava v závislosti od smeru) a riadky sa skladajú zhora nadol (bloková os).
• vertical-rl: Používa sa pre tradičnú východoázijskú typografiu (napr. japončina, čínština). Text plynie vertikálne zhora nadol (inline os) a riadky sa skladajú sprava doľava (bloková os).
• vertical-lr: Podobné ako vyššie, ale riadky sa skladajú zľava doprava (bloková os). Menej bežné, ale používa sa v niektorých kontextoch, ako je mongolské písmo.
• sidelong-rl / sidelong-lr: Tieto sú pre špecifické prípady použitia, kde chcete znaky rozložiť na bok. V bežnom webovom obsahu sú menej časté.

Kľúčový koncept: Bloková vs. inline os

Toto je najdôležitejší koncept, ktorý treba pochopiť. V logickom svete prestávame myslieť na "vertikálne" a "horizontálne" a začíname myslieť v termínoch blokovej a inline osi. Ich orientácia závisí výlučne od writing-mode.

• Inline os je smer, ktorým text plynie v rámci jedného riadku.
• Bloková os je smer, v ktorom sa skladajú nové riadky.

Pozrime sa, ako to funguje v praxi:

• V štandardnej slovenčine (writing-mode: horizontal-tb): Inline os prebieha horizontálne a bloková os vertikálne.
• V tradičnej japončine (writing-mode: vertical-rl): Inline os prebieha vertikálne a bloková os horizontálne.

Keďže sa tieto osi môžu meniť, vlastnosti ako width a height sa stávajú nejednoznačnými. Je width veľkosť pozdĺž horizontálnej osi alebo inline osi? Logické vlastnosti túto nejednoznačnosť riešia. Teraz máme start a end pre každú os:

• block-start: "Hore" v slovenčine, ale "vpravo" vo vertikálnej japončine.
• block-end: "Dole" v slovenčine, ale "vľavo" vo vertikálnej japončine.
• inline-start: "Vľavo" v slovenčine, ale "hore" vo vertikálnej japončine.
• inline-end: "Vpravo" v slovenčine, ale "dole" vo vertikálnej japončine.

Mapovanie fyzických na logické vlastnosti (úroveň 1)

Úroveň 1 zaviedla komplexnú sadu mapovaní z fyzických na logické vlastnosti. Tu je niekoľko kľúčových príkladov:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (pre pozicovanie) → inset-inline-start / inset-inline-end
• top / bottom (pre pozicovanie) → inset-block-start / inset-block-end

Úroveň 1 nám tiež dala užitočné skratky ako margin-inline (pre start a end) a padding-block (pre start a end).

Vitajte v úrovni 2: Čo je nové a prečo je to dôležité

Hoci úroveň 1 bola obrovským krokom vpred, zanechala niekoľko viditeľných medzier. Určité základné vlastnosti CSS ako float, clear a resize nemali logické ekvivalenty. Navyše, vlastnosti ako border-radius sa nedali ovládať logicky, čo nútilo vývojárov vracať sa k fyzickým vlastnostiam pre jemnejšie štýlovanie. To znamenalo, že ste mohli vytvoriť layout na 90 % pomocou logických vlastností, ale stále ste potrebovali fyzické prepísania pre rôzne režimy písania, čo čiastočne marilo účel.

Logické vlastnosti CSS úrovne 2 tieto nedostatky priamo riešia. Nejde o zavedenie radikálne nového systému, ale o dokončenie toho, ktorý začala úroveň 1. Dosahuje to dvoma hlavnými spôsobmi:

1. Zavedením nových logických vlastností a hodnôt pre staršie funkcie CSS, ktoré boli vo svojej podstate fyzické (ako float).
2. Pridaním logických mapovaní vlastností pre komplexné skratky, ktoré boli predtým ignorované (ako border-radius).

S úrovňou 2 je vízia plne flow-relatívneho systému štýlovania takmer úplná, čo nám umožňuje vytvárať zložité, krásne a robustné komponenty, ktoré fungujú všade, pre každého, bez hackov alebo prepisovaní.

Hĺbkový pohľad: Nové logické hodnoty a vlastnosti v úrovni 2

Preskúmajme najvýznamnejšie doplnky, ktoré úroveň 2 prináša do našej vývojárskej sady nástrojov. Sú to nástroje, ktoré vypĺňajú medzery a umožňujú skutočne univerzálny dizajn komponentov.

Float a Clear: Logická revolúcia

Vlastnosť float bola dlhé roky základným kameňom CSS layoutu, ale jej hodnoty, left a right, sú definíciou fyzického smeru. Ak obtáčate obrázok na ľavú stranu odseku v slovenčine, vyzerá to správne. Ale ak zmeníte smer dokumentu na sprava doľava (RTL) pre arabčinu, obrázok je teraz na „nesprávnej“ strane textového bloku. Mal by byť vpravo, čo je začiatok riadku.

Úroveň 2 zavádza dve nové, logické kľúčové slová pre vlastnosť float:

• float: inline-start; Obtáča prvok na začiatok inline smeru. V LTR jazykoch je to vľavo. V RTL jazykoch je to vpravo. V režime písania vertical-rl je to hore.
• float: inline-end; Obtáča prvok na koniec inline smeru. V LTR je to vpravo. V RTL je to vľavo. Vo vertical-rl je to dole.

Podobne vlastnosť clear, ktorá sa používa na kontrolu obtáčania obsahu okolo plávajúcich prvkov, dostáva svoje logické náprotivky:

• clear: inline-start; Zruší obtáčanie na strane inline-start.
• clear: inline-end; Zruší obtáčanie na strane inline-end.

Toto je prelomové. Teraz môžete vytvárať klasické layouty s obrázkom a obtékajúcim textom, ktoré sa automaticky prispôsobia akémukoľvek smeru jazyka bez jediného riadku CSS navyše.

Rozšírená kontrola s logickým Resize

Vlastnosť resize, bežne používaná na textarea, umožňuje používateľom meniť veľkosť prvku. Jej tradičné hodnoty sú horizontal, vertical a both. Ale čo znamená „horizontálne“ vo vertikálnom režime písania? Stále to znamená zmenu veľkosti pozdĺž fyzickej horizontálnej osi, čo nemusí byť to, čo používateľ alebo dizajnér zamýšľa. Používateľ pravdepodobne chce meniť veľkosť prvku pozdĺž jeho inline osi, aby boli riadky dlhšie alebo kratšie.

Úroveň 2 zavádza logické hodnoty pre resize:

• resize: inline; Umožňuje zmenu veľkosti pozdĺž inline osi.
• resize: block; Umožňuje zmenu veľkosti pozdĺž blokovej osi.

Použitie resize: block; na textarea v slovenčine umožňuje používateľovi zväčšiť jej výšku. Použitie vo vertikálnom režime písania umožňuje používateľovi zväčšiť jej šírku (čo je blokový smer). Jednoducho to funguje.

`caption-side`: Logické pozicovanie pre titulky tabuliek

Vlastnosť caption-side určuje umiestnenie caption tabuľky. Staré hodnoty boli top a bottom. Opäť sú to fyzické hodnoty. Ak je zámerom dizajnéra umiestniť titulok „pred“ obsah tabuľky, top funguje pre horizontálne režimy písania. Ale v režime vertical-rl je „začiatok“ toku bloku vpravo, nie hore.

Úroveň 2 poskytuje logické riešenie:

• caption-side: block-start; Umiestni titulok na začiatok toku bloku.
• caption-side: block-end; Umiestni titulok na koniec toku bloku.

`text-align`: Základná logická hodnota

Hoci hodnoty start a end pre text-align existujú už nejaký čas, sú základnou súčasťou filozofie logických vlastností a stojí za to si ich pripomenúť. Použitie text-align: left; je bežnou chybou, ktorá okamžite spôsobuje problémy s layoutom v RTL jazykoch. Správny, moderný prístup je vždy používať:

• text-align: start; Zarovná text na začiatok inline smeru.
• text-align: end; Zarovná text na koniec inline smeru.

Korunný klenot úrovne 2: Logický `border-radius`

Asi najvýznamnejším a najmocnejším prídavkom v úrovni 2 je súbor vlastností na logické ovládanie zaoblenia rohov. Predtým, ak ste chceli, aby karta mala zaoblené rohy len „hore“, použili by ste border-top-left-radius a border-top-right-radius. Toto úplne zlyhá vo vertikálnom režime písania, kde „horné“ rohy sú teraz rohmi start-start a end-start.

Úroveň 2 zavádza štyri nové podrobné vlastnosti, ktoré sa mapujú na štyri rohy prvku relatívne voči toku. Konvencia pomenovania je border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Roh, kde sa stretávajú strany block-start a inline-start.
• border-start-end-radius: Roh, kde sa stretávajú strany block-start a inline-end.
• border-end-start-radius: Roh, kde sa stretávajú strany block-end a inline-start.
• border-end-end-radius: Roh, kde sa stretávajú strany block-end a inline-end.

Na prvý pohľad môže byť ťažké si to predstaviť, tak si to zmapujme pre rôzne režimy písania:

Mapovanie `border-radius` v `writing-mode: horizontal-tb` (napr. slovenčina)

• border-start-start-radius sa mapuje na top-left-radius.
• border-start-end-radius sa mapuje na top-right-radius.
• border-end-start-radius sa mapuje na bottom-left-radius.
• border-end-end-radius sa mapuje na bottom-right-radius.

Mapovanie `border-radius` v `writing-mode: horizontal-tb` s `dir="rtl"` (napr. arabčina)

Tu je inline smer prevrátený.

• border-start-start-radius sa mapuje na top-right-radius. (Block-start je hore, inline-start je vpravo).
• border-start-end-radius sa mapuje na top-left-radius.
• border-end-start-radius sa mapuje na bottom-right-radius.
• border-end-end-radius sa mapuje na bottom-left-radius.

Mapovanie `border-radius` v `writing-mode: vertical-rl` (napr. japončina)

Tu sú obe osi otočené.

• border-start-start-radius sa mapuje na top-right-radius. (Block-start je vpravo, inline-start je hore).
• border-start-end-radius sa mapuje na bottom-right-radius.
• border-end-start-radius sa mapuje na top-left-radius.
• border-end-end-radius sa mapuje na bottom-left-radius.

Použitím týchto nových vlastností môžete definovať zaoblenia rohov, ktoré sú sémanticky viazané na tok obsahu, nie na fyzickú obrazovku. Roh „start-start“ bude vždy správnym rohom, bez ohľadu na jazyk alebo smer textu.

Praktická implementácia: Vytvorenie globálne pripraveného komponentu

Teória je skvelá, ale pozrime sa, ako to funguje v praxi. Vytvoríme jednoduchý komponent profilovej karty, najprv pomocou starých fyzických vlastností a potom ho refaktorujeme na použitie moderných logických vlastností z úrovne 1 aj 2.

Karta bude mať obrázok plávajúci na jednej strane, nadpis, nejaký text a dekoratívny okraj a zaoblené rohy.

„Starý“ spôsob: Krehká karta s fyzickými vlastnosťami

Takto by sme mohli túto kartu štýlovať pred niekoľkými rokmi:

/* --- CSS (Fyzické vlastnosti) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

V štandardnom slovenskom LTR kontexte to vyzerá dobre. Ale ak to umiestnime do kontajnera s dir="rtl" alebo writing-mode: vertical-rl, layout sa rozbije. Dekoratívny okraj je na zlej strane, avatar je na zlej strane, okraj je nesprávny a zaoblené rohy sú zle umiestnené.

„Nový“ spôsob: Robustná karta s logickými vlastnosťami

Teraz refaktorujme ten istý komponent s použitím logických vlastností. Využijeme vlastnosti z úrovne 1 aj nové prídavky z úrovne 2.

/* --- CSS (Logické vlastnosti) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* Skratka `padding` je už logická! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Sila úrovne 2! */

  border-end-start-radius: 8px; /* Sila úrovne 2! */

}

.logical-card .avatar {

  float: inline-start; /* Sila úrovne 2! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Testovanie a overenie

S týmto novým CSS môžete komponent vložiť do akéhokoľvek kontajnera a automaticky sa prispôsobí.

• V LTR kontexte: Bude vyzerať identicky ako pôvodná fyzická verzia.
• V RTL kontexte (dir="rtl"): Avatar bude plávať vpravo, jeho okraj bude vľavo, dekoratívny okraj bude vpravo a text bude zarovnaný na začiatok (doprava). Zaoblené rohy budú správne vpravo hore a vpravo dole. Jednoducho to funguje.
• Vo vertikálnom kontexte (writing-mode: vertical-rl): „Šírka“ karty (teraz jej vertikálna inline-size) bude 300px. Avatar bude plávať „hore“ (inline-start) s okrajom na jeho „spodnej“ strane (inline-end). Dekoratívny okraj bude na pravej strane (inline-start) a zaoblené rohy budú vpravo hore a vľavo hore. Komponent sa úplne preorientoval správne bez akýchkoľvek media queries alebo prepisovaní.

Podpora v prehliadačoch a záložné riešenia (Fallbacks)

Toto všetko znie fantasticky, ale čo podpora v prehliadačoch? Dobrou správou je, že podpora pre logické vlastnosti úrovne 1 je vynikajúca vo všetkých moderných prehliadačoch. Vlastnosti ako margin-inline-start a padding-block môžete a mali by ste používať už dnes.

Podpora pre novšie funkcie úrovne 2 sa rýchlo zlepšuje, ale ešte nie je univerzálna. Logické hodnoty pre float, clear a resize sú dobre podporované. Logické vlastnosti border-radius sú najnovšie a môžu byť stále za experimentálnymi príznakmi alebo v najnovších verziách prehliadačov. Ako vždy, mali by ste sa poradiť so zdrojmi ako MDN Web Docs alebo CanIUse.com pre najaktuálnejšie údaje o kompatibilite.

Stratégie pre progresívne vylepšovanie (Progressive Enhancement)

Keďže CSS je navrhnuté tak, aby bolo odolné, môžeme ľahko poskytnúť záložné riešenia pre staršie prehliadače. Kaskáda zabezpečí, že ak prehliadač nerozumie logickej vlastnosti, jednoducho ju ignoruje a použije fyzickú vlastnosť definovanú pred ňou.

Takto môžete písať CSS pripravené na záložné riešenia:

.card {

  /* Záložné riešenie pre staršie prehliadače */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Moderná logická vlastnosť, ktorá prepíše záložné riešenie */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Tento prístup zaisťuje solídny základný zážitok pre všetkých a zároveň poskytuje vylepšený, adaptívny layout pre používateľov na moderných prehliadačoch. Pre projekty, ktoré nepotrebujú podporovať viacero režimov písania, to môže byť prehnané. Ale pre akúkoľvek globálnu aplikáciu, dizajnový systém alebo tému je to robustná a budúcnosti odolná stratégia.

Budúcnosť je logická: Za hranicami úrovne 2

Prechod od fyzického k logickému mysleniu je jedným z najdôležitejších posunov v modernom CSS. Zosúlaďuje náš jazyk pre štýlovanie s realitou rozmanitého, globálneho webu. Posúva nás od krehkých, na obrazovku orientovaných hackov k odolnému, na obsah orientovanému dizajnu.

Sú tu ešte medzery? Niekoľko. O logických hodnotách pre vlastnosti ako background-position alebo gradienty sa stále diskutuje. Ale s vydaním úrovne 2 sa drvivá väčšina každodenných úloh týkajúcich sa layoutu a štýlovania dá teraz dosiahnuť pomocou čisto logického prístupu.

Výzva pre vývojárov je jasná: začnite predvolene používať logické vlastnosti. Nechajte inline-size byť vašou voľbou namiesto width. Používajte margin-inline namiesto samostatného nastavovania ľavého a pravého okraja. Nejde len o podporu rôznych jazykov; ide o písanie lepšieho, odolnejšieho CSS. Komponent vytvorený s logickými vlastnosťami je vo svojej podstate viac znovupoužiteľný a prispôsobivý, či už sa používa v LTR, RTL alebo vertikálnom layoute. Je to jednoducho lepšie inžinierstvo.

Záver: Prijmite tok

Logické vlastnosti CSS úrovne 2 nie sú len zbierkou nových funkcií; je to zavŕšenie vízie. Poskytujú posledné, kľúčové diely potrebné na vytváranie layoutov, ktoré rešpektujú prirodzený tok ich obsahu, nech už je akýkoľvek. Prijatím vlastností ako float: inline-start a border-start-start-radius povyšujeme naše remeslo z jednoduchého pozicovania krabíc na obrazovke na navrhovanie skutočne globálnych, inkluzívnych a budúcnosti odolných webových zážitkov.

Keď nabudúce začnete nový projekt alebo budete vytvárať nový komponent, zastavte sa predtým, ako napíšete margin-left. Opýtajte sa sami seba: „Myslím tým vľavo, alebo myslím začiatok?“ Týmto malým mentálnym posunom prispejete k prispôsobivejšiemu a prístupnejšiemu webu pre všetkých a všade.