CSS Logické vlastnosti Level 2: Tvorba skutečně globálního webu s rozšířenou podporou režimů psaní

Po desetiletí vytvářeli weboví vývojáři layouty pomocí slovníku zakořeněného ve fyzickém světě: top, bottom, left a right. Nastavovali jsme margin-left, padding-top a border-right. Tento mentální model nám dobře sloužil, když byl web převážně médiem čteným zleva doprava a shora dolů. Web je však globální. Je to platforma pro všechny jazyky a kultury, z nichž mnohé se neřídí tímto jednoduchým směrovým tokem.

Jazyky jako arabština a hebrejština se píší zprava doleva. Tradiční japonština a čínština mohou být psány vertikálně, shora dolů a zprava doleva. Vnucování fyzického, zleva doprava orientovaného CSS modelu těmto systémům psaní vede k rozbitým layoutům, frustrujícímu uživatelskému zážitku a hoře přepisů kódu. A právě zde přicházejí na scénu CSS logické vlastnosti a hodnoty, které představují zásadní posun paradigmatu od fyzických směrů k logickým směrům relativním vůči toku. Zatímco Level 1 položil základy, CSS Logické vlastnosti Level 2 doplňuje celkový obraz a poskytuje nástroje, které potřebujeme k vytváření skutečně univerzálních uživatelských rozhraní, která si jsou vědoma režimu psaní.

Tento komplexní průvodce vás provede hloubkovým ponorem do vylepšení, která přináší Level 2. Začneme opakováním základních konceptů, poté prozkoumáme nové vlastnosti a hodnoty, které vyplňují mezery, a nakonec vše uvedeme do praxe vytvořením komponenty, která se bezproblémově přizpůsobí jakémukoli režimu psaní. Připravte se navždy změnit způsob, jakým přemýšlíte o CSS layoutu.

Rychlé zopakování: Základní koncepty logických vlastností (Level 1)

Než budeme moci ocenit přídavky v Level 2, musíme mít pevné porozumění základům položeným v Level 1. Celý systém je postaven na dvou klíčových konceptech: režimu psaní a z něj vyplývajících osách bloku a řádku.

Čtyři režimy psaní

CSS vlastnost writing-mode určuje směr, jakým je text rozložen. I když často bereme výchozí nastavení za samozřejmost, existuje několik hodnot, které zásadně mění, jak obsah na stránce plyne:

• horizontal-tb: Toto je výchozí nastavení pro většinu západních jazyků. Text plyne horizontálně (řádková osa) zleva doprava (nebo zprava doleva podle směru) a řádky se skládají shora dolů (osa bloku).
• vertical-rl: Používá se pro tradiční východoasijskou typografii (např. japonština, čínština). Text plyne vertikálně shora dolů (řádková osa) a řádky se skládají zprava doleva (osa bloku).
• vertical-lr: Podobné jako výše, ale řádky se skládají zleva doprava (osa bloku). Méně obvyklé, ale používá se v některých kontextech, jako je mongolské písmo.
• sidelong-rl / sidelong-lr: Tyto jsou pro specifické případy použití, kdy chcete položit glyfy na bok. V obecném webovém obsahu jsou méně časté.

Klíčový koncept: Osa bloku vs. řádková osa

Toto je nejdůležitější koncept k pochopení. V logickém světě přestaneme přemýšlet o "vertikálním" a "horizontálním" a začneme přemýšlet v termínech os bloku a řádkové osy. Jejich orientace zcela závisí na writing-mode.

• Řádková osa (Inline Axis) je směr, kterým text plyne v rámci jednoho řádku.
• Osa bloku (Block Axis) je směr, kterým se skládají nové řádky.

Podívejme se, jak to funguje v praxi:

• Ve standardní češtině (writing-mode: horizontal-tb): Řádková osa probíhá horizontálně a osa bloku probíhá vertikálně.
• V tradiční japonštině (writing-mode: vertical-rl): Řádková osa probíhá vertikálně a osa bloku probíhá horizontálně.

Protože se tyto osy mohou měnit, vlastnosti jako width a height se stávají nejednoznačnými. Je width velikost podél horizontální osy nebo řádkové osy? Logické vlastnosti tuto nejednoznačnost řeší. Nyní máme start a end pro každou osu:

• block-start: "Nahoře" v češtině, ale "vpravo" ve vertikální japonštině.
• block-end: "Dole" v češtině, ale "vlevo" ve vertikální japonštině.
• inline-start: "Vlevo" v češtině, ale "nahoře" ve vertikální japonštině.
• inline-end: "Vpravo" v češtině, ale "dole" ve vertikální japonštině.

Mapování fyzických na logické vlastnosti (Level 1)

Level 1 představil komplexní sadu mapování z fyzických na logické vlastnosti. Zde je několik klíčových příkladů:

• 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 (pro pozicování) → inset-inline-start / inset-inline-end
• top / bottom (pro pozicování) → inset-block-start / inset-block-end

Level 1 nám také dal užitečné zkratky jako margin-inline (pro start a end) a padding-block (pro start a end).

Vítejte v Level 2: Co je nového a proč na tom záleží

Zatímco Level 1 byl monumentálním krokem vpřed, zanechal několik znatelných mezer. Některé základní CSS vlastnosti jako float, clear a resize neměly žádné logické ekvivalenty. Dále vlastnosti jako border-radius nebylo možné ovládat logicky, což nutilo vývojáře sahat po fyzických vlastnostech pro jemné doladění stylů. To znamenalo, že jste mohli postavit layout z 90 % pomocí logických vlastností, ale stále byste potřebovali fyzické přepsání pro různé režimy psaní, což částečně mařilo účel.

CSS Logické vlastnosti Level 2 se těmito nedostatky zabývá přímo. Nejde o zavedení radikálně nového systému, ale o dokončení toho, co bylo započato v Level 1. Toho dosahuje dvěma hlavními způsoby:

1. Zavedením nových logických vlastností a hodnot pro starší CSS funkce, které byly ze své podstaty fyzické (jako float).
2. Přidáním mapování logických vlastností pro komplexní zkratky, které byly dříve ignorovány (jako border-radius).

S Level 2 je vize plně tokově-relativního systému stylů téměř kompletní, což nám umožňuje vytvářet komplexní, krásné a robustní komponenty, které fungují všude, pro každého, bez hacků a přepisů.

Hloubkový ponor: Nové logické hodnoty a vlastnosti v Level 2

Prozkoumejme nejvýznamnější doplňky, které Level 2 přináší do naší vývojářské sady nástrojů. Jsou to nástroje, které vyplňují mezery a umožňují skutečně univerzální design komponent.

Float a Clear: Logická revoluce

Vlastnost float byla po léta základním kamenem CSS layoutu, ale její hodnoty, left a right, jsou definicí fyzického směru. Pokud obtékáte obrázek z levé strany odstavce v češtině, vypadá to správně. Ale přepněte směr dokumentu na zprava doleva (RTL) pro arabštinu a obrázek je nyní na "špatné" straně textového bloku. Měl by být vpravo, což je začátek řádku.

Level 2 zavádí dvě nová, logická klíčová slova pro vlastnost float:

• float: inline-start; Toto obtéká prvek na začátek řádkového směru. V LTR jazycích je to vlevo. V RTL jazycích je to vpravo. V režimu psaní vertical-rl je to nahoře.
• float: inline-end; Toto obtéká prvek na konec řádkového směru. V LTR je to vpravo. V RTL je to vlevo. Ve vertical-rl je to dole.

Podobně i vlastnost clear, používaná k řízení zalamování obsahu kolem obtékaných prvků, získává své logické protějšky:

• clear: inline-start; Ruší obtékání na straně inline-start.
• clear: inline-end; Ruší obtékání na straně inline-end.

Toto je naprostá změna hry. Nyní můžete vytvářet klasické layouty s obrázkem a obtékajícím textem, které se automaticky přizpůsobí jakémukoli směru jazyka bez jediného řádku dodatečného CSS.

Rozšířená kontrola s logickým `resize`

Vlastnost resize, běžně používaná na textarea, umožňuje uživatelům měnit velikost prvku. Její tradiční hodnoty jsou horizontal, vertical a both. Ale co znamená "horizontální" ve vertikálním režimu psaní? Stále to znamená změnu velikosti podél fyzické horizontální osy, což nemusí být to, co uživatel nebo designér zamýšlí. Uživatel pravděpodobně chce měnit velikost prvku podél jeho řádkové osy, aby řádky byly delší nebo kratší.

Level 2 zavádí logické hodnoty pro resize:

• resize: inline; Umožňuje změnu velikosti podél řádkové osy.
• resize: block; Umožňuje změnu velikosti podél osy bloku.

Použití resize: block; na textarea v češtině umožňuje uživateli zvětšit její výšku. Použití ve vertikálním režimu psaní umožňuje uživateli zvětšit její šířku (což je směr bloku). Prostě to funguje.

`caption-side`: Logické pozicování popisků tabulek

Vlastnost caption-side určuje umístění popisku tabulky. Staré hodnoty byly top a bottom. Opět jsou fyzické. Pokud je záměrem designéra umístit popisek "před" obsah tabulky, top funguje pro horizontální režimy psaní. Ale v režimu vertical-rl je "začátek" toku bloku vpravo, ne nahoře.

Level 2 poskytuje logické řešení:

• caption-side: block-start; Umístí popisek na začátek toku bloku.
• caption-side: block-end; Umístí popisek na konec toku bloku.

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

Ačkoli hodnoty start a end pro text-align existují již nějakou dobu, jsou klíčovou součástí filozofie logických vlastností a stojí za to je připomenout. Použití text-align: left; je běžná chyba, která okamžitě způsobuje problémy s layoutem v RTL jazycích. Správný, moderní přístup je vždy používat:

• text-align: start; Zarovná text na začátek řádkového směru.
• text-align: end; Zarovná text na konec řádkového směru.

Korunní klenot Level 2: Logický `border-radius`

Snad nejvýznamnějším a nejmocnějším přídavkem v Level 2 je sada vlastností pro logické ovládání poloměrů okrajů. Dříve, pokud jste chtěli, aby karta měla zaoblené rohy pouze "nahoře", použili byste border-top-left-radius a border-top-right-radius. To se zcela rozpadá ve vertikálním režimu psaní, kde "horní" rohy jsou nyní rohy start-start a end-start.

Level 2 zavádí čtyři nové podrobné vlastnosti, které se mapují na čtyři rohy prvku způsobem relativním k toku. Konvence pojmenování je border-[hrana-bloku]-[hrana-řádku]-radius.

• border-start-start-radius: Roh, kde se setkávají strany block-start a inline-start.
• border-start-end-radius: Roh, kde se setkávají strany block-start a inline-end.
• border-end-start-radius: Roh, kde se setkávají strany block-end a inline-start.
• border-end-end-radius: Roh, kde se setkávají strany block-end a inline-end.

Zpočátku to může být obtížné si představit, takže si to zmapujme pro různé režimy psaní:

Mapování `border-radius` v `writing-mode: horizontal-tb` (např. čeština)

• border-start-start-radius odpovídá top-left-radius.
• border-start-end-radius odpovídá top-right-radius.
• border-end-start-radius odpovídá bottom-left-radius.
• border-end-end-radius odpovídá bottom-right-radius.

Mapování `border-radius` v `writing-mode: horizontal-tb` s `dir="rtl"` (např. arabština)

Zde je řádkový směr převrácen.

• border-start-start-radius odpovídá top-right-radius. (Block-start je nahoře, inline-start je vpravo).
• border-start-end-radius odpovídá top-left-radius.
• border-end-start-radius odpovídá bottom-right-radius.
• border-end-end-radius odpovídá bottom-left-radius.

Mapování `border-radius` v `writing-mode: vertical-rl` (např. japonština)

Zde jsou obě osy otočeny.

• border-start-start-radius odpovídá top-right-radius. (Block-start je vpravo, inline-start je nahoře).
• border-start-end-radius odpovídá bottom-right-radius.
• border-end-start-radius odpovídá top-left-radius.
• border-end-end-radius odpovídá bottom-left-radius.

Použitím těchto nových vlastností můžete definovat poloměry rohů, které jsou sémanticky svázány s tokem obsahu, nikoli s fyzickou obrazovkou. Roh "start-start" bude vždy správným rohem, bez ohledu na jazyk nebo směr textu.

Praktická implementace: Vytvoření komponenty připravené pro globální použití

Teorie je skvělá, ale podívejme se, jak to funguje v praxi. Vytvoříme jednoduchou komponentu profilové karty, nejprve pomocí starých fyzických vlastností, a poté ji refaktorujeme tak, aby používala moderní logické vlastnosti z Level 1 i Level 2.

Karta bude mít obrázek obtékaný z jedné strany, nadpis, nějaký text a ozdobný okraj a zaoblené rohy.

"Starý" způsob: Křehká karta s fyzickými vlastnostmi

Takto bychom mohli stylizovat tuto kartu před několika lety:

/* --- 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;

}

Ve standardním českém LTR kontextu to vypadá dobře. Ale pokud to umístíme do kontejneru s dir="rtl" nebo writing-mode: vertical-rl, layout se rozbije. Ozdobný okraj je na špatné straně, avatar je na špatné straně, okraj je nesprávný a zaoblené rohy jsou špatně umístěny.

"Nový" způsob: Robustní karta s logickými vlastnostmi

Nyní refaktorujme stejnou komponentu pomocí logických vlastností. Využijeme vlastnosti jak z Level 1, tak nové přídavky z Level 2.

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

.logical-card {

  inline-size: 300px;

  padding: 20px; /* zkratka `padding` je již logická! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Síla Level 2! */

  border-end-start-radius: 8px; /* Síla Level 2! */

}

.logical-card .avatar {

  float: inline-start; /* Síla Level 2! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Testování a ověření

S tímto novým CSS můžete komponentu vložit do jakéhokoli kontejneru a automaticky se přizpůsobí.

• V LTR kontextu: Bude vypadat identicky jako původní fyzická verze.
• V RTL kontextu (dir="rtl"): Avatar se bude obtékat vpravo, jeho okraj bude vlevo, ozdobný okraj bude vpravo a text bude zarovnán na začátek (doprava). Zaoblené rohy budou správně vpravo nahoře a vpravo dole. Prostě to funguje.
• Ve vertikálním kontextu (writing-mode: vertical-rl): "Šířka" karty (nyní její vertikální inline-size) bude 300px. Avatar se bude obtékat "nahoře" (inline-start) s okrajem na své "spodní" straně (inline-end). Ozdobný okraj bude na pravé straně (inline-start) a zaoblené rohy budou vpravo nahoře a vlevo nahoře. Komponenta se zcela správně přeorientovala bez jakýchkoli media queries nebo přepisů.

Podpora v prohlížečích a záložní řešení (fallbacks)

To vše zní fantasticky, ale co podpora v prohlížečích? Dobrou zprávou je, že podpora pro logické vlastnosti Level 1 je vynikající ve všech moderních prohlížečích. Vlastnosti jako margin-inline-start a padding-block můžete a měli byste používat již dnes.

Podpora pro novější funkce Level 2 se rychle zlepšuje, ale ještě není univerzální. Logické hodnoty pro float, clear a resize jsou dobře podporovány. Logické vlastnosti border-radius jsou nejnovější a mohou být stále za experimentálními příznaky nebo v nejnovějších verzích prohlížečů. Jako vždy byste měli konzultovat zdroje jako MDN Web Docs nebo CanIUse.com pro nejaktuálnější data o kompatibilitě.

Strategie pro progresivní vylepšení

Jelikož je CSS navrženo tak, aby bylo odolné, můžeme snadno poskytnout záložní řešení pro starší prohlížeče. Kaskáda zajistí, že pokud prohlížeč nerozumí logické vlastnosti, jednoduše ji ignoruje a použije fyzickou vlastnost definovanou před ní.

Takto můžete psát CSS připravené na záložní řešení:

.card {

  /* Záložní řešení pro starší prohlížeče */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Moderní logická vlastnost, která přepíše záložní řešení */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Tento přístup zajišťuje solidní základní zážitek pro všechny a zároveň poskytuje vylepšený, adaptivní layout pro uživatele na moderních prohlížečích. Pro projekty, které nepotřebují podporovat více režimů psaní, to může být přehnané. Ale pro jakoukoli globální aplikaci, design systém nebo šablonu je to robustní a budoucnosti odolná strategie.

Budoucnost je logická: Za hranicemi Level 2

Přechod od fyzického k logickému myšlení je jedním z nejdůležitějších posunů v moderním CSS. Slaďuje náš jazyk pro stylování s realitou rozmanitého, globálního webu. Posouvá nás od křehkých, na obrazovku orientovaných hacků k odolnému, na obsah orientovanému designu.

Existují stále nějaké mezery? Pár ano. Stále se diskutuje o logických hodnotách pro vlastnosti jako background-position nebo gradienty. Ale s vydáním Level 2 lze drtivou většinu každodenních úkolů v oblasti layoutu a stylů nyní provádět pomocí čistě logického přístupu.

Výzva pro vývojáře je jasná: začněte standardně používat logické vlastnosti. Udělejte z inline-size svou volbu místo width. Používejte margin-inline místo samostatného nastavování levého a pravého okraje. Nejde jen o podporu různých jazyků; jde o psaní lepšího, odolnějšího CSS. Komponenta postavená s logickými vlastnostmi je ze své podstaty více znovupoužitelná a přizpůsobitelná, ať už je použita v LTR, RTL nebo vertikálním layoutu. Je to jednoduše lepší inženýrství.

Závěr: Přijměte tok

CSS Logické vlastnosti Level 2 nejsou jen sbírkou nových funkcí; je to dovršení vize. Poskytuje poslední, klíčové dílky potřebné k vytváření layoutů, které respektují přirozený tok svého obsahu, ať už je jakýkoli. Přijetím vlastností jako float: inline-start a border-start-start-radius povyšujeme naše řemeslo z pouhého pozicování krabic na obrazovce na navrhování skutečně globálních, inkluzivních a budoucnosti odolných webových zážitků.

Až příště začnete nový projekt nebo budete vytvářet novou komponentu, zastavte se, než napíšete margin-left. Zeptejte se sami sebe: "Myslím tím vlevo, nebo myslím na začátku?" Tímto malým mentálním posunem přispějete k přizpůsobivějšímu a přístupnějšímu webu pro všechny a všude.