CSS logične lastnosti stopnje 2: Gradnja resnično globalnega spleta z izboljšano podporo za načine pisanja

Desetletja so spletni razvijalci gradili postavitve z besednjakom, ki temelji na fizičnem svetu: zgoraj, spodaj, levo, in desno. Nastavili smo margin-left, padding-top in border-right. Ta miselni model nam je dobro služil, ko je bil splet pretežno medij, ki se bere od leve proti desni in od zgoraj navzdol. Vendar je splet globalen. Je platforma za vse jezike in kulture, od katerih mnoge ne sledijo temu preprostemu smernemu toku.

Jeziki, kot sta arabščina in hebrejščina, se pišejo od desne proti levi. Tradicionalna japonščina in kitajščina se lahko pišeta navpično, od zgoraj navzdol in od desne proti levi. Vsiljevanje fizičnega, od leve proti desni usmerjenega modela CSS tem pisnim sistemom povzroči zlomljene postavitve, frustrirajočo uporabniško izkušnjo in goro preglasitev kode. Tu nastopijo logične lastnosti in vrednosti CSS, ki predstavljajo temeljni premik paradigme od fizičnih smeri k logičnim smerem, ki so odvisne od toka. Medtem ko je stopnja 1 postavila temelje, CSS logične lastnosti stopnje 2 dopolnjujejo sliko in nam zagotavljajo orodja, ki jih potrebujemo za gradnjo resnično univerzalnih uporabniških vmesnikov, ki se zavedajo načina pisanja.

Ta obsežen vodnik vas bo popeljal v poglobljen vpogled v izboljšave, ki jih prinaša stopnja 2. Začeli bomo z osvežitvijo osnovnih konceptov, nato raziskali nove lastnosti in vrednosti, ki zapolnjujejo vrzeli, in na koncu vse skupaj uporabili v praksi z gradnjo komponente, ki se brezhibno prilagaja vsakemu načinu pisanja. Pripravite se, da boste za vedno spremenili svoj način razmišljanja o postavitvi v CSS.

Hiter opomnik: Osnovni koncepti logičnih lastnosti (stopnja 1)

Preden lahko cenimo dodatke na stopnji 2, moramo trdno razumeti temelje, ki jih je postavila stopnja 1. Celoten sistem temelji na dveh ključnih konceptih: načinu pisanja (writing mode) ter posledičnih blokovni (block) in vrstični (inline) osi.

Štirje načini pisanja

Lastnost CSS writing-mode določa smer, v kateri je besedilo postavljeno. Čeprav privzeto vrednost pogosto jemljemo za samoumevno, obstaja več vrednosti, ki temeljito spremenijo tok vsebine na strani:

• horizontal-tb: To je privzeta vrednost za večino zahodnih jezikov. Besedilo teče vodoravno (vrstična os) od leve proti desni (ali od desne proti levi, odvisno od smeri), vrstice pa se nalagajo od zgoraj navzdol (blokovna os).
• vertical-rl: Uporablja se za tradicionalno vzhodnoazijsko tipografijo (npr. japonščina, kitajščina). Besedilo teče navpično od zgoraj navzdol (vrstična os), vrstice pa se nalagajo od desne proti levi (blokovna os).
• vertical-lr: Podobno kot zgoraj, vendar se vrstice nalagajo od leve proti desni (blokovna os). Manj pogosto, vendar se uporablja v nekaterih kontekstih, kot je mongolska pisava.
• sidelong-rl / sidelong-lr: Te vrednosti so za specifične primere uporabe, kjer želite glife postaviti na stran. V splošni spletni vsebini so manj pogoste.

Ključni koncept: Blokovna proti vrstični osi

To je najpomembnejši koncept, ki ga je treba razumeti. V logičnem svetu nehamo razmišljati o 'navpičnem' in 'vodoravnem' in začnemo razmišljati v smislu blokovne (block) in vrstične (inline) osi. Njuna usmerjenost je v celoti odvisna od lastnosti writing-mode.

• Vrstična os (Inline Axis) je smer, v kateri teče besedilo znotraj ene vrstice.
• Blokovna os (Block Axis) je smer, v kateri se nalagajo nove vrstice.

Poglejmo, kako se to obnese v praksi:

• V standardni angleščini (writing-mode: horizontal-tb): Vrstična os poteka vodoravno, blokovna os pa navpično.
• V tradicionalni japonščini (writing-mode: vertical-rl): Vrstična os poteka navpično, blokovna os pa vodoravno.

Ker se te osi lahko zamenjajo, lastnosti, kot sta width in height, postanejo dvoumne. Ali je width velikost vzdolž vodoravne ali vrstične osi? Logične lastnosti rešujejo to dvoumnost. Zdaj imamo start in end za vsako os:

• block-start: 'Zgoraj' v angleščini, vendar 'desno' v navpični japonščini.
• block-end: 'Spodaj' v angleščini, vendar 'levo' v navpični japonščini.
• inline-start: 'Levo' v angleščini, vendar 'zgoraj' v navpični japonščini.
• inline-end: 'Desno' v angleščini, vendar 'spodaj' v navpični japonščini.

Preslikava fizičnih v logične lastnosti (stopnja 1)

Stopnja 1 je uvedla obsežen nabor preslikav iz fizičnih v logične lastnosti. Tukaj je nekaj ključnih primerov:

• 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

Stopnja 1 nam je dala tudi uporabne okrajšave, kot sta margin-inline (za start in end) in padding-block (za start in end).

Dobrodošli na stopnji 2: Kaj je novega in zakaj je pomembno

Čeprav je bila stopnja 1 monumentalen korak naprej, je pustila nekaj opaznih vrzeli. Določene temeljne lastnosti CSS, kot so float, clear in resize, niso imele logičnih ekvivalentov. Poleg tega lastnosti, kot je border-radius, ni bilo mogoče logično nadzorovati, kar je razvijalce prisililo, da so se za natančnejše oblikovanje zatekli k fizičnim lastnostim. To je pomenilo, da ste lahko postavitev zgradili 90 % z logičnimi lastnostmi, vendar ste za različne načine pisanja še vedno potrebovali fizične preglasitve, kar je delno izničilo namen.

CSS logične lastnosti stopnje 2 neposredno naslavljajo te pomanjkljivosti. Ne gre za uvedbo radikalno novega sistema, temveč za dokončanje tistega, ki se je začel na stopnji 1. To dosega na dva glavna načina:

1. Uvedba novih logičnih lastnosti in vrednosti za starejše funkcije CSS, ki so bile neločljivo fizične (kot je float).
2. Dodajanje logičnih preslikav lastnosti za kompleksne okrajšave, ki so bile prej prezrte (kot je border-radius).

S stopnjo 2 je vizija popolnoma pretočno-relativnega sistema oblikovanja skoraj končana, kar nam omogoča gradnjo kompleksnih, lepih in robustnih komponent, ki delujejo povsod, za vsakogar, brez hekov ali preglasitev.

Poglobljen vpogled: Nove logične vrednosti in lastnosti na stopnji 2

Raziščimo najvplivnejše dodatke, ki jih stopnja 2 prinaša v naš razvijalski nabor orodij. To so orodja, ki zapolnjujejo vrzeli in omogočajo resnično univerzalno oblikovanje komponent.

Float in Clear: Logična revolucija

Lastnost float je bila dolga leta temelj postavitve v CSS, vendar so njene vrednosti, left in right, definicija fizične smeri. Če sliko v angleščini postavite levo (left) od odstavka, je videti pravilno. Toda če smer dokumenta preklopite na od desne proti levi (RTL) za arabščino, je slika zdaj na 'napačni' strani besedilnega bloka. Morala bi biti na desni, kjer se vrstica začne.

Stopnja 2 uvaja dve novi, logični ključni besedi za lastnost float:

• float: inline-start; Ta vrednost postavi element na začetek vrstične smeri. V jezikih LTR je to levo. V jezikih RTL je to desno. V načinu pisanja vertical-rl je to zgoraj.
• float: inline-end; Ta vrednost postavi element na konec vrstične smeri. V LTR je to desno. V RTL je to levo. V vertical-rl je to spodaj.

Podobno dobi svoje logične ustreznike tudi lastnost clear, ki se uporablja za nadzor prelivanja vsebine okoli plavajočih elementov:

• clear: inline-start; Počisti plavajoče elemente na strani inline-start.
• clear: inline-end; Počisti plavajoče elemente na strani inline-end.

To je prelomno. Zdaj lahko ustvarite klasične postavitve s sliko in prelivajočim besedilom, ki se samodejno prilagodijo kateri koli smeri jezika brez ene same dodatne vrstice CSS.

Izboljšan nadzor z logičnim Resize

Lastnost resize, ki se običajno uporablja na elementu textarea, omogoča uporabnikom spreminjanje velikosti elementa. Njene tradicionalne vrednosti so horizontal, vertical in both. Toda kaj pomeni 'vodoravno' v navpičnem načinu pisanja? Še vedno pomeni spreminjanje velikosti vzdolž fizične vodoravne osi, kar morda ni tisto, kar uporabnik ali oblikovalec namerava. Uporabnik verjetno želi spremeniti velikost elementa vzdolž njegove vrstične osi, da bi vrstice podaljšal ali skrajšal.

Stopnja 2 uvaja logične vrednosti za resize:

• resize: inline; Omogoča spreminjanje velikosti vzdolž vrstične osi.
• resize: block; Omogoča spreminjanje velikosti vzdolž blokovne osi.

Uporaba resize: block; na textarea v angleščini omogoča uporabniku, da ga naredi višjega. Uporaba v navpičnem načinu pisanja omogoča uporabniku, da ga naredi širšega (kar je blokovna smer). Preprosto deluje.

`caption-side`: Logično pozicioniranje za naslove tabel

Lastnost caption-side določa umestitev caption tabele. Stari vrednosti sta bili top in bottom. Spet sta fizični. Če je namen oblikovalca, da naslov postavi 'pred' vsebino tabele, top deluje za vodoravne načine pisanja. Toda v načinu vertical-rl je 'začetek' blokovnega toka na desni, ne na vrhu.

Stopnja 2 ponuja logično rešitev:

• caption-side: block-start; Postavi naslov na začetek blokovnega toka.
• caption-side: block-end; Postavi naslov na konec blokovnega toka.

`text-align`: Temeljna logična vrednost

Čeprav vrednosti start in end za text-align obstajata že nekaj časa, sta osrednji del filozofije logičnih lastnosti in ju je vredno poudariti. Uporaba text-align: left; je pogosta napaka, ki takoj povzroči težave s postavitvijo v jezikih RTL. Pravilen, sodoben pristop je vedno uporabljati:

• text-align: start; Poravna besedilo na začetek vrstične smeri.
• text-align: end; Poravna besedilo na konec vrstične smeri.

Kronski dragulj stopnje 2: Logični `border-radius`

Morda najpomembnejši in najmočnejši dodatek na stopnji 2 je nabor lastnosti za logično nadzorovanje polmerov obrob. Prej, če ste želeli, da ima kartica zaobljene vogale samo na 'vrhu', bi uporabili border-top-left-radius in border-top-right-radius. To se popolnoma podre v navpičnem načinu pisanja, kjer so 'zgornji' vogali zdaj vogali start-start in end-start.

Stopnja 2 uvaja štiri nove podrobne lastnosti, ki se preslikajo na štiri vogale elementa na pretočno-relativen način. Konvencija poimenovanja je border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Vogal, kjer se stikata strani block-start in inline-start.
• border-start-end-radius: Vogal, kjer se stikata strani block-start in inline-end.
• border-end-start-radius: Vogal, kjer se stikata strani block-end in inline-start.
• border-end-end-radius: Vogal, kjer se stikata strani block-end in inline-end.

To si je na začetku morda težko predstavljati, zato si poglejmo preslikavo za različne načine pisanja:

Preslikava `border-radius` v `writing-mode: horizontal-tb` (npr. angleščina)

• border-start-start-radius se preslika v top-left-radius.
• border-start-end-radius se preslika v top-right-radius.
• border-end-start-radius se preslika v bottom-left-radius.
• border-end-end-radius se preslika v bottom-right-radius.

Preslikava `border-radius` v `writing-mode: horizontal-tb` z `dir="rtl"` (npr. arabščina)

Tukaj je vrstična smer obrnjena.

• border-start-start-radius se preslika v top-right-radius. (Block-start je zgoraj, inline-start je desno).
• border-start-end-radius se preslika v top-left-radius.
• border-end-start-radius se preslika v bottom-right-radius.
• border-end-end-radius se preslika v bottom-left-radius.

Preslikava `border-radius` v `writing-mode: vertical-rl` (npr. japonščina)

Tukaj sta obe osi zasukani.

• border-start-start-radius se preslika v top-right-radius. (Block-start je desno, inline-start je zgoraj).
• border-start-end-radius se preslika v bottom-right-radius.
• border-end-start-radius se preslika v top-left-radius.
• border-end-end-radius se preslika v bottom-left-radius.

Z uporabo teh novih lastnosti lahko določite polmere vogalov, ki so semantično vezani na tok vsebine, ne na fizični zaslon. Vogal 'start-start' bo vedno pravilen vogal, ne glede na jezik ali smer besedila.

Praktična izvedba: Gradnja komponente, pripravljene za globalno uporabo

Teorija je odlična, a poglejmo, kako to deluje v praksi. Zgradili bomo preprosto komponento profilne kartice, najprej z uporabo starih fizičnih lastnosti, nato pa jo predelali z uporabo sodobnih logičnih lastnosti iz stopnje 1 in 2.

Kartica bo imela sliko, postavljeno na eno stran, naslov, nekaj besedila ter okrasno obrobo in zaobljene vogale.

'Stari' način: Krhka kartica s fizičnimi lastnostmi

Tako bi morda oblikovali to kartico pred nekaj leti:

/* --- CSS (Fizične lastnosti) --- */

.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 standardnem angleškem LTR kontekstu je to videti v redu. Če pa to postavimo v vsebnik z dir="rtl" ali writing-mode: vertical-rl, se postavitev poruši. Okrasna obroba je na napačni strani, avatar je na napačni strani, odmik je napačen, zaobljeni vogali pa so napačno postavljeni.

'Novi' način: Robustna kartica z logičnimi lastnostmi

Zdaj pa predelajmo isto komponento z uporabo logičnih lastnosti. Uporabili bomo lastnosti iz stopnje 1 in nove dodatke iz stopnje 2.

/* --- CSS (Logične lastnosti) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* Okrajšava `padding` je že logična! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Moč stopnje 2! */

  border-end-start-radius: 8px; /* Moč stopnje 2! */

}

.logical-card .avatar {

  float: inline-start; /* Moč stopnje 2! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Testiranje in preverjanje

S to novo kodo CSS lahko komponento postavite v kateri koli vsebnik in samodejno se bo prilagodila.

• V kontekstu LTR: Izgledala bo enako kot originalna fizična različica.
• V kontekstu RTL (dir="rtl"): Avatar bo postavljen desno, njegov odmik bo na levi, okrasna obroba bo na desni, besedilo pa bo poravnano na začetek (na desno). Zaobljeni vogali bodo pravilno zgoraj desno in spodaj desno. Preprosto deluje.
• V navpičnem kontekstu (writing-mode: vertical-rl): 'Širina' kartice (zdaj njena navpična inline-size) bo 300px. Avatar bo postavljen 'zgoraj' (inline-start) z odmikom na 'spodnji' strani (inline-end). Okrasna obroba bo na desni strani (inline-start), zaobljeni vogali pa bodo zgoraj desno in zgoraj levo. Komponenta se je popolnoma pravilno preusmerila brez medijskih poizvedb ali preglasitev.

Podpora brskalnikov in nadomestne rešitve

Vse to zveni fantastično, kaj pa podpora brskalnikov? Dobra novica je, da je podpora za logične lastnosti stopnje 1 odlična v vseh sodobnih brskalnikih. Lastnosti, kot sta margin-inline-start in padding-block, lahko in bi morali uporabljati že danes.

Podpora za novejše funkcije stopnje 2 se hitro izboljšuje, vendar še ni univerzalna. Logične vrednosti za float, clear in resize so dobro podprte. Logične lastnosti za border-radius so najnovejše in so morda še vedno za funkcijskimi zastavicami ali v novejših različicah brskalnikov. Kot vedno se za najnovejše podatke o združljivosti posvetujte z viri, kot sta MDN Web Docs ali CanIUse.com.

Strategije za postopno izboljšavo

Ker je CSS zasnovan tako, da je odporen, lahko enostavno zagotovimo nadomestne rešitve za starejše brskalnike. Kaskada bo zagotovila, da bo brskalnik, če ne razume logične lastnosti, to preprosto prezrl in uporabil fizično lastnost, definirano pred njo.

Tako lahko pišete CSS, pripravljen na nadomestne rešitve:

.card {

  /* Nadomestna rešitev za starejše brskalnike */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Sodobna logična lastnost, ki bo preglasila nadomestno */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Ta pristop zagotavlja solidno osnovno izkušnjo za vse, hkrati pa ponuja izboljšano, prilagodljivo postavitev za uporabnike na sodobnih brskalnikih. Za projekte, ki ne potrebujejo podpore za več načinov pisanja, je to morda pretirano. Toda za katero koli globalno aplikacijo, oblikovalski sistem ali temo je to robustna in na prihodnost odporna strategija.

Prihodnost je logična: Onkraj stopnje 2

Prehod iz fizičnega v logično razmišljanje je eden najpomembnejših premikov v sodobnem CSS. Naš jezik za oblikovanje usklajuje z realnostjo raznolikega, globalnega spleta. Premika nas stran od krhkih, na zaslon usmerjenih hekov k odpornemu, na vsebino usmerjenemu oblikovanju.

Ali še vedno obstajajo vrzeli? Nekaj jih je. O logičnih vrednostih za lastnosti, kot sta background-position ali prelivi, se še vedno razpravlja. Toda z izdajo stopnje 2 je veliko večino vsakodnevnih nalog postavljanja in oblikovanja zdaj mogoče opraviti s povsem logičnim pristopom.

Poziv k akciji za razvijalce je jasen: začnite privzeto uporabljati logične lastnosti. Naj bo inline-size vaša prva izbira namesto width. Uporabite margin-inline namesto ločenega nastavljanja levega in desnega odmika. Ne gre samo za podporo različnim jezikom; gre za pisanje boljšega, bolj odpornega CSS-a. Komponenta, zgrajena z logičnimi lastnostmi, je sama po sebi bolj ponovno uporabna in prilagodljiva, ne glede na to, ali se uporablja v postavitvi LTR, RTL ali navpični. To je preprosto boljše inženirstvo.

Zaključek: Sprejmite tok

CSS logične lastnosti stopnje 2 niso le zbirka novih funkcij; so dopolnitev vizije. Zagotavljajo zadnje, ključne koščke, potrebne za gradnjo postavitev, ki spoštujejo naravni tok svoje vsebine, ne glede na to, kakšen je ta tok. S sprejemanjem lastnosti, kot sta float: inline-start in border-start-start-radius, dvignemo svojo obrt s preprostega pozicioniranja polj na zaslonu na oblikovanje resnično globalnih, vključujočih in na prihodnost odpornih spletnih izkušenj.

Ko naslednjič začnete nov projekt ali gradite novo komponento, se ustavite, preden vtipkate margin-left. Vprašajte se, "Ali mislim levo ali mislim začetek?" S tem majhnim miselnim preskokom boste prispevali k bolj prilagodljivemu in dostopnemu spletu za vse in povsod.