Istražite buduÄnost web izgleda s CSS LogiÄkim Svojstvima Razina 2. Ovaj sveobuhvatni vodiÄ obuhvaÄa nova svojstva, praktiÄne primjere i kako graditi uistinu globalne web stranice prilagoÄene naÄinu pisanja.
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:
- UvoÄenje novih logiÄkih svojstava i vrijednosti za starije CSS znaÄajke koje su bile inherentno fiziÄke (poput float).
- 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.