CSS-i loogilised omadused: juhend kirjaviisiga kohanemiseks globaalses veebidisainis

Tänapäeva globaliseerunud maailmas peavad veebisaidid ja veebirakendused arvestama erinevate keelte ja kirjasüsteemidega. Traditsioonilised CSS-i omadused nagu `left`, `right`, `top` ja `bottom` on olemuslikult seotud ekraani füüsiliste mõõtmetega ja eeldavad horisontaalset, vasakult paremale kirjutamissuunda. See võib põhjustada märkimisväärseid väljakutseid paigutuste kohandamisel paremalt vasakule (RTL) keelte jaoks, nagu araabia ja heebrea keel, või vertikaalsete kirjaviiside jaoks, mis on levinud Ida-Aasia keeltes, nagu jaapani ja hiina keel. CSS-i loogilised omadused pakuvad lahenduse, võimaldades määratleda paigutussuhteid sisu voo alusel, mitte fikseeritud füüsiliste suundade järgi.

Kirjaviiside ja nende mõju paigutusele mõistmine

Enne loogilistesse omadustesse süvenemist on oluline mõista kirjaviisi kontseptsiooni. Kirjaviis määratleb suuna, milles tekst voolab. Kõige levinumad kirjaviisid on:

• `horizontal-tb` (horisontaalne ülevalt-alla): Tekst voolab horisontaalselt vasakult paremale (või paremalt vasakule), rida-realt, ülevalt alla. See on enamiku lääne keelte vaikimisi kirjaviis.
• `vertical-rl` (vertikaalne paremalt-vasakule): Tekst voolab vertikaalselt ülevalt alla, veerg-veerult, paremalt vasakule. Kasutatakse sageli traditsioonilises Ida-Aasia tüpograafias.
• `vertical-lr` (vertikaalne vasakult-paremale): Tekst voolab vertikaalselt ülevalt alla, veerg-veerult, vasakult paremale. Kasutatakse samuti Ida-Aasia tüpograafias, kuigi harvemini kui `vertical-rl`.

Kirjaviis mõjutab elementide paigutust ja suurust. Näiteks `horizontal-tb` režiimis määrab omadus 'width' horisontaalse suuruse ja 'height' vertikaalse suuruse. Kuid `vertical-rl` režiimis määrab 'width' vertikaalse suuruse ja 'height' horisontaalse suuruse. See tähendab, et ainult füüsilistele omadustele tuginemine võib erinevate kirjaviisidega tegeledes luua ebajärjekindlaid ja katkiseid paigutusi.

Sissejuhatus CSS-i loogilistesse omadustesse

CSS-i loogilised omadused pakuvad lahenduse, abstraheerides füüsilised suunad ja keskendudes sisu loogilisele voole. `left`, `right`, `top` ja `bottom` asemel kasutate omadusi nagu `inline-start`, `inline-end`, `block-start` ja `block-end`. Need omadused on suhtelised kirjaviisiga, tagades, et teie paigutus kohandub õigesti, olenemata teksti suunast.

Põhilised loogilised omadused

Siin on ülevaade kõige sagedamini kasutatavatest loogilistest omadustest ja nende vastavatest füüsilistest omadustest, mis põhinevad `writing-mode` ja `direction` väärtustel:

• `inline-start`: Esindab tekstisisese suuna algusserva (suund, milles tekst voolab rea piires).
  • `horizontal-tb` ja `vertical-lr` puhul: Samaväärne omadusega `left`.
  • `horizontal-rtl` puhul: Samaväärne omadusega `right`.
  • `vertical-rl` puhul: Samaväärne omadusega `right`.
• `inline-end`: Esindab tekstisisese suuna lõpuserva.
  • `horizontal-tb` ja `vertical-lr` puhul: Samaväärne omadusega `right`.
  • `horizontal-rtl` puhul: Samaväärne omadusega `left`.
  • `vertical-rl` puhul: Samaväärne omadusega `left`.
• `block-start`: Esindab ploki suuna algusserva (suund, milles tekstiplokid voolavad).
  • `horizontal-tb` ja `horizontal-rtl` puhul: Samaväärne omadusega `top`.
  • `vertical-rl` ja `vertical-lr` puhul: Samaväärne omadusega `top`.
• `block-end`: Esindab ploki suuna lõpuserva.
  • `horizontal-tb` ja `horizontal-rtl` puhul: Samaväärne omadusega `bottom`.
  • `vertical-rl` ja `vertical-lr` puhul: Samaväärne omadusega `bottom`.

Loogilised omadused on olemas ka suuruse, polsterduse ja veerisete jaoks:

• Suurused:
  • `inline-size`: Esindab suurust tekstisiseses suunas (laius horisontaalsetes kirjaviisides, kõrgus vertikaalsetes kirjaviisides).
  • `block-size`: Esindab suurust ploki suunas (kõrgus horisontaalsetes kirjaviisides, laius vertikaalsetes kirjaviisides).
• Polsterdus (Padding):
  • `padding-inline-start`, `padding-inline-end`, `padding-block-start`, `padding-block-end`
• Veeris (Margin):
  • `margin-inline-start`, `margin-inline-end`, `margin-block-start`, `margin-block-end`
• Äärised (Border):
  • `border-inline-start`, `border-inline-end`, `border-block-start`, `border-block-end` (ja seotud omadused nagu `border-inline-start-width`, `border-inline-start-style`, `border-inline-start-color`)

Kirjaviisi peegeldavad väärtused

• Omadus `float`:
  • `float:left` ja `float:right` asemel kasutage `float: inline-start` ja `float: inline-end`. Need väärtused kohanduvad kirjaviisiga, pannes elemendi vastavalt rea algusesse või lõppu ujuma.
• Omadus `clear`:
  • Samamoodi asendage `clear: left` ja `clear: right` väärtustega `clear: inline-start` ja `clear: inline-end`, et tühistada ujumisi vastavalt kirjaviisi suunale.

Loogiliste omaduste kasutamise praktilised näited

Illustreerime loogiliste omaduste eeliseid mõne praktilise näitega.

Näide 1: Lihtne paigutus RTL toega

Kujutage ette lihtsat paigutust külgriba ja põhisisu alaga. Traditsioonilist CSS-i kasutades võiksite külgriba jaoks kasutada `float: left` ja põhisisu jaoks vasakpoolset veerist.

            
.sidebar {
 float: left;
 width: 200px;
}

.main-content {
 margin-left: 220px; /* 200px külgriba laius + 20px veeris */
}

            

              
                Copy
              
            
          

See töötab hästi LTR keelte puhul, kuid RTL puhul oleks külgriba valel poolel ja veeris oleks vale. Loogiliste omadustega saate selle ümber kirjutada järgmiselt:

            
.sidebar {
 float: inline-start;
 width: 200px;
}

.main-content {
 margin-inline-start: 220px; /* 200px külgriba laius + 20px veeris */
}

            

              
                Copy
              
            
          

Nüüd ujub külgriba tekstisisese suuna algusesse, mis on LTR puhul vasakul ja RTL puhul paremal. Ka `margin-inline-start` rakendub õigele poolele, tagades paigutuse järjepidevuse.

Näide 2: Polsterduse kohandamine erinevatele kirjaviisidele

Kujutage ette nuppu polsterdusega. Traditsioonilist CSS-i kasutades võiksite polsterduse määratleda nii:

            
.button {
 padding: 10px 20px;
}

            

              
                Copy
              
            
          

See töötab horisontaalsete kirjaviiside puhul, aga kui soovite toetada vertikaalset kirja, rakenduks polsterdus valesti. Loogilisi omadusi kasutades saate polsterdust kohandada:

            
.button {
 padding-inline-start: 20px;
 padding-inline-end: 20px;
 padding-block-start: 10px;
 padding-block-end: 10px;
}

            

              
                Copy
              
            
          

See tagab, et nupul on õige polsterdus olenemata kirjaviisist. Horisontaalsetes kirjaviisides rakendub tekstisisene polsterdus vasakule ja paremale ning ploki polsterdus üles ja alla. Vertikaalsetes kirjaviisides rakendub tekstisisene polsterdus üles ja alla ning ploki polsterdus vasakule ja paremale.

Näide 3: Paindliku navigatsioonimenüü loomine

Kujutage ette horisontaalset navigatsioonimenüüd, kus soovite lisada elementide vahele tühikut. Traditsioonilise CSS-iga võiksite rakendada veerise iga elemendi paremale küljele (välja arvatud viimane):

            
.nav-item {
 margin-right: 10px;
}

.nav-item:last-child {
 margin-right: 0;
}

            

              
                Copy
              
            
          

See töötab LTR puhul hästi, kuid RTL puhul peaks veeris olema vasakul. Kasutades loogilisi omadusi:

            
.nav-item {
 margin-inline-end: 10px;
}

.nav-item:last-child {
 margin-inline-end: 0;
}

            

              
                Copy
              
            
          

Nüüd rakendatakse veeris tekstisisese suuna lõppu, mis on LTR puhul paremal ja RTL puhul vasakul. See väldib vajadust eraldi CSS-reeglite järele erinevate suundade jaoks.

CSS-i loogiliste omaduste kasutamise eelised

CSS-i loogiliste omaduste kasutamine pakub mitmeid eeliseid:

• Parem rahvusvahelistamine (I18N) ja lokaliseerimine (L10N): Muudab lihtsamaks veebisaitide loomise, mis toetavad mitut keelt ja kirjasüsteemi.
• Vähendatud koodi dubleerimine: Väldib vajadust eraldi CSS-reeglite järele erinevate suundade jaoks, mis viib puhtama ja paremini hooldatava koodini.
• Parem paindlikkus ja kohanemisvõime: Loob paigutusi, mis kohanduvad kergesti erinevate ekraanisuuruste, seadmete ja kirjaviisidega.
• Suurenenud ligipääsetavus: Parandab puuetega kasutajate kasutajakogemust, tagades sisu esitamise järjepideval ja ennustataval viisil.
• Tulevikukindlus: Uute kirjaviiside ja paigutuste tekkimisel tagavad loogilised omadused, et teie kood jääb ühilduvaks ja kohandatavaks.

Veebilehitsejate tugi ja varulahendused

Enamik kaasaegseid brausereid toetab nüüd CSS-i loogilisi omadusi. Vanemate brauserite jaoks, mis seda ei tee, saate aga kasutada funktsioonipäringuid (`@supports`), et pakkuda varuväärtusi traditsiooniliste CSS-i omadustega.

            
.element {
 left: 10px; /* Varulahendus vanematele brauseritele */
 margin-left: 10px; /* Varulahendus vanematele brauseritele */
}

@supports (inline-start: 10px) {
 .element {
 left: auto; /* Tühista varulahendus */
 margin-left: auto; /* Tühista varulahendus */
 inline-start: 10px;
 margin-inline-start: 10px;
 }
}

            

              
                Copy
              
            
          

See tagab, et teie paigutus töötab korrektselt nii kaasaegsetes kui ka vanemates brauserites.

Parimad praktikad loogiliste omaduste rakendamiseks

Siin on mõned parimad praktikad, mida loogiliste omaduste rakendamisel meeles pidada:

• Alustage loogilisest: Oma paigutust kujundades mõelge sisu voo, mitte fikseeritud füüsiliste suundade terminites.
• Kasutage loogilisi omadusi järjepidevalt: Asendage kõik füüsiliste omaduste esinemised nende loogiliste vastetega, et tagada järjepidevus ja vältida ootamatut käitumist.
• Pakkuge vanematele brauseritele varulahendusi: Kasutage funktsioonipäringuid, et pakkuda varuväärtusi brauseritele, mis ei toeta loogilisi omadusi.
• Testige põhjalikult: Testige oma paigutust erinevates kirjaviisides (LTR, RTL, vertikaalne), et tagada selle korrektne kohandumine.
• Arvestage ligipääsetavusega: Veenduge, et teie paigutus on ligipääsetavuse juhiseid järgides puuetega kasutajatele kättesaadav.
• Dokumenteerige oma kood: Lisage oma koodile kommentaare, et selgitada, miks te kasutate loogilisi omadusi ja kuidas need töötavad. See muudab teistel arendajatel teie koodi mõistmise ja hooldamise lihtsamaks.

Põhipaigutusest kaugemale: loogilised omadused ja komponentide disain

Loogilised omadused ei ole kasulikud ainult lehekülje tasemel paigutuste jaoks; need on uskumatult võimsad korduvkasutatavate ja kohandatavate kasutajaliidese komponentide ehitamiseks. Komponentide, nagu kaartide, nuppude või vormielementide kujundamisel tagab loogiliste omaduste kasutamine nende korrektse kuvamise olenemata veebisaidi üldisest suunast või kuvatavast keelest. See on eriti oluline disainisüsteemide ja komponenditeekide jaoks, mida tuleb kasutada laias valikus projektides ja rahvusvahelistes sihtrühmades.

Näiteks kujutage ette kaardikomponenti, millel on pealkiri, kirjeldus ja tegevusele kutsuv nupp. Nupu paigutus võib sõltuda kirjutamissuunast. LTR keeles võite soovida, et nupp oleks joondatud paremale, samas kui RTL keeles peaks see olema joondatud vasakule. Kasutades nupul `margin-inline-start: auto` lükatakse see automaatselt sobivasse serva vastavalt suunale, ilma et oleks vaja eraldi CSS-reegleid LTR ja RTL jaoks.

Globaalsed kaalutlused: tüpograafia ja fondivalik

Globaalsele sihtrühmale disainides on tüpograafia ja fondivalik sama olulised kui paigutus. Kõik fondid ei toeta kõiki keeli ja märgistikke. On ülioluline valida fondid, mis on loetavad ja sobivad sihtkeelte jaoks. Näiteks font, mis näeb inglise keele jaoks suurepärane välja, võib olla araabia või hiina keele jaoks täiesti loetamatu.

Kaaluge veebikindlate fontide või fondiperede kasutamist, mis pakuvad laia keeletuge. Teenused nagu Google Fonts pakuvad laia valikut tasuta ja avatud lähtekoodiga fonte, millest paljud sisaldavad glüüfe mitme keele jaoks. Kohandatud fontide kasutamisel veenduge, et kaasate fondifailid kõigi vajalike märgivahemike jaoks, et vältida renderdamisprobleeme.

Samuti pöörake tähelepanu fondi suurusele ja reavahele. Mõned keeled, nagu hiina keel, nõuavad loetavuse tagamiseks suuremaid fondisuurusi. Reavahe reguleerimine võib samuti parandada loetavust, eriti keeruliste kirjasüsteemide või pikkade sõnadega keelte puhul.

Veebidisaini tulevik: rahvusvahelistumise omaksvõtmine

CSS-i loogilised omadused on oluline tööriist tõeliselt rahvusvaheliste ja ligipääsetavate veebidisainide loomiseks. Neid omadusi omaks võttes saate ehitada paindlikke paigutusi, mis kohanduvad erinevate keelte, kirjasüsteemide ja kasutajaeelistustega, parandades kasutajakogemust globaalsele sihtrühmale. Veebi arenedes muutub rahvusvahelistamine üha olulisemaks ning CSS-i loogilised omadused mängivad veebidisaini tuleviku kujundamisel otsustavat rolli.

Edasine õpe ja ressursid

• MDN Web Docs: CSS-i loogilised omadused ja väärtused
• CSS Tricks: CSS-i loogiliste omaduste mõistmine
• W3C Specifications: CSS-i loogilised omadused ja väärtused, tase 1

Mõistes ja kasutades CSS-i loogilisi omadusi, saate luua veebikogemusi, mis on tõeliselt globaalsed ja kõigile kättesaadavad, olenemata nende keelest või asukohast. Võtke aega nende võimsate tööriistade õppimiseks ja ehitage parem, kaasavam veeb.