CSS loginės savybės, 2 lygis: tikrai pasaulinio interneto kūrimas su patobulintu rašymo režimo palaikymu

Dešimtmečius interneto svetainių kūrėjai kūrė maketus naudodami žodyną, paremtą fiziniu pasauliu: viršus, apačia, kairė ir dešinė. Mes nustatydavome margin-left, padding-top ir border-right. Šis mentalinis modelis puikiai tiko, kai internetas daugiausia buvo iš kairės į dešinę, iš viršaus į apačią orientuota terpė. Tačiau internetas yra pasaulinis. Tai platforma visoms kalboms ir kultūroms, iš kurių daugelis nesilaiko šios paprastos krypties tėkmės.

Tokios kalbos kaip arabų ir hebrajų yra rašomos iš dešinės į kairę. Tradicinė japonų ir kinų kalba gali būti rašoma vertikaliai, iš viršaus į apačią ir iš dešinės į kairę. Fizinio, iš kairės į dešinę orientuoto CSS modelio primetimas šioms rašymo sistemoms lemia sugadintus maketus, prastą vartotojo patirtį ir daugybę kodo perrašymų. Būtent čia pasirodo CSS loginės savybės ir reikšmės (CSS Logical Properties and Values), kurios reiškia esminį paradigmos pokytį nuo fizinių krypčių prie srauto atžvilgiu santykinių, loginių krypčių. Nors 1 lygis padėjo pagrindus, CSS loginės savybės, 2 lygis, užbaigia vaizdą, suteikdamos įrankius, kurių mums reikia kuriant tikrai universalias, rašymo režimą palaikančias vartotojo sąsajas.

Šis išsamus vadovas leis jums gilintis į 2 lygio patobulinimus. Pradėsime nuo pagrindinių sąvokų priminimo, tada išnagrinėsime naujas savybes ir reikšmes, kurios užpildo spragas, ir galiausiai visa tai pritaikysime praktiškai, sukurdami komponentą, kuris sklandžiai prisitaiko prie bet kokio rašymo režimo. Pasiruoškite amžinai pakeisti savo požiūrį į CSS maketavimą.

Greitas priminimas: pagrindinės loginių savybių sąvokos (1 lygis)

Prieš pradedant vertinti 2 lygio papildymus, turime tvirtai suprasti 1 lygio pagrindus. Visa sistema yra pagrįsta dviem pagrindinėmis sąvokomis: rašymo režimu ir iš jo išplaukiančiomis bloko ir inline ašimis.

Keturi rašymo režimai

CSS savybė writing-mode nustato teksto išdėstymo kryptį. Nors dažnai numatytąją reikšmę priimame kaip savaime suprantamą, yra keletas reikšmių, kurios iš esmės keičia turinio tėkmę puslapyje:

• horizontal-tb: tai yra numatytasis režimas daugumai Vakarų kalbų. Tekstas teka horizontaliai (inline ašis) iš kairės į dešinę (arba iš dešinės į kairę, priklausomai nuo krypties), o eilutės dedamos viena po kitos iš viršaus į apačią (bloko ašis).
• vertical-rl: naudojama tradicinei Rytų Azijos tipografijai (pvz., japonų, kinų). Tekstas teka vertikaliai iš viršaus į apačią (inline ašis), o eilutės dedamos viena po kitos iš dešinės į kairę (bloko ašis).
• vertical-lr: panašus į aukščiau aprašytą, bet eilutės dedamos viena po kitos iš kairės į dešinę (bloko ašis). Mažiau paplitęs, bet naudojamas kai kuriuose kontekstuose, pavyzdžiui, mongolų rašte.
• sidelong-rl / sidelong-lr: tai yra specifiniams atvejams, kai norite išdėstyti simbolius ant šono. Jie yra mažiau paplitę bendrame interneto turinyje.

Svarbiausia sąvoka: bloko ir inline ašys

Tai yra svarbiausia sąvoka, kurią reikia suvokti. Loginiame pasaulyje mes nustojame galvoti apie „vertikalumą“ ir „horizontalumą“ ir pradedame galvoti apie bloko ir inline ašis. Jų orientacija visiškai priklauso nuo writing-mode.

• Inline ašis yra kryptis, kuria tekstas teka vienoje eilutėje.
• Bloko ašis yra kryptis, kuria dedamos naujos eilutės.

Pažiūrėkime, kaip tai veikia:

• Standartinėje anglų kalboje (writing-mode: horizontal-tb): inline ašis eina horizontaliai, o bloko ašis eina vertikaliai.
• Tradicinėje japonų kalboje (writing-mode: vertical-rl): inline ašis eina vertikaliai, o bloko ašis eina horizontaliai.

Kadangi šios ašys gali keistis, tokios savybės kaip width ir height tampa dviprasmiškos. Ar width yra dydis išilgai horizontalios ašies ar inline ašies? Loginės savybės išsprendžia šį dviprasmiškumą. Dabar kiekvienai ašiai turime start (pradžia) ir end (pabaiga):

• block-start: „viršus“ anglų kalboje, bet „dešinė“ vertikalioje japonų kalboje.
• block-end: „apačia“ anglų kalboje, bet „kairė“ vertikalioje japonų kalboje.
• inline-start: „kairė“ anglų kalboje, bet „viršus“ vertikalioje japonų kalboje.
• inline-end: „dešinė“ anglų kalboje, bet „apačia“ vertikalioje japonų kalboje.

Fizinių savybių atitikmenys loginėms (1 lygis)

1 lygis pristatė išsamų fizinių savybių atitikmenų rinkinį loginėms. Štai keletas svarbiausių pavyzdžių:

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

1 lygis taip pat suteikė mums naudingų sutrumpinimų, tokių kaip margin-inline (pradžiai ir pabaigai) ir padding-block (pradžiai ir pabaigai).

Sveiki atvykę į 2 lygį: kas naujo ir kodėl tai svarbu

Nors 1 lygis buvo monumentalus žingsnis į priekį, jame liko keletas pastebimų spragų. Tam tikros pagrindinės CSS savybės, tokios kaip float, clear ir resize, neturėjo loginių atitikmenų. Be to, savybių, tokių kaip border-radius, nebuvo galima valdyti logiškai, todėl kūrėjai buvo priversti grįžti prie fizinių savybių smulkiam stiliaus derinimui. Tai reiškė, kad galėjote sukurti 90% maketo su loginėmis savybėmis, bet vis tiek reikėjo fizinių perrašymų skirtingiems rašymo režimams, o tai iš dalies paneigė tikslą.

CSS loginės savybės, 2 lygis, tiesiogiai sprendžia šiuos trūkumus. Tai ne apie radikaliai naujos sistemos įvedimą, o apie 1 lygyje pradėtos sistemos užbaigimą. Tai pasiekiama dviem pagrindiniais būdais:

1. Pristatomos naujos loginės savybės ir reikšmės senesnėms CSS funkcijoms, kurios iš prigimties buvo fizinės (kaip float).
2. Pridedami loginių savybių atitikmenys sudėtingiems sutrumpinimams, kurie anksčiau buvo ignoruojami (kaip border-radius).

Su 2 lygiu visiškai srautui pavaldžios stiliaus sistemos vizija yra beveik baigta, leidžianti mums kurti sudėtingus, gražius ir tvirtus komponentus, kurie veikia visur, visiems, be jokių apėjimų ar perrašymų.

Išsami analizė: naujos loginės reikšmės ir savybės 2 lygyje

Panagrinėkime įtakingiausius papildymus, kuriuos 2 lygis įneša į mūsų kūrėjų įrankių rinkinį. Tai yra įrankiai, kurie užpildo spragas ir įgalina tikrai universalų komponentų dizainą.

Float ir Clear: loginė revoliucija

Savybė float daugelį metų buvo CSS maketavimo kertinis akmuo, tačiau jos reikšmės, left ir right, yra fizinės krypties apibrėžimas. Jei anglų kalboje paveikslėlį nustumiate į left (kairę) nuo pastraipos, tai atrodo teisingai. Bet pakeiskite dokumento kryptį į iš dešinės į kairę (RTL) arabų kalbai, ir paveikslėlis dabar yra „netinkamoje“ teksto bloko pusėje. Jis turėtų būti dešinėje, kuri yra eilutės pradžia.

2 lygis pristato du naujus, loginius raktinius žodžius savybei float:

• float: inline-start; Tai nustumia elementą į inline krypties pradžią. LTR kalbose tai yra kairė. RTL kalbose tai dešinė. Vertikaliame-rl rašymo režime tai yra viršus.
• float: inline-end; Tai nustumia elementą į inline krypties pabaigą. LTR kalbose tai dešinė. RTL kalbose tai kairė. Vertikaliame-rl rašymo režime tai yra apačia.

Panašiai, savybė clear, naudojama valdyti turinio apsupimą aplink nustumtus elementus, gauna savo loginius atitikmenis:

• clear: inline-start; Panaikina „float“ elementus inline-start pusėje.
• clear: inline-end; Panaikina „float“ elementus inline-end pusėje.

Tai keičia žaidimo taisykles. Dabar galite kurti klasikinius paveikslėlio su teksto aplenkimu maketus, kurie automatiškai prisitaiko prie bet kurios kalbos krypties be jokios papildomos CSS eilutės.

Patobulintas valdymas su loginiu dydžio keitimu

Savybė resize, dažniausiai naudojama textarea elementui, leidžia vartotojams keisti elemento dydį. Jos tradicinės reikšmės yra horizontal, vertical ir both. Bet ką reiškia „horizontalus“ vertikaliame rašymo režime? Tai vis tiek reiškia dydžio keitimą išilgai fizinės horizontalios ašies, kas gali neatitikti vartotojo ar dizainerio ketinimų. Vartotojas greičiausiai nori keisti elemento dydį išilgai jo inline ašies, kad eilutės būtų ilgesnės ar trumpesnės.

2 lygis pristato logines reikšmes savybei resize:

• resize: inline; Leidžia keisti dydį išilgai inline ašies.
• resize: block; Leidžia keisti dydį išilgai bloko ašies.

Naudojant resize: block; textarea elementui anglų kalboje, vartotojas gali jį padidinti aukštyn. Naudojant jį vertikaliame rašymo režime, vartotojas gali jį praplatinti (kas yra bloko kryptis). Tiesiog veikia.

`caption-side`: loginis lentelių antraščių pozicionavimas

Savybė caption-side nustato lentelės caption elemento vietą. Senosios reikšmės buvo top ir bottom. Vėlgi, jos yra fizinės. Jei dizainerio ketinimas yra patalpinti antraštę „prieš“ lentelės turinį, top veikia horizontaliuose rašymo režimuose. Bet vertikaliame-rl režime bloko srauto „pradžia“ yra dešinėje, o ne viršuje.

2 lygis pateikia loginį sprendimą:

• caption-side: block-start; Patalpina antraštę bloko srauto pradžioje.
• caption-side: block-end; Patalpina antraštę bloko srauto pabaigoje.

`text-align`: pamatinė loginė reikšmė

Nors reikšmės start ir end savybei text-align egzistuoja jau kurį laiką, jos yra pagrindinė loginių savybių filosofijos dalis ir verta jas pabrėžti. Naudoti text-align: left; yra dažna klaida, kuri iš karto sukelia maketavimo problemų RTL kalbose. Teisingas, modernus požiūris yra visada naudoti:

• text-align: start; Lygiuoja tekstą pagal inline krypties pradžią.
• text-align: end; Lygiuoja tekstą pagal inline krypties pabaigą.

2 lygio karūnos brangakmenis: loginis `border-radius`

Turbūt pats svarbiausias ir galingiausias 2 lygio papildymas yra savybių rinkinys, skirtas logiškai valdyti kraštinių spindulius. Anksčiau, jei norėdavote, kad kortelė turėtų užapvalintus kampus tik „viršuje“, naudodavote border-top-left-radius ir border-top-right-radius. Tai visiškai sugriūva vertikaliame rašymo režime, kur „viršutiniai“ kampai dabar yra start-start ir end-start kampai.

2 lygis pristato keturias naujas išplėstines savybes, kurios atitinka keturis elemento kampus srautui pavaldžiu būdu. Pavadinimų taisyklė yra border-[bloko-kraštas]-[inline-kraštas]-radius.

• border-start-start-radius: kampas, kur susitinka block-start ir inline-start pusės.
• border-start-end-radius: kampas, kur susitinka block-start ir inline-end pusės.
• border-end-start-radius: kampas, kur susitinka block-end ir inline-start pusės.
• border-end-end-radius: kampas, kur susitinka block-end ir inline-end pusės.

Iš pradžių tai gali būti sunku įsivaizduoti, todėl panagrinėkime atitikmenis skirtinguose rašymo režimuose:

`border-radius` atitikmenys `writing-mode: horizontal-tb` (pvz., anglų kalba)

• border-start-start-radius atitinka top-left-radius.
• border-start-end-radius atitinka top-right-radius.
• border-end-start-radius atitinka bottom-left-radius.
• border-end-end-radius atitinka bottom-right-radius.

`border-radius` atitikmenys `writing-mode: horizontal-tb` su `dir="rtl"` (pvz., arabų kalba)

Čia inline kryptis yra apversta.

• border-start-start-radius atitinka top-right-radius. (Block-start yra viršus, inline-start yra dešinė).
• border-start-end-radius atitinka top-left-radius.
• border-end-start-radius atitinka bottom-right-radius.
• border-end-end-radius atitinka bottom-left-radius.

`border-radius` atitikmenys `writing-mode: vertical-rl` (pvz., japonų kalba)

Čia abi ašys yra pasuktos.

• border-start-start-radius atitinka top-right-radius. (Block-start yra dešinė, inline-start yra viršus).
• border-start-end-radius atitinka bottom-right-radius.
• border-end-start-radius atitinka top-left-radius.
• border-end-end-radius atitinka bottom-left-radius.

Naudodami šias naujas savybes, galite apibrėžti kampų spindulius, kurie yra semantiškai susieti su turinio srautu, o ne su fiziniu ekranu. „start-start“ kampas visada bus teisingas kampas, nepriklausomai nuo kalbos ar teksto krypties.

Praktinis įgyvendinimas: globaliam naudojimui paruošto komponento kūrimas

Teorija yra puiku, bet pažiūrėkime, kaip tai veikia praktikoje. Sukursime paprastą profilio kortelės komponentą, pirmiausia naudodami senas fizines savybes, o tada jį pertvarkysime, kad naudotų modernias logines savybes iš 1 ir 2 lygio.

Kortelėje bus paveikslėlis, nustumtas į vieną pusę, pavadinimas, šiek tiek teksto ir dekoratyvinė kraštinė bei užapvalinti kampai.

„Senasis“ būdas: trapi, fizinėmis savybėmis pagrįsta kortelė

Štai kaip galėjome stilizuoti šią kortelę prieš keletą metų:

/* --- CSS (Fizinės savybės) --- */

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

}

Standartiniame anglų LTR kontekste tai atrodo gerai. Bet jei tai patalpinsime į konteinerį su dir="rtl" arba writing-mode: vertical-rl, maketas sugriūva. Dekoratyvinė kraštinė yra neteisingoje pusėje, avataras yra neteisingoje pusėje, paraštė yra neteisinga, o užapvalinti kampai yra netinkamose vietose.

„Naujasis“ būdas: tvirta, loginėmis savybėmis pagrįsta kortelė

Dabar pertvarkykime tą patį komponentą naudodami logines savybes. Naudosime savybes tiek iš 1 lygio, tiek iš naujų 2 lygio papildymų.

/* --- CSS (Loginės savybės) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` sutrumpinimas jau yra loginis! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* 2 lygio galia! */

  border-end-start-radius: 8px; /* 2 lygio galia! */

}

.logical-card .avatar {

  float: inline-start; /* 2 lygio galia! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Testavimas ir patikrinimas

Su šiuo nauju CSS galite įdėti komponentą į bet kurį konteinerį, ir jis automatiškai prisitaikys.

• LTR kontekste: atrodys identiškai originaliai fizinei versijai.
• RTL kontekste (dir="rtl"): avataras bus nustumtas į dešinę, jo paraštė bus kairėje, dekoratyvinė kraštinė bus dešinėje, o tekstas bus lygiuojamas pagal pradžią (į dešinę). Užapvalinti kampai teisingai bus viršuje dešinėje ir apačioje dešinėje. Tiesiog veikia.
• Vertikaliame kontekste (writing-mode: vertical-rl): kortelės „plotis“ (dabar jos vertikalus inline-size) bus 300px. Avataras bus nustumtas į „viršų“ (inline-start) su parašte jo „apačioje“ (inline-end). Dekoratyvinė kraštinė bus dešinėje pusėje (inline-start), o užapvalinti kampai bus viršuje dešinėje ir viršuje kairėje. Komponentas visiškai teisingai persiorientavo be jokių medijos užklausų ar perrašymų.

Naršyklių palaikymas ir atsarginiai variantai

Visa tai skamba fantastiškai, bet kaip su naršyklių palaikymu? Geros naujienos yra tai, kad 1 lygio loginių savybių palaikymas yra puikus visose moderniose naršyklėse. Jūs galite ir turėtumėte naudoti tokias savybes kaip margin-inline-start ir padding-block jau šiandien.

Naujesnių 2 lygio funkcijų palaikymas sparčiai gerėja, bet dar nėra universalus. Loginės reikšmės float, clear ir resize yra gerai palaikomos. Loginės border-radius savybės yra naujausios ir vis dar gali būti paslėptos už funkcijų vėliavėlių arba naujausiose naršyklių versijose. Kaip visada, turėtumėte pasikonsultuoti su tokiais šaltiniais kaip MDN Web Docs ar CanIUse.com, kad gautumėte naujausius suderinamumo duomenis.

Progresyvaus tobulinimo strategijos

Kadangi CSS yra sukurta būti atspari, mes galime lengvai pateikti atsarginius variantus senesnėms naršyklėms. Kaskada užtikrins, kad jei naršyklė nesupranta loginės savybės, ji tiesiog ją ignoruos ir naudos prieš tai apibrėžtą fizinę savybę.

Štai kaip galite rašyti CSS su atsarginiais variantais:

.card {

  /* Atsarginis variantas senesnėms naršyklėms */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Moderni loginė savybė, kuri perrašys atsarginį variantą */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Šis požiūris užtikrina tvirtą bazinę patirtį visiems, tuo pačiu suteikiant patobulintą, prisitaikantį maketą vartotojams su moderniomis naršyklėmis. Projektams, kuriems nereikia palaikyti kelių rašymo režimų, tai gali būti perteklinis sprendimas. Tačiau bet kuriai pasaulinei programai, dizaino sistemai ar temai tai yra tvirta ir ateičiai pritaikyta strategija.

Ateitis yra logiška: anapus 2 lygio

Perėjimas nuo fizinio prie loginio mąstymo yra vienas svarbiausių pokyčių moderniame CSS. Tai suderina mūsų stiliaus kalbą su įvairaus, pasaulinio interneto realybe. Tai mus atitraukia nuo trapių, į ekraną orientuotų apėjimų link atsparaus, į turinį orientuoto dizaino.

Ar vis dar yra spragų? Keletas. Loginės reikšmės tokioms savybėms kaip background-position ar gradientams vis dar yra aptariamos. Bet su 2 lygio išleidimu didžioji dauguma kasdienių maketavimo ir stiliaus užduočių dabar gali būti atlikta naudojant grynai loginį požiūrį.

Kvietimas kūrėjams yra aiškus: pradėkite pagal nutylėjimą naudoti logines savybes. Tegul inline-size tampa jūsų pasirinkimu vietoj width. Naudokite margin-inline vietoj atskiro kairės ir dešinės paraščių nustatymo. Tai ne tik apie skirtingų kalbų palaikymą; tai apie geresnio, atsparesnio CSS rašymą. Komponentas, sukurtas su loginėmis savybėmis, yra iš prigimties labiau pakartotinai naudojamas ir prisitaikantis, nesvarbu, ar jis naudojamas LTR, RTL, ar vertikaliame makete. Tai tiesiog geresnė inžinerija.

Išvada: priimkite srautą

CSS loginės savybės, 2 lygis, tai ne tik naujų funkcijų rinkinys; tai vizijos užbaigimas. Jis suteikia paskutines, esmines dalis, reikalingas kurti maketus, kurie gerbia natūralų jų turinio srautą, kad ir koks tas srautas būtų. Priimdami tokias savybes kaip float: inline-start ir border-start-start-radius, mes pakeliame savo amatą nuo paprasto dėžučių pozicionavimo ekrane iki tikrai globalių, įtraukių ir ateičiai pritaikytų interneto patirčių kūrimo.

Kitą kartą, kai pradėsite naują projektą ar kursite naują komponentą, sustokite prieš įvesdami margin-left. Paklauskite savęs: „Ar aš turiu omenyje kairę, ar pradžią?“ Padarę šį mažą mentalinį pokytį, prisidėsite prie labiau prisitaikančio ir prieinamesnio interneto visiems, visur.