CSS Logička Svojstva Razina 2: Izgradnja uistinu globalnog weba s poboljšanom podrškom za način pisanja

Desetljećima su web developeri gradili izglede koristeći vokabular ukorijenjen u fizičkom svijetu: gore, dolje, lijevo i desno. Postavljali smo margin-left, padding-top i border-right. Ovaj mentalni model nam je dobro služio kada je web bio pretežno medij s lijeva na desno, od gore prema dolje. Međutim, web je globalan. To je platforma za sve jezike i kulture, od kojih mnogi ne slijede ovaj jednostavan smjerni tok.

Jezici poput arapskog i hebrejskog pišu se zdesna nalijevo. Tradicionalni japanski i kineski mogu se pisati okomito, od vrha prema dnu i zdesna nalijevo. Prisiljavanje fizičkog, CSS modela slijeva na desno na ove sustave pisanja rezultira slomljenim izgledima, frustrirajućim korisničkim iskustvom i planinom prekomjernog koda. Tu dolaze CSS Logička Svojstva i Vrijednosti, predstavljajući temeljnu promjenu paradigme s fizičkih smjerova na relativne toke, logičke smjerove. Dok je Razina 1 postavila temelje, CSS Logička Svojstva Razina 2 dovršava sliku, pružajući alate koji su nam potrebni za izgradnju uistinu univerzalnih korisničkih sučelja svjesnih načina pisanja.

Ovaj sveobuhvatni vodič odvest će vas na detaljno proučavanje poboljšanja koje donosi Razina 2. Počet ćemo s osvježenjem osnovnih koncepata, a zatim istražiti nova svojstva i vrijednosti koje popunjavaju praznine i na kraju, primijeniti sve u praksi gradeći komponentu koja se neprimjetno prilagođava bilo kojem načinu pisanja. Pripremite se da zauvijek promijenite način na koji razmišljate o CSS izgledu.

Brzo osvježenje: Osnovni koncepti logičkih svojstava (Razina 1)

Prije nego što možemo cijeniti dodatke u Razini 2, moramo imati čvrsto razumijevanje temelja koje je postavila Razina 1. Cijeli sustav izgrađen je na dva ključna koncepta: način pisanja i rezultirajuće blok i inline osi.

Četiri načina pisanja

CSS svojstvo writing-mode određuje smjer postavljanja teksta. Iako često uzimamo zadano zdravo za gotovo, postoji nekoliko vrijednosti koje u osnovi mijenjaju način na koji sadržaj teče na stranici:

• horizontal-tb: Ovo je zadano za većinu zapadnih jezika. Tekst teče vodoravno (inline os) s lijeva na desno (ili zdesna nalijevo na temelju smjera), a redovi se slažu od vrha prema dnu (blok os).
• vertical-rl: Koristi se za tradicionalnu istočnoazijsku tipografiju (npr. japanski, kineski). Tekst teče okomito od vrha prema dnu (inline os), a redovi se slažu zdesna nalijevo (blok os).
• vertical-lr: Slično gore navedenom, ali se redovi slažu slijeva nadesno (blok os). Manje uobičajeno, ali se koristi u nekim kontekstima poput mongolskog pisma.
• sidelong-rl / sidelong-lr: Ovo je za specifične slučajeve upotrebe u kojima želite postaviti glife na njihovu stranu. Manje su uobičajeni u općenitom web sadržaju.

Ključni koncept: Blok nasuprot Inline osi

Ovo je najvažniji koncept za shvatiti. U logičkom svijetu prestajemo razmišljati o "vertikalnom" i "horizontalnom" i počinjemo razmišljati u smislu blok i inline osi. Njihova orijentacija u potpunosti ovisi o writing-mode.

• Inline os je smjer u kojem tekst teče unutar jednog retka.
• Blok os je smjer u kojem su novi redovi složeni.

Pogledajmo kako to funkcionira:

• U standardnom engleskom (writing-mode: horizontal-tb): inline os ide vodoravno, a blok os ide okomito.
• U tradicionalnom japanskom (writing-mode: vertical-rl): inline os ide okomito, a blok os ide vodoravno.

Budući da ove osi mogu mijenjati, svojstva poput width i height postaju dvosmislena. Je li width veličina duž vodoravne osi ili inline osi? Logička svojstva rješavaju ovu dvosmislenost. Sada imamo start i end za svaku os:

• block-start: "Vrh" na engleskom, ali "desno" na japanskom vertikalnom.
• block-end: "Dno" na engleskom, ali "lijevo" na japanskom vertikalnom.
• inline-start: "Lijevo" na engleskom, ali "vrh" na japanskom vertikalnom.
• inline-end: "Desno" na engleskom, ali "dno" na japanskom vertikalnom.

Mapiranje fizičkih u logička svojstva (Razina 1)

Razina 1 uvela je sveobuhvatan skup mapiranja s fizičkih na logička svojstva. Evo nekoliko ključnih primjera:

• 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 (za pozicioniranje) → inset-inline-start / inset-inline-end
• top / bottom (za pozicioniranje) → inset-block-start / inset-block-end

Razina 1 također nam je dala korisne prečace kao što su margin-inline (za start i end) i padding-block (za start i end).

Dobrodošli u Razinu 2: Što je novo i zašto je važno

Iako je Razina 1 bila monumentalni korak naprijed, ostavila je neke primjetne praznine. Određena temeljna CSS svojstva kao što su float, clear i resize nisu imala logičke ekvivalente. Nadalje, svojstva poput border-radius nisu se mogla logički kontrolirati, prisiljavajući programere da se vrate na fizička svojstva za detaljan stil. To je značilo da možete izgraditi izgled na 90% s logičkim svojstvima, ali biste i dalje trebali fizičke zamjene za različite načine pisanja, djelomično obesnažujući svrhu.

CSS Logička Svojstva Razina 2 izravno se bavi ovim nedostacima. Ne radi se o uvođenju radikalno novog sustava, već o dovršavanju onog pokrenutog u Razini 1. To postiže na dva primarna načina:

1. Uvođenje novih logičkih svojstava i vrijednosti za starije CSS značajke koje su bile inherentno fizičke (poput float).
2. Dodavanje logičkih mapiranja svojstava za složene prečace koja su prethodno bila ignorirana (poput border-radius).

S Razinom 2, vizija potpuno relativnog stila toka je gotovo dovršena, što nam omogućuje da izgradimo složene, lijepe i robusne komponente koje rade svugdje, za svakoga, bez hakova ili zamjena.

Detaljan pregled: Nove logičke vrijednosti i svojstva u Razini 2

Istražimo najutjecajnija dodavanja koja Razina 2 donosi u naš alat za razvoj. Ovo su alati koji popunjavaju praznine i osnažuju uistinu univerzalni dizajn komponenti.

Float i Clear: Logička revolucija

Svojstvo float bilo je kamen temeljac CSS izgleda godinama, ali njegove vrijednosti, left i right, su definicija fizičkog smjera. Ako plutate sliku na lijevo od odlomka na engleskom, izgleda ispravno. Ali prebacite smjer dokumenta na zdesna nalijevo (RTL) za arapski, a slika je sada na "pogrešnoj" strani bloka teksta. Trebalo bi biti s desne strane, što je početak retka.

Razina 2 uvodi dvije nove, logičke ključne riječi za svojstvo float:

• float: inline-start; Ovo pomiče element na početak inline smjera. U LTR jezicima ovo je lijevo. U RTL jezicima to je desno. U vertikalnom-rl načinu pisanja, to je vrh.
• float: inline-end; Ovo pomiče element na kraj inline smjera. U LTR, ovo je desno. U RTL, ovo je lijevo. U vertical-rl, to je dno.

Slično tome, svojstvo clear, koje se koristi za kontrolu zamatanja sadržaja oko plutajućih elemenata, dobiva svoje logičke pandane:

• clear: inline-start; Briše plutajuće elemente na strani inline-start.
• clear: inline-end; Briše plutajuće elemente na strani inline-end.

Ovo mijenja igru. Sada možete stvoriti klasične izglede slike s omotavanjem teksta koji se automatski prilagođavaju bilo kojem smjeru jezika bez ijedne dodatne linije CSS-a.

Poboljšana kontrola pomoću logičke promjene veličine

Svojstvo resize, koje se obično koristi na textarea, omogućuje korisnicima promjenu veličine elementa. Njegove tradicionalne vrijednosti su horizontal, vertical i both. Ali što znači "horizontalno" u vertikalnom načinu pisanja? To i dalje znači promjenu veličine duž fizičke horizontalne osi, što možda nije ono što korisnik ili dizajner namjeravaju. Korisnik vjerojatno želi promijeniti veličinu elementa duž njegove inline osi kako bi redovi bili duži ili kraći.

Razina 2 uvodi logičke vrijednosti za resize:

• resize: inline; Omogućuje promjenu veličine duž inline osi.
• resize: block; Omogućuje promjenu veličine duž block osi.

Korištenje resize: block; na textarea na engleskom omogućuje korisniku da ga učini višim. Korištenje u vertikalnom načinu pisanja omogućuje korisniku da ga učini širim (što je blok smjer). Jednostavno radi.

`caption-side`: Logično pozicioniranje za natpise tablica

Svojstvo caption-side određuje plasman natpisa tablice. Stare vrijednosti bile su top i bottom. Opet, ovo su fizički. Ako je namjera dizajnera da stavi natpis "prije" sadržaja tablice, top radi za horizontalne načine pisanja. Ali u vertikalnom-rl načinu, "start" toka bloka je s desne strane, a ne na vrhu.

Razina 2 pruža logično rješenje:

• caption-side: block-start; Postavlja natpis na početak toka bloka.
• caption-side: block-end; Postavlja natpis na kraj toka bloka.

`text-align`: Temeljna logička vrijednost

Dok su vrijednosti start i end za text-align već neko vrijeme, one su temeljni dio filozofije logičkih svojstava i vrijedi ih ojačati. Korištenje text-align: left; je uobičajena pogreška koja odmah uzrokuje probleme s izgledom u RTL jezicima. Ispravan, moderan pristup je uvijek koristiti:

• text-align: start; Poravnava tekst s početkom inline smjera.
• text-align: end; Poravnava tekst s krajem inline smjera.

Krunski dragulj razine 2: Logički `border-radius`

Možda je najznačajniji i najsnažniji dodatak u Razini 2 skup svojstava za logičko upravljanje radijusima obruba. Prethodno, ako ste željeli da kartica ima zaobljene kutove samo na "vrhu", koristili biste border-top-left-radius i border-top-right-radius. Ovo se potpuno raspada u vertikalnom načinu pisanja, gdje su "gornji" kutovi sada kutovi start-start i end-start.

Razina 2 uvodi četiri nova longhand svojstva koja se mapiraju na četiri kuta elementa na način koji je relativan toku. Nazivlje je border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Kut gdje se susreću block-start i inline-start strane.
• border-start-end-radius: Kut gdje se susreću block-start i inline-end strane.
• border-end-start-radius: Kut gdje se susreću block-end i inline-start strane.
• border-end-end-radius: Kut gdje se susreću block-end i inline-end strane.

Ovo može biti teško vizualizirati na prvi pogled, pa ga mapirajmo za različite načine pisanja:

Mapiranje `border-radius` u `writing-mode: horizontal-tb` (npr. engleski)

• border-start-start-radius se mapira na top-left-radius.
• border-start-end-radius se mapira na top-right-radius.
• border-end-start-radius se mapira na bottom-left-radius.
• border-end-end-radius se mapira na bottom-right-radius.

Mapiranje `border-radius` u `writing-mode: horizontal-tb` s `dir="rtl"` (npr. arapski)

Ovdje je inline smjer okrenut.

• border-start-start-radius se mapira na top-right-radius. (Block-start je gore, inline-start je desno).
• border-start-end-radius se mapira na top-left-radius.
• border-end-start-radius se mapira na bottom-right-radius.
• border-end-end-radius se mapira na bottom-left-radius.

Mapiranje `border-radius` u `writing-mode: vertical-rl` (npr. japanski)

Ovdje su obje osi rotirane.

• border-start-start-radius se mapira na top-right-radius. (Block-start je desno, inline-start je gore).
• border-start-end-radius se mapira na bottom-right-radius.
• border-end-start-radius se mapira na top-left-radius.
• border-end-end-radius se mapira na bottom-left-radius.

Korištenjem ovih novih svojstava možete definirati radijuse kutova koji su semantički vezani za tijek sadržaja, a ne za fizički zaslon. Kut "start-start" uvijek će biti ispravan kut, bez obzira na jezik ili smjer teksta.

Praktična implementacija: Izgradnja komponente spremne za globalnu upotrebu

Teorija je izvrsna, ali pogledajmo kako to funkcionira u praksi. Izgradit ćemo jednostavnu komponentu kartice profila, prvo koristeći stara fizička svojstva, a zatim je refaktorirati da koristi moderna logička svojstva iz Razine 1 i Razine 2.

Kartica će imati sliku pomaknutu na jednu stranu, naslov, neki tekst i ukrasnu obrub i zaobljene kutove.

"Stari" način: Krhka, fizička kartica

Evo kako bismo mogli stilizirati ovu karticu prije nekoliko godina:

/* --- CSS (Fizička Svojstva) --- */

.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;

}

U standardnom kontekstu engleskog LTR-a, ovo izgleda u redu. Ali ako ovo postavimo unutar spremnika s dir="rtl" ili writing-mode: vertical-rl, izgled se lomi. Ukrasna obrub je na pogrešnoj strani, avatar je na pogrešnoj strani, margina je pogrešna, a zaobljeni kutovi su na pogrešnom mjestu.

"Novi" način: Robusna, logična kartica

Sada, refaktorirajmo istu komponentu koristeći logička svojstva. Iskoristit ćemo svojstva iz Razine 1 i nova dodatke iz Razine 2.

/* --- CSS (Logička Svojstva) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` prečac je već logičan! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Razina 2 Snaga! */

  border-end-start-radius: 8px; /* Razina 2 Snaga! */

}

.logical-card .avatar {

  float: inline-start; /* Razina 2 Snaga! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Testiranje i provjera

S ovim novim CSS-om, možete ispustiti komponentu u bilo koji spremnik, i ona će se automatski prilagoditi.

• U LTR kontekstu: Izgledat će identično izvornoj fizičkoj verziji.
• U RTL kontekstu (dir="rtl"): Avatar će plutati udesno, njegova će margina biti slijeva, ukrasna obrub će biti zdesna, a tekst će biti poravnat na početku (udesno). Zaobljeni kutovi će ispravno biti na gornjem desnom i donjem desnom dijelu. Jednostavno radi.
• U vertikalnom kontekstu (writing-mode: vertical-rl): "Širina" kartice (sada njena vertikalna inline-size) bit će 300px. Avatar će plutati na "vrhu" (inline-start) s marginom na njegovom "dnu" (inline-end). Ukrasna obrub bit će na desnoj strani (inline-start), a zaobljeni kutovi bit će na gornjem desnom i gornjem lijevom dijelu. Komponenta se potpuno ponovno orijentirala ispravno bez ikakvih upita medija ili zamjena.

Podrška preglednika i fallbackovi

Sve ovo zvuči fantastično, ali što je s podrškom za preglednik? Dobra vijest je da je podrška za Razinu 1 logička svojstva izvrsna u svim modernim preglednicima. Danas možete i trebali biste koristiti svojstva kao što su margin-inline-start i padding-block.

Podrška za novije Razina 2 značajke se brzo poboljšava, ali još uvijek nije univerzalna. Logičke vrijednosti za float, clear i resize su dobro podržane. Logička svojstva border-radius su najnovija i možda su još uvijek iza zastavica značajki ili u najnovijim verzijama preglednika. Kao i uvijek, trebali biste se posavjetovati s resursima poput MDN Web Docs ili CanIUse.com za najnovije podatke o kompatibilnosti.

Strategije za progresivno poboljšanje

Budući da je CSS dizajniran da bude otporan, lako možemo osigurati fallbackove za starije preglednike. Kaskada će osigurati da ako preglednik ne razumije logičko svojstvo, jednostavno će ga ignorirati i koristiti fizičko svojstvo definirano prije njega.

Evo kako možete napisati CSS spreman za fallback:

.card {

  /* Fallback za starije preglednike */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Moderno logičko svojstvo koje će nadjačati fallback */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Ovaj pristup osigurava solidno osnovno iskustvo za sve, istovremeno pružajući poboljšani, adaptivni izgled za korisnike na modernim preglednicima. Za projekte koji ne moraju podržavati višestruke načine pisanja, ovo bi moglo biti pretjerano. Ali za bilo koju globalnu aplikaciju, sustav dizajna ili temu, ovo je robusna i dugoročna strategija.

Budućnost je logička: Iza razine 2

Prijelaz s fizičkog na logički način razmišljanja jedna je od najvažnijih promjena u modernom CSS-u. Usklađuje naš stilski jezik sa stvarnošću raznolikog, globalnog weba. Udaljava nas od krhkih hakova orijentiranih na zaslon prema otpornom dizajnu orijentiranom na sadržaj.

Ima li još uvijek praznina? Nekoliko. Logičke vrijednosti za svojstva poput background-position ili gradijenata se još uvijek raspravljaju. Ali s izdavanjem Razine 2, velika većina svakodnevnih zadataka izrade izgleda i stiliziranja sada se može postići korištenjem isključivo logičkog pristupa.

Poziv na akciju za programere je jasan: počnite zadavati logička svojstva kao zadana. Učinite inline-size svojim odabirom umjesto width. Koristite margin-inline umjesto zasebnog postavljanja lijeve i desne margine. Ne radi se samo o podršci različitim jezicima; riječ je o pisanju boljeg, otpornijeg CSS-a. Komponenta izgrađena s logičkim svojstvima inherentno je više za višekratnu upotrebu i prilagodljiva, bilo da se koristi u LTR, RTL ili vertikalnom izgledu. Jednostavno je bolji inženjering.

Zaključak: Prihvatite tok

CSS Logička Svojstva Razina 2 nije samo zbirka novih značajki; to je dovršetak vizije. Pruža konačne, ključne dijelove potrebne za izgradnju izgleda koji poštuju prirodni tok svog sadržaja, što god taj tok bio. Prihvaćanjem svojstava poput float: inline-start i border-start-start-radius, uzdižemo svoj zanat od jednostavnog pozicioniranja kutija na zaslonu do dizajniranja uistinu globalnih, inkluzivnih i dugoročnih web iskustava.

Sljedeći put kad započnete novi projekt ili izgradite novu komponentu, pauzirajte prije nego što upišete margin-left. Zapitajte se, "Mislim li na lijevo ili mislim na početak?" Čineći tu malu mentalnu promjenu, doprinijet ćete prilagodljivijem i pristupačnijem webu za sve, posvuda.