CSS Loģiskās Īpašības 2. Līmenis: Patiesi Globāla Tīmekļa Veidošana ar Uzlabotu Rakstīšanas Režīma Atbalstu

Gadu desmitiem tīmekļa izstrādātāji ir veidojuši izkārtojumus, izmantojot vārdu krājumu, kas sakņojas fiziskajā pasaulē: top, bottom, left, un right. Mēs iestatījām margin-left, padding-top un border-right. Šis mentālais modelis mums labi kalpoja, kad tīmeklis galvenokārt bija medijs no kreisās uz labo un no augšas uz leju. Tomēr tīmeklis ir globāls. Tā ir platforma visām valodām un kultūrām, no kurām daudzas neievēro šo vienkāršo virzienu plūsmu.

Valodas, piemēram, arābu un ivrits, tiek rakstītas no labās puses uz kreiso. Tradicionālo japāņu un ķīniešu valodu var rakstīt vertikāli, no augšas uz leju un no labās puses uz kreiso. Uzspiežot fizisku, no kreisās uz labo pusi orientētu CSS modeli šīm rakstīšanas sistēmām, rodas bojāti izkārtojumi, neapmierinoša lietotāja pieredze un milzīgs daudzums koda pārrakstīšanas. Šeit talkā nāk CSS Loģiskās Īpašības un Vērtības, kas pārstāv fundamentālu paradigmas maiņu no fiziskiem virzieniem uz plūsmai relatīviem, loģiskiem virzieniem. Kamēr 1. līmenis ielika pamatus, CSS Loģiskās Īpašības 2. līmenis pabeidz kopainu, nodrošinot mums nepieciešamos rīkus, lai izveidotu patiesi universālas, rakstīšanas režīmu atpazīstošas lietotāju saskarnes.

Šī visaptverošā rokasgrāmata jūs vedīs padziļinātā ceļojumā pa 2. līmeņa uzlabojumiem. Mēs sāksim ar pamatkoncepciju atsvaidzināšanu, pēc tam izpētīsim jaunās īpašības un vērtības, kas aizpilda robus, un visbeidzot, visu pielietosim praksē, veidojot komponentu, kas nevainojami pielāgojas jebkuram rakstīšanas režīmam. Gatavojieties uz visiem laikiem mainīt savu domāšanas veidu par CSS izkārtojumu.

Ātrs Atgādinājums: Loģisko Īpašību Pamatkoncepcijas (1. Līmenis)

Pirms mēs varam novērtēt 2. līmeņa papildinājumus, mums ir jābūt stabilai izpratnei par 1. līmeņa ieliktajiem pamatiem. Visa sistēma ir balstīta uz divām galvenajām koncepcijām: rakstīšanas režīmu (writing mode) un no tā izrietošajām bloka (block) un rindas (inline) asīm.

Četri Rakstīšanas Režīmi

CSS īpašība writing-mode nosaka teksta izkārtojuma virzienu. Lai gan mēs bieži uztveram noklusējuma vērtību par pašsaprotamu, ir vairākas vērtības, kas fundamentāli maina satura plūsmu lapā:

• horizontal-tb: Šis ir noklusējums lielākajai daļai rietumu valodu. Teksts plūst horizontāli (rindas ass) no kreisās uz labo pusi (vai no labās uz kreiso, atkarībā no virziena), un rindas tiek kārtotas no augšas uz leju (bloka ass).
• vertical-rl: Izmanto tradicionālajai Austrumāzijas tipogrāfijai (piemēram, japāņu, ķīniešu). Teksts plūst vertikāli no augšas uz leju (rindas ass), un rindas tiek kārtotas no labās uz kreiso pusi (bloka ass).
• vertical-lr: Līdzīgi kā iepriekšējais, bet rindas tiek kārtotas no kreisās uz labo pusi (bloka ass). Retāk sastopams, bet tiek izmantots dažos kontekstos, piemēram, mongoļu rakstībā.
• sidelong-rl / sidelong-lr: Šie ir paredzēti specifiskiem lietošanas gadījumiem, kad vēlaties izkārtot rakstzīmes uz sāniem. Tie ir retāk sastopami vispārējā tīmekļa saturā.

Būtiskākā Koncepcija: Bloka Ass pret Rindas Asi

Šī ir vissvarīgākā koncepcija, kas jāaptver. Loģiskajā pasaulē mēs pārstājam domāt par "vertikālo" un "horizontālo" un sākam domāt bloka un rindas asu terminos. To orientācija ir pilnībā atkarīga no writing-mode.

• Rindas (Inline) ass ir virziens, kurā teksts plūst vienā rindā.
• Bloka (Block) ass ir virziens, kurā tiek sakārtotas jaunas rindas.

Apskatīsim, kā tas izpaužas:

• Standarta angļu valodā (writing-mode: horizontal-tb): Rindas (inline) ass stiepjas horizontāli, un bloka (block) ass stiepjas vertikāli.
• Tradicionālajā japāņu valodā (writing-mode: vertical-rl): Rindas (inline) ass stiepjas vertikāli, un bloka (block) ass stiepjas horizontāli.

Tā kā šīs asis var mainīties vietām, tādas īpašības kā width un height kļūst neskaidras. Vai width ir izmērs pa horizontālo asi vai rindas asi? Loģiskās īpašības atrisina šo neskaidrību. Mums tagad ir start un end katrai asij:

• block-start: Angļu valodā "augšā", bet vertikālā japāņu valodā "pa labi".
• block-end: Angļu valodā "apakšā", bet vertikālā japāņu valodā "pa kreisi".
• inline-start: Angļu valodā "pa kreisi", bet vertikālā japāņu valodā "augšā".
• inline-end: Angļu valodā "pa labi", bet vertikālā japāņu valodā "apakšā".

Fizisko Īpašību Kartēšana uz Loģiskajām (1. Līmenis)

1. līmenis ieviesa visaptverošu kartējumu kopu no fiziskajām uz loģiskajām īpašībām. Šeit ir daži galvenie piemēri:

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

1. līmenis mums deva arī noderīgus saīsinājumus, piemēram, margin-inline (sākumam un beigām) un padding-block (sākumam un beigām).

Laipni lūgti 2. Līmenī: Kas Jauns un Kāpēc Tas ir Svarīgi

Lai gan 1. līmenis bija monumentāls solis uz priekšu, tas atstāja dažus pamanāmus robus. Dažām fundamentālām CSS īpašībām, piemēram, float, clear un resize, nebija loģisku ekvivalentu. Turklāt tādas īpašības kā border-radius nevarēja kontrolēt loģiski, liekot izstrādātājiem atgriezties pie fiziskajām īpašībām smalkākai stilizācijai. Tas nozīmēja, ka jūs varējāt izveidot 90% izkārtojuma ar loģiskām īpašībām, bet joprojām bija nepieciešami fiziski pārrakstījumi dažādiem rakstīšanas režīmiem, daļēji mazinot mērķi.

CSS Loģiskās Īpašības 2. līmenis tieši risina šīs nepilnības. Runa nav par radikāli jaunas sistēmas ieviešanu, bet gan par 1. līmenī iesāktās sistēmas pabeigšanu. Tas tiek panākts divos galvenajos veidos:

1. Jaunu loģisko īpašību un vērtību ieviešana vecākām CSS funkcijām, kas bija raksturīgi fiziskas (piemēram, float).
2. Loģisko īpašību kartējumu pievienošana sarežģītiem saīsinājumiem, kas iepriekš tika ignorēti (piemēram, border-radius).

Ar 2. līmeni pilnībā plūsmai relatīvas stilizācijas sistēmas vīzija ir gandrīz pabeigta, ļaujot mums veidot sarežģītus, skaistus un robustus komponentus, kas darbojas visur, visiem, bez liekiem labojumiem vai pārrakstījumiem.

Padziļināts Ieskats: Jaunās Loģiskās Vērtības un Īpašības 2. Līmenī

Izpētīsim ietekmīgākos papildinājumus, ko 2. līmenis ienes mūsu izstrādātāju rīkkopā. Šie ir rīki, kas aizpilda robus un dod iespēju veidot patiesi universālu komponentu dizainu.

Float un Clear: Loģiskā Revolūcija

Īpašība float gadiem ilgi ir bijusi CSS izkārtojuma stūrakmens, taču tās vērtības, left un right, ir fiziska virziena definīcija. Ja jūs novietojat attēlu pa kreisi no rindkopas angļu valodā, tas izskatās pareizi. Bet, pārslēdzot dokumenta virzienu no labās uz kreiso (RTL) arābu valodai, attēls tagad ir teksta bloka "nepareizajā" pusē. Tam vajadzētu būt labajā pusē, kas ir rindas sākums.

2. līmenis ievieš divus jaunus, loģiskus atslēgvārdus float īpašībai:

• float: inline-start; Novieto elementu rindas virziena sākumā. LTR valodās tā ir kreisā puse. RTL valodās tā ir labā puse. Vertikālā-rl rakstīšanas režīmā tas ir augšā.
• float: inline-end; Novieto elementu rindas virziena beigās. LTR valodās tā ir labā puse. RTL valodās tā ir kreisā puse. Vertikālā-rl rakstīšanas režīmā tas ir apakšā.

Līdzīgi, clear īpašība, ko izmanto, lai kontrolētu satura aplaušanu ap elementiem ar float, saņem savus loģiskos ekvivalentus:

• clear: inline-start; Notīra float elementus rindas sākuma pusē.
• clear: inline-end; Notīra float elementus rindas beigu pusē.

Tas maina spēles noteikumus. Tagad jūs varat izveidot klasiskus attēla ar teksta aplaušanu izkārtojumus, kas automātiski pielāgojas jebkuram valodas virzienam bez vienas papildu CSS rindas.

Uzlabota Kontrole ar Loģisku Izmēra Maiņu

Īpašība resize, ko parasti izmanto uz textarea, ļauj lietotājiem mainīt elementa izmēru. Tās tradicionālās vērtības ir horizontal, vertical un both. Bet ko "horizontāls" nozīmē vertikālā rakstīšanas režīmā? Tas joprojām nozīmē izmēra maiņu pa fizisko horizontālo asi, kas var nebūt tas, ko lietotājs vai dizaineris ir iecerējis. Lietotājs, visticamāk, vēlas mainīt elementa izmēru pa tā rindas asi, lai padarītu rindas garākas vai īsākas.

2. līmenis ievieš loģiskas vērtības priekš resize:

• resize: inline; Atļauj mainīt izmēru pa rindas asi.
• resize: block; Atļauj mainīt izmēru pa bloka asi.

Izmantojot resize: block; uz textarea angļu valodā, lietotājs var to padarīt augstāku. Izmantojot to vertikālā rakstīšanas režīmā, lietotājs var to padarīt platāku (kas ir bloka virziens). Tas vienkārši darbojas.

`caption-side`: Loģiska Pozicionēšana Tabulu Virsrakstiem

Īpašība caption-side nosaka tabulas caption izvietojumu. Vecās vērtības bija top un bottom. Atkal, tās ir fiziskas. Ja dizainera nolūks ir novietot virsrakstu "pirms" tabulas satura, top der horizontāliem rakstīšanas režīmiem. Bet vertikālā-rl režīmā bloka plūsmas "sākums" ir labajā pusē, nevis augšā.

2. līmenis nodrošina loģisku risinājumu:

• caption-side: block-start; Novieto virsrakstu bloka plūsmas sākumā.
• caption-side: block-end; Novieto virsrakstu bloka plūsmas beigās.

`text-align`: Fundamentāla Loģiskā Vērtība

Lai gan vērtības start un end priekš text-align ir pieejamas jau kādu laiku, tās ir loģisko īpašību filozofijas pamatelements un ir vērts tās atkārtoti uzsvērt. Izmantot text-align: left; ir izplatīta kļūda, kas nekavējoties rada izkārtojuma problēmas RTL valodās. Pareizā, mūsdienīgā pieeja ir vienmēr izmantot:

• text-align: start; Līdzina tekstu rindas virziena sākumā.
• text-align: end; Līdzina tekstu rindas virziena beigās.

2. Līmeņa Kronis: Loģiskais `border-radius`

Iespējams, visnozīmīgākais un jaudīgākais papildinājums 2. līmenī ir īpašību kopums, lai loģiski kontrolētu apmaļu noapaļojumus (border radii). Iepriekš, ja jūs vēlējāties, lai kartei būtu noapaļoti stūri tikai "augšpusē", jūs izmantotu border-top-left-radius un border-top-right-radius. Tas pilnībā sabrūk vertikālā rakstīšanas režīmā, kur "augšējie" stūri tagad ir start-start un end-start stūri.

2. līmenis ievieš četras jaunas garās īpašības, kas atbilst četriem elementa stūriem plūsmai relatīvā veidā. Nosaukumu veidošanas konvencija ir border-[bloka-mala]-[rindas-mala]-radius.

• border-start-start-radius: Stūris, kurā satiekas bloka sākuma un rindas sākuma malas.
• border-start-end-radius: Stūris, kurā satiekas bloka sākuma un rindas beigu malas.
• border-end-start-radius: Stūris, kurā satiekas bloka beigu un rindas sākuma malas.
• border-end-end-radius: Stūris, kurā satiekas bloka beigu un rindas beigu malas.

Sākumā to var būt grūti vizualizēt, tāpēc kartēsim to dažādiem rakstīšanas režīmiem:

`border-radius` Kartēšana `writing-mode: horizontal-tb` (piem., angļu val.)

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

`border-radius` Kartēšana `writing-mode: horizontal-tb` ar `dir="rtl"` (piem., arābu val.)

Šeit rindas virziens ir apgriezts.

• border-start-start-radius atbilst top-right-radius. (Bloka sākums ir augšā, rindas sākums ir pa labi).
• border-start-end-radius atbilst top-left-radius.
• border-end-start-radius atbilst bottom-right-radius.
• border-end-end-radius atbilst bottom-left-radius.

`border-radius` Kartēšana `writing-mode: vertical-rl` (piem., japāņu val.)

Šeit abas asis ir pagrieztas.

• border-start-start-radius atbilst top-right-radius. (Bloka sākums ir pa labi, rindas sākums ir augšā).
• border-start-end-radius atbilst bottom-right-radius.
• border-end-start-radius atbilst top-left-radius.
• border-end-end-radius atbilst bottom-left-radius.

Izmantojot šīs jaunās īpašības, jūs varat definēt stūru noapaļojumus, kas ir semantiski saistīti ar satura plūsmu, nevis fizisko ekrānu. "Start-start" stūris vienmēr būs pareizais stūris, neatkarīgi no valodas vai teksta virziena.

Praktiska Ieviešana: Globāli Gatava Komponenta Veidošana

Teorija ir lieliska, bet apskatīsim, kā tas darbojas praksē. Mēs izveidosim vienkāršu profila kartes komponentu, vispirms izmantojot vecās fiziskās īpašības, un pēc tam to pārveidosim, lai izmantotu modernas loģiskās īpašības gan no 1., gan 2. līmeņa.

Kartei būs attēls, kas novietots vienā pusē, virsraksts, nedaudz teksta, kā arī dekoratīva apmale un noapaļoti stūri.

"Vecais" Veids: Trausla, Fizisko Īpašību Karte

Lūk, kā mēs varētu būt stilizējuši šo karti pirms dažiem gadiem:

/* --- CSS (Fiziskās īpašības) --- */

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

}

Standarta angļu LTR kontekstā tas izskatās labi. Bet, ja mēs to ievietojam konteinerā ar dir="rtl" vai writing-mode: vertical-rl, izkārtojums sabrūk. Dekoratīvā apmale ir nepareizajā pusē, avatārs ir nepareizajā pusē, atkāpe ir nepareiza, un noapaļotie stūri ir nepareizi novietoti.

"Jaunais" Veids: Robusta, Loģisko Īpašību Karte

Tagad pārveidosim to pašu komponentu, izmantojot loģiskās īpašības. Mēs izmantosim īpašības gan no 1. līmeņa, gan jaunos papildinājumus no 2. līmeņa.

/* --- CSS (Loģiskās īpašības) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` saīsinājums jau ir loģisks! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* 2. līmeņa spēks! */

  border-end-start-radius: 8px; /* 2. līmeņa spēks! */

}

.logical-card .avatar {

  float: inline-start; /* 2. līmeņa spēks! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Testēšana un Pārbaude

Ar šo jauno CSS jūs varat ievietot komponentu jebkurā konteinerā, un tas automātiski pielāgosies.

• LTR kontekstā: Tas izskatīsies identiski oriģinālajai fiziskajai versijai.
• RTL kontekstā (dir="rtl"): Avatārs tiks novietots pa labi, tā atkāpe būs kreisajā pusē, dekoratīvā apmale būs labajā pusē, un teksts būs līdzināts sākumam (pa labi). Noapaļotie stūri pareizi būs augšējā labajā un apakšējā labajā stūrī. Tas vienkārši darbojas.
• Vertikālā kontekstā (writing-mode: vertical-rl): Kartes "platums" (tagad tās vertikālais inline-size) būs 300px. Avatārs tiks novietots "augšā" (inline-start) ar atkāpi tā "apakšā" (inline-end). Dekoratīvā apmale būs labajā pusē (inline-start), un noapaļotie stūri būs augšējā labajā un augšējā kreisajā stūrī. Komponents ir pilnībā pārorientējies pareizi bez jebkādiem mediju vaicājumiem vai pārrakstījumiem.

Pārlūkprogrammu Atbalsts un Rezerves Varianti

Tas viss izklausās fantastiski, bet kā ar pārlūkprogrammu atbalstu? Labā ziņa ir tā, ka 1. līmeņa loģisko īpašību atbalsts ir lielisks visās mūsdienu pārlūkprogrammās. Jūs varat un jums vajadzētu šodien izmantot tādas īpašības kā margin-inline-start un padding-block.

Atbalsts jaunākajām 2. līmeņa funkcijām strauji uzlabojas, bet vēl nav universāls. Loģiskās vērtības float, clear un resize ir labi atbalstītas. Loģiskās border-radius īpašības ir jaunākās un joprojām var būt aiz funkciju karogiem vai tikai jaunākajās pārlūkprogrammu versijās. Kā vienmēr, jums vajadzētu konsultēties ar resursiem, piemēram, MDN Web Docs vai CanIUse.com, lai iegūtu visjaunākos saderības datus.

Progresīvās Uzlabošanas Stratēģijas

Tā kā CSS ir izstrādāts tā, lai būtu noturīgs, mēs varam viegli nodrošināt rezerves variantus vecākām pārlūkprogrammām. Kaskāde nodrošinās, ka, ja pārlūkprogramma nesaprot loģisku īpašību, tā to vienkārši ignorēs un izmantos pirms tās definēto fizisko īpašību.

Lūk, kā jūs varat rakstīt CSS, kas ir gatavs rezerves variantiem:

.card {

  /* Rezerves variants vecākām pārlūkprogrammām */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Mūsdienīga loģiskā īpašība, kas pārrakstīs rezerves variantu */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Šī pieeja nodrošina stabilu pamata pieredzi visiem, vienlaikus piedāvājot uzlabotu, adaptīvu izkārtojumu lietotājiem ar mūsdienu pārlūkprogrammām. Projektiem, kuriem nav nepieciešams atbalstīt vairākus rakstīšanas režīmus, tas varētu būt pārmērīgi. Bet jebkurai globālai lietojumprogrammai, dizaina sistēmai vai tēmai šī ir robusta un nākotnes droša stratēģija.

Nākotne ir Loģiska: Aiz 2. Līmeņa Robežām

Pāreja no fiziskas uz loģisku domāšanu ir viena no svarīgākajām pārmaiņām mūsdienu CSS. Tā saskaņo mūsu stilizācijas valodu ar daudzveidīga, globāla tīmekļa realitāti. Tā mūs virza prom no trausliem, uz ekrānu orientētiem labojumiem uz noturīgu, uz saturu orientētu dizainu.

Vai joprojām ir robi? Daži. Loģiskās vērtības tādām īpašībām kā background-position vai gradientiem joprojām tiek apspriestas. Bet ar 2. līmeņa izlaišanu lielāko daļu ikdienas izkārtojuma un stilizācijas uzdevumu tagad var paveikt, izmantojot tīri loģisku pieeju.

Aicinājums rīkoties izstrādātājiem ir skaidrs: sāciet pēc noklusējuma izmantot loģiskās īpašības. Padariet inline-size par savu izvēli width vietā. Izmantojiet margin-inline, nevis atsevišķi iestatiet kreiso un labo atkāpi. Tas nav tikai par dažādu valodu atbalstu; tas ir par labāka, noturīgāka CSS rakstīšanu. Komponents, kas veidots ar loģiskām īpašībām, ir pēc būtības atkārtoti lietojams un pielāgojamāks, neatkarīgi no tā, vai to izmanto LTR, RTL vai vertikālā izkārtojumā. Tā vienkārši ir labāka inženierija.

Noslēgums: Pieņemiet Plūsmu

CSS Loģiskās Īpašības 2. līmenis nav tikai jaunu funkciju krājums; tā ir vīzijas pabeigšana. Tas nodrošina pēdējos, izšķirošos elementus, kas nepieciešami, lai veidotu izkārtojumus, kuri respektē sava satura dabisko plūsmu, lai kāda tā arī būtu. Pieņemot tādas īpašības kā float: inline-start un border-start-start-radius, mēs paceļam savu amatu no vienkāršas kastīšu pozicionēšanas uz ekrāna uz patiesi globālu, iekļaujošu un nākotnes drošu tīmekļa pieredžu projektēšanu.

Nākamreiz, kad sākat jaunu projektu vai veidojat jaunu komponentu, apstājieties, pirms rakstāt margin-left. Pajautājiet sev: "Vai es domāju pa kreisi, vai es domāju sākumu?" Veicot šo nelielo mentālo maiņu, jūs veicināsiet pielāgojamāka un pieejamāka tīmekļa izveidi ikvienam un visur.