Globaalsete paigutuste loomine: põhjalik ülevaade CSS-i loogilistest omadustest

Tänapäeva ühendatud maailmas peavad veebisaidid teenindama mitmekesist globaalset publikut. See tähendab erinevate keelte ja kirjutusrežiimide toetamist, alates vasakult paremale (LTR) kuni paremalt vasakule (RTL) ja isegi vertikaalse kirjutamiseni. Traditsioonilised CSS-i omadused nagu left, right, top ja bottom on oma olemuselt suunast sõltuvad, mis muudab erinevate kirjutusrežiimidega sujuvalt kohanduvate paigutuste loomise keeruliseks. Siin tulevad appi CSS-i loogilised omadused.

Mis on CSS-i loogilised omadused?

CSS-i loogilised omadused on CSS-i omaduste kogum, mis määratlevad paigutuse suunad sisu voo, mitte füüsiliste suundade alusel. Need abstraheerivad ekraani füüsilise orientatsiooni, võimaldades teil määratleda paigutusreegleid, mis kehtivad ühtlaselt, olenemata kirjutusrežiimist või suunast.

Selle asemel, et mõelda terminites left ja right, mõtlete terminites start ja end. Selle asemel, et mõelda top ja bottom, mõtlete terminites block-start ja block-end. Brauser kaardistab need loogilised suunad automaatselt sobivateks füüsilisteks suundadeks vastavalt elemendi kirjutusrežiimile.

Põhimõisted: kirjutusrežiimid ja teksti suund

Enne konkreetsete omaduste juurde sukeldumist on oluline mõista kahte põhimõistet:

Kirjutusrežiimid

Kirjutusrežiimid määravad suuna, milles tekstiridu paigutatakse. Kaks kõige levinumat kirjutusrežiimi on:

horizontal-tb: Horisontaalne ülevalt alla (standard keelte puhul nagu eesti, inglise, hispaania, prantsuse jne)
vertical-rl: Vertikaalne paremalt vasakule (kasutusel mõnedes Ida-Aasia keeltes nagu jaapani ja hiina keel)

On ka teisi kirjutusrežiime, näiteks vertical-lr (vertikaalne vasakult paremale), kuid need on vähem levinud.

Teksti suund

Teksti suund määrab suuna, milles tähemärke rea sees kuvatakse. Kõige levinumad teksti suunad on:

ltr: Vasakult paremale (standard enamiku keelte puhul)
rtl: Paremalt vasakule (kasutusel keeltes nagu araabia, heebrea, pärsia jne)

Need omadused seatakse vastavalt CSS-i omadustega writing-mode ja direction. Näiteks:


 .rtl-example {
 direction: rtl;
 }

 .vertical-example {
 writing-mode: vertical-rl;
 }

Loogiliste omaduste tuum

Siin on ülevaade kõige olulisematest CSS-i loogilistest omadustest ja sellest, kuidas need on seotud oma füüsiliste vastetega:

Kasti mudeli omadused

Need omadused kontrollivad elemendi polsterdust, veerist ja äärist.

margin-inline-start: LTR-is võrdne margin-left-iga ja RTL-is margin-right-iga.
margin-inline-end: LTR-is võrdne margin-right-iga ja RTL-is margin-left-iga.
margin-block-start: Nii LTR-is kui ka RTL-is võrdne margin-top-iga.
margin-block-end: Nii LTR-is kui ka RTL-is võrdne margin-bottom-iga.
padding-inline-start: LTR-is võrdne padding-left-iga ja RTL-is padding-right-iga.
padding-inline-end: LTR-is võrdne padding-right-iga ja RTL-is padding-left-iga.
padding-block-start: Nii LTR-is kui ka RTL-is võrdne padding-top-iga.
padding-block-end: Nii LTR-is kui ka RTL-is võrdne padding-bottom-iga.
border-inline-start: Lühend äärise omaduste seadmiseks loogilisel algusküljel.
border-inline-end: Lühend äärise omaduste seadmiseks loogilisel lõpuküljel.
border-block-start: Lühend äärise omaduste seadmiseks loogilisel ülemisel küljel.
border-block-end: Lühend äärise omaduste seadmiseks loogilisel alumisel küljel.

Näide: Nupu loomine ühtlase polsterdusega, sõltumata teksti suunast:


 .button {
 padding-inline-start: 1em;
 padding-inline-end: 1em;
 }

Positsioneerimisomadused

Need omadused kontrollivad elemendi asukohta oma vanema sees.

inset-inline-start: LTR-is võrdne left-iga ja RTL-is right-iga.
inset-inline-end: LTR-is võrdne right-iga ja RTL-is left-iga.
inset-block-start: Nii LTR-is kui ka RTL-is võrdne top-iga.
inset-block-end: Nii LTR-is kui ka RTL-is võrdne bottom-iga.

Näide: Elemendi positsioneerimine selle konteineri algus- ja ülaservade suhtes:


 .element {
 position: absolute;
 inset-inline-start: 10px;
 inset-block-start: 20px;
 }

Voo paigutuse omadused

Need omadused kontrollivad sisu paigutust konteineri sees.

float-inline-start: LTR-is võrdne float: left-iga ja RTL-is float: right-iga.
float-inline-end: LTR-is võrdne float: right-iga ja RTL-is float: left-iga.
clear-inline-start: LTR-is võrdne clear: left-iga ja RTL-is clear: right-iga.
clear-inline-end: LTR-is võrdne clear: right-iga ja RTL-is clear: left-iga.

Näide: Pildi hõljutamine sisuvoo algusesse:


 .image {
 float-inline-start: left; /* Järjepidev visuaalne paigutus nii LTR kui ka RTL režiimis */
 }

Suuruse omadused

inline-size: Esindab horisontaalset suurust horisontaalses kirjutusrežiimis ja vertikaalset suurust vertikaalses kirjutusrežiimis.
block-size: Esindab vertikaalset suurust horisontaalses kirjutusrežiimis ja horisontaalset suurust vertikaalses kirjutusrežiimis.
min-inline-size
max-inline-size
min-block-size
max-block-size

Need on eriti kasulikud vertikaalsete kirjutusrežiimidega töötamisel.

Loogiliste omaduste kasutamise eelised

CSS-i loogiliste omaduste kasutuselevõtt pakub rahvusvahelisele veebidisainile mitmeid olulisi eeliseid:

Parem rahvusvahelistamine (I18N): Looge paigutusi, mis kohanduvad automaatselt erinevate kirjutusrežiimide ja teksti suundadega, lihtsustades mitme keele toetamise protsessi.
Täiustatud kohanduvus: Loogilised omadused täiendavad kohanduva disaini põhimõtteid, võimaldades teil ehitada paigutusi, mis kohanduvad sujuvalt erinevate ekraanisuuruste ja -orientatsioonidega.
Koodi hooldatavus: Vähendage vajadust keerukate meediapäringute ja keelel või suunal põhineva tingimusliku stiilimise järele, mille tulemuseks on puhtam ja paremini hooldatav CSS.
Vähendatud keerukus: Abstraheerige ekraani füüsiline orientatsioon, mis teeb paigutusreeglite üle arutlemise ja ühtsete kujunduste loomise erinevates keeltes ja kultuurides lihtsamaks.
Tulevikukindlus: Kuna kirjutusrežiimid ja paigutustehnoloogiad arenevad, pakuvad loogilised omadused veebidisainile paindlikumat ja kohanemisvõimelisemat lähenemist.

Praktilised näited ja kasutusjuhud

Uurime mõningaid praktilisi näiteid selle kohta, kuidas saate CSS-i loogilisi omadusi kasutada rahvusvaheliste paigutuste loomiseks:

Näide 1: Navigatsioonimenüü loomine

Kujutage ette navigatsioonimenüüd, kus soovite, et menüüelemendid oleksid LTR-keeltes joondatud paremale ja RTL-keeltes vasakule.


 .nav {
 display: flex;
 justify-content: flex-end; /* Joondab elemendid rea lõppu */
 }

Sel juhul tagab flex-end-i kasutamine, et menüüelemendid on joondatud LTR-is paremale ja RTL-is vasakule, ilma et oleks vaja iga suuna jaoks eraldi stiile.

Näide 2: Vestlusliidese stiilimine

Vestlusliideses võiksite kuvada saatja sõnumid paremal ja vastuvõtja sõnumid vasakul (LTR-is). RTL-is peaks see olema vastupidine.


 .message.sender {
 margin-inline-start: auto; /* Lükkab saatja sõnumid lõppu */
 }

 .message.receiver {
 margin-inline-end: auto; /* Lükkab vastuvõtja sõnumid algusesse (LTR-is tegelikult vasakule) */
 }

Näide 3: Lihtsa kaardipaigutuse loomine

Looge kaart, mille pilt on LTR-is vasakul ja tekst paremal ning RTL-is vastupidi.


 .card {
 display: flex;
 }

 .card img {
 margin-inline-end: 1em;
 }

Pildil olev margin-inline-end rakendab automaatselt veerise LTR-is paremale ja RTL-is vasakule.

Näide 4: Sisestusväljade käsitlemine ühtlase joondamisega

Kujutage ette vormi, kus sildid on LTR-paigutustes joondatud sisestusväljadest paremale. RTL-is peaksid sildid olema vasakul.


 .form-group {
 display: flex;
 align-items: center;
 }

 .form-group label {
 text-align: end;
 padding-inline-end: 0.5em;
 width: 100px; /* Sildi fikseeritud laius */
 }

 .form-group input {
 flex: 1;
 }

text-align: end kasutamine joondab teksti LTR-is paremale ja RTL-is vasakule. padding-inline-end tagab ühtlase vahe, olenemata paigutuse suunast.

Üleminek füüsilistelt omadustelt loogilistele

Olemasoleva koodibaasi üleviimine loogiliste omaduste kasutamisele võib tunduda hirmutav, kuid see on järkjärguline protsess. Siin on soovitatav lähenemisviis:

Tuvastage suunast sõltuvad stiilid: Alustage CSS-i reeglite tuvastamisest, mis kasutavad füüsilisi omadusi nagu left, right, margin-left, margin-right jne.
Looge loogiliste omaduste vasted: Iga suunast sõltuva reegli jaoks looge vastav reegel, kasutades loogilisi omadusi (nt asendage margin-left margin-inline-start-iga).
Testige põhjalikult: Testige oma muudatusi nii LTR- kui ka RTL-paigutustes, et veenduda uute loogiliste omaduste korrektses toimimises. RTL-keskkondade simuleerimiseks saate kasutada brauseri arendaja tööriistu.
Asendage füüsilised omadused järk-järgult: Kui olete kindel, et loogilised omadused töötavad õigesti, eemaldage järk-järgult algsed füüsilised omadused.
Kasutage CSS-i muutujaid: Kaaluge CSS-i muutujate kasutamist ühiste vahekauguste või suuruste väärtuste määratlemiseks, mis teeb stiilide haldamise ja värskendamise lihtsamaks. Näiteks: :root { --spacing-inline: 1em; } .element { margin-inline-start: var(--spacing-inline); margin-inline-end: var(--spacing-inline); }

Brauseri tugi

CSS-i loogilistel omadustel on suurepärane brauseritugi tänapäevastes brauserites, sealhulgas Chrome, Firefox, Safari ja Edge. Vanemad brauserid ei pruugi neid aga algselt toetada. Ühilduvuse tagamiseks vanemate brauseritega saate kasutada polütäite teeki nagu css-logical-props.

Täpsemad tehnikad

Loogiliste omaduste kombineerimine CSS Grid-i ja Flexbox-iga

Loogilised omadused töötavad sujuvalt CSS Grid-i ja Flexbox-iga, võimaldades teil luua keerukaid ja kohanduvaid paigutusi, mis kohanduvad erinevate kirjutusrežiimidega. Näiteks saate Flexboxis kasutada justify-content: start ja justify-content: end, et joondada elemente vastavalt konteineri loogilisele algusele ja lõpule.

Loogiliste omaduste kasutamine kohandatud omadustega (CSS-i muutujad)

Nagu eespool näidatud, võivad CSS-i muutujad muuta teie loogiliste omaduste koodi veelgi hooldatavamaks ja loetavamaks. Määratlege ühised vahekauguste ja suuruste väärtused muutujatena ja taaskasutage neid kogu oma stiililehel.

Kirjutusrežiimi ja suuna tuvastamine JavaScriptiga

Mõnel juhul võib teil olla vaja tuvastada praegune kirjutusrežiim või suund JavaScripti abil. Saate kasutada meetodit getComputedStyle(), et hankida omaduste writing-mode ja direction väärtused.

Parimad praktikad

Eelistage loogilisi omadusi: Kasutage võimaluse korral füüsiliste omaduste asemel loogilisi omadusi, et tagada teie paigutuste kohanemisvõime erinevate kirjutusrežiimidega.
Testige erinevates keeltes: Testige oma veebisaiti erinevates keeltes, sealhulgas LTR- ja RTL-keeltes, et veenduda paigutuse korrektses toimimises.
Kasutage vanemate brauserite jaoks polütäidet: Kasutage polütäite teeki, et pakkuda loogiliste omaduste tuge vanemates brauserites.
Arvestage ligipääsetavusega: Veenduge, et teie paigutused on ligipääsetavad puuetega kasutajatele, olenemata kirjutusrežiimist või suunast.
Olge järjepidev: Kui hakkate kasutama loogilisi omadusi, säilitage järjepidevus kogu oma projektis, et vältida segadust ja tagada hooldatavus.
Dokumenteerige oma kood: Lisage oma CSS-ile kommentaare, et selgitada, miks te kasutate loogilisi omadusi ja kuidas need töötavad.

Kokkuvõte

CSS-i loogilised omadused on võimas tööriist kohanduvate ja rahvusvaheliste veebipaigutuste loomiseks. Mõistes kirjutusrežiimide ja teksti suuna aluspõhimõtteid ning võttes oma CSS-is kasutusele loogilised omadused, saate luua veebisaite, mis teenindavad globaalset publikut ja pakuvad ühtlast kasutajakogemust erinevates keeltes ja kultuurides. Võtke omaks loogiliste omaduste jõud ja avage oma veebiarenduse töövoos uus paindlikkuse ja hooldatavuse tase. Alustage väikeselt, katsetage ja lisage need järk-järgult oma olemasolevatesse projektidesse. Peagi näete kohanemisvõimelisema ja globaalselt teadlikuma lähenemise eeliseid veebidisainile. Kuna veeb muutub üha globaalsemaks, kasvab nende tehnikate tähtsus veelgi.

MLOG