Pasaulinių maketų kūrimas: išsami CSS loginių savybių analizė

Šiuolaikiniame tarpusavyje susijusiame pasaulyje svetainės turi būti pritaikytos įvairialypei pasaulinei auditorijai. Tai reiškia, kad reikia palaikyti įvairias kalbas ir rašymo kryptis: nuo rašymo iš kairės į dešinę (LTR), iš dešinės į kairę (RTL) iki vertikalaus rašymo. Tradicinės CSS savybės, tokios kaip left, right, top ir bottom, yra iš prigimties priklausomos nuo krypties, todėl sudėtinga sukurti maketus, kurie sklandžiai prisitaikytų prie skirtingų rašymo krypčių. Būtent čia į pagalbą ateina CSS loginės savybės.

Kas yra CSS loginės savybės?

CSS loginės savybės yra CSS savybių rinkinys, apibrėžiantis maketo kryptis, pagrįstas turinio srautu, o ne fizinėmis kryptimis. Jos abstrahuoja fizinę ekrano orientaciją, leidžiančią apibrėžti maketo taisykles, kurios taikomos nuosekliai, nepriklausomai nuo rašymo krypties ar krypties.

Užuot galvoję apie left ir right, galvojate apie start ir end. Užuot galvoję apie top ir bottom, galvojate apie block-start ir block-end. Tuomet naršyklė automatiškai susieja šias logines kryptis su atitinkamomis fizinėmis kryptimis, atsižvelgdama į elemento rašymo kryptį.

Pagrindinės sąvokos: rašymo kryptys ir teksto kryptis

Prieš gilinantis į konkrečias savybes, labai svarbu suprasti dvi pagrindines sąvokas:

Rašymo kryptys

Rašymo kryptys apibrėžia, kuria kryptimi išdėstomos teksto eilutės. Dvi dažniausiai pasitaikančios rašymo kryptys yra:

horizontal-tb: Horizontali iš viršaus į apačią (standartinė kalboms, tokioms kaip anglų, ispanų, prancūzų ir kt.)
vertical-rl: Vertikali iš dešinės į kairę (naudojama kai kuriose Rytų Azijos kalbose, pvz., japonų ir kinų)

Egzistuoja ir kitos rašymo kryptys, pavyzdžiui, vertical-lr (vertikali iš kairės į dešinę), tačiau jos retesnės.

Teksto kryptis

Teksto kryptis nurodo, kuria kryptimi rodomi simboliai eilutėje. Dažniausiai pasitaikančios teksto kryptys yra:

ltr: Iš kairės į dešinę (standartinė daugumai kalbų)
rtl: Iš dešinės į kairę (naudojama kalbose, tokiose kaip arabų, hebrajų, persų ir kt.)

Šios savybės nustatomos naudojant atitinkamai writing-mode ir direction CSS savybes. Pavyzdžiui:


 .rtl-example {
 direction: rtl;
 }

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

Pagrindinės loginės savybės

Pateikiame svarbiausių CSS loginių savybių ir jų sąsajų su fiziniais atitikmenimis apžvalgą:

Dėžutės modelio savybės

Šios savybės kontroliuoja elemento vidinę paraštę (padding), išorinę paraštę (margin) ir rėmelį (border).

margin-inline-start: Atitinka margin-left LTR ir margin-right RTL.
margin-inline-end: Atitinka margin-right LTR ir margin-left RTL.
margin-block-start: Atitinka margin-top tiek LTR, tiek RTL.
margin-block-end: Atitinka margin-bottom tiek LTR, tiek RTL.
padding-inline-start: Atitinka padding-left LTR ir padding-right RTL.
padding-inline-end: Atitinka padding-right LTR ir padding-left RTL.
padding-block-start: Atitinka padding-top tiek LTR, tiek RTL.
padding-block-end: Atitinka padding-bottom tiek LTR, tiek RTL.
border-inline-start: Sutrumpinimas, skirtas rėmelio savybėms nustatyti loginėje pradžios pusėje.
border-inline-end: Sutrumpinimas, skirtas rėmelio savybėms nustatyti loginėje pabaigos pusėje.
border-block-start: Sutrumpinimas, skirtas rėmelio savybėms nustatyti loginėje viršutinėje pusėje.
border-block-end: Sutrumpinimas, skirtas rėmelio savybėms nustatyti loginėje apatinėje pusėje.

Pavyzdys: Mygtuko su nuoseklia vidine paraštė sukūrimas, nepriklausomai nuo teksto krypties:


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

Pozicionavimo savybės

Šios savybės kontroliuoja elemento padėtį tėviniame elemente.

inset-inline-start: Atitinka left LTR ir right RTL.
inset-inline-end: Atitinka right LTR ir left RTL.
inset-block-start: Atitinka top tiek LTR, tiek RTL.
inset-block-end: Atitinka bottom tiek LTR, tiek RTL.

Pavyzdys: Elemento pozicionavimas atsižvelgiant į konteinerio pradžios ir viršutinius kraštus:


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

Srauto maketo savybės

Šios savybės kontroliuoja turinio išdėstymą konteineryje.

float-inline-start: Atitinka float: left LTR ir float: right RTL.
float-inline-end: Atitinka float: right LTR ir float: left RTL.
clear-inline-start: Atitinka clear: left LTR ir clear: right RTL.
clear-inline-end: Atitinka clear: right LTR ir clear: left RTL.

Pavyzdys: Paveikslėlio perkėlimas į turinio srauto pradžią:


 .image {
 float-inline-start: left; /* Nuoseklus vizualinis išdėstymas tiek LTR, tiek RTL */
 }

Dydžio savybės

inline-size: Atspindi horizontalų dydį horizontalioje rašymo kryptyje ir vertikalų dydį vertikalioje rašymo kryptyje.
block-size: Atspindi vertikalų dydį horizontalioje rašymo kryptyje ir horizontalų dydį vertikalioje rašymo kryptyje.
min-inline-size
max-inline-size
min-block-size
max-block-size

Jos ypač naudingos dirbant su vertikaliomis rašymo kryptimis.

Loginių savybių naudojimo privalumai

CSS loginių savybių pritaikymas tarptautiniam interneto dizainui suteikia keletą reikšmingų privalumų:

Patobulinta internacionalizacija (I18N): Kurkite maketus, kurie automatiškai prisitaiko prie skirtingų rašymo krypčių ir teksto krypčių, supaprastindami kelių kalbų palaikymo procesą.
Pagerintas adaptyvumas: Loginės savybės papildo adaptyvaus dizaino principus, leisdamos kurti maketus, kurie sklandžiai prisitaiko prie įvairių ekrano dydžių ir orientacijų.
Kodo priežiūra: Sumažinkite sudėtingų medijos užklausų ir sąlyginio stiliaus, priklausančio nuo kalbos ar krypties, poreikį, todėl CSS kodas tampa švaresnis ir lengviau prižiūrimas.
Sumažintas sudėtingumas: Abstrahuokite fizinę ekrano orientaciją, kad būtų lengviau suprasti maketo taisykles ir sukurti nuoseklų dizainą skirtingoms kalboms ir kultūroms.
Ateities užtikrinimas: Tobulėjant rašymo krypčių ir maketavimo technologijoms, loginės savybės suteikia lankstesnį ir labiau pritaikomą požiūrį į interneto dizainą.

Praktiniai pavyzdžiai ir naudojimo atvejai

Panagrinėkime keletą praktinių pavyzdžių, kaip galite naudoti CSS logines savybes kurdami internacionalizuotus maketus:

1 pavyzdys: naršymo meniu kūrimas

Įsivaizduokite naršymo meniu, kuriame norite, kad meniu punktai būtų lygiuojami dešinėje LTR kalbose ir kairėje RTL kalbose.


 .nav {
 display: flex;
 justify-content: flex-end; /* Lygiuoti elementus eilutės pabaigoje */
 }

Šiuo atveju flex-end naudojimas užtikrina, kad meniu punktai būtų lygiuojami dešinėje LTR ir kairėje RTL, nereikalaujant atskirų stilių kiekvienai krypčiai.

2 pavyzdys: pokalbių sąsajos stiliavimas

Pokalbių sąsajoje galbūt norėtumėte rodyti siuntėjo pranešimus dešinėje, o gavėjo pranešimus kairėje (LTR). RTL atveju tai turėtų būti atvirkščiai.


 .message.sender {
 margin-inline-start: auto; /* Stumti siuntėjo pranešimus į pabaigą */
 }

 .message.receiver {
 margin-inline-end: auto; /* Stumti gavėjo pranešimus į pradžią (faktiškai į kairę LTR) */
 }

3 pavyzdys: paprasto kortelės maketo kūrimas

Sukurkite kortelę su paveikslėliu kairėje ir teksto turiniu dešinėje LTR atveju, ir atvirkščiai RTL atveju.


 .card {
 display: flex;
 }

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

margin-inline-end ant paveikslėlio automatiškai pritaikys paraštę dešinėje LTR ir kairėje RTL.

4 pavyzdys: nuoseklaus lygiavimo tvarkymas įvesties laukuose

Įsivaizduokite formą su etiketėmis, lygiuotomis į dešinę nuo įvesties laukų LTR maketuose. RTL atveju etiketės turėtų būti kairėje.


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

 .form-group label {
 text-align: end;
 padding-inline-end: 0.5em;
 width: 100px; /* Fiksuotas etiketės plotis */
 }

 .form-group input {
 flex: 1;
 }

Naudojant `text-align: end`, tekstas lygiuojamas dešinėje LTR ir kairėje RTL. `padding-inline-end` užtikrina nuoseklų tarpą, nepriklausomai nuo maketo krypties.

Perėjimas nuo fizinių prie loginių savybių

Esamos kodo bazės perkėlimas prie loginių savybių gali atrodyti bauginančiai, tačiau tai yra laipsniškas procesas. Štai siūlomas požiūris:

Nustatykite nuo krypties priklausomus stilius: Pradėkite nuo CSS taisyklių, kurios naudoja fizines savybes, tokias kaip left, right, margin-left, margin-right ir kt., nustatymo.
Sukurkite loginių savybių atitikmenis: Kiekvienai nuo krypties priklausančiai taisyklei sukurkite atitinkamą taisyklę, naudodami logines savybes (pvz., pakeiskite margin-left į margin-inline-start).
Kruopščiai išbandykite: Išbandykite savo pakeitimus tiek LTR, tiek RTL maketuose, kad įsitikintumėte, jog naujos loginės savybės veikia teisingai. Galite naudoti naršyklės kūrėjų įrankius, kad imituotumėte RTL aplinką.
Palaipsniui pakeiskite fizines savybes: Kai būsite įsitikinę, kad loginės savybės veikia teisingai, palaipsniui pašalinkite pradines fizines savybes.
Naudokite CSS kintamuosius: Apsvarstykite galimybę naudoti CSS kintamuosius, kad apibrėžtumėte bendras atstumų ar dydžių reikšmes, kad būtų lengviau valdyti ir atnaujinti stilius. Pavyzdžiui: :root { --spacing-inline: 1em; } .element { margin-inline-start: var(--spacing-inline); margin-inline-end: var(--spacing-inline); }

Naršyklių palaikymas

CSS loginės savybės turi puikų palaikymą šiuolaikinėse naršyklėse, įskaitant Chrome, Firefox, Safari ir Edge. Tačiau senesnės naršyklės gali jų nepalaikyti natūraliai. Norėdami užtikrinti suderinamumą su senesnėmis naršyklėmis, galite naudoti „polyfill“ biblioteką, pvz., css-logical-props.

Pažangios technikos

Loginių savybių derinimas su CSS Grid ir Flexbox

Loginės savybės puikiai veikia su CSS Grid ir Flexbox, leisdamos kurti sudėtingus ir adaptyvius maketus, kurie prisitaiko prie skirtingų rašymo krypčių. Pavyzdžiui, galite naudoti justify-content: start ir justify-content: end Flexbox sistemoje, kad elementus lygiuotumėte atitinkamai prie loginės konteinerio pradžios ir pabaigos.

Loginių savybių naudojimas su pasirinktinėmis savybėmis (CSS kintamaisiais)

Kaip parodyta anksčiau, CSS kintamieji gali padaryti jūsų loginių savybių kodą dar labiau prižiūrimą ir skaitomą. Apibrėžkite bendras atstumų ir dydžių reikšmes kaip kintamuosius ir pakartotinai naudokite juos visame savo stilių apraše.

Rašymo krypties ir krypties nustatymas naudojant JavaScript

Kai kuriais atvejais jums gali prireikti nustatyti dabartinę rašymo kryptį arba kryptį naudojant JavaScript. Galite naudoti getComputedStyle() metodą, kad gautumėte writing-mode ir direction savybių reikšmes.

Geroji praktika

Teikite pirmenybę loginėms savybėms: Kai tik įmanoma, naudokite logines savybes vietoj fizinių savybių, kad užtikrintumėte, jog jūsų maketai būtų pritaikomi skirtingoms rašymo kryptims.
Išbandykite skirtingomis kalbomis: Išbandykite savo svetainę įvairiomis kalbomis, įskaitant LTR ir RTL kalbas, kad įsitikintumėte, jog maketas veikia teisingai.
Naudokite „polyfill“ senesnėms naršyklėms: Naudokite „polyfill“ biblioteką, kad suteiktumėte loginių savybių palaikymą senesnėse naršyklėse.
Atsižvelkite į prieinamumą: Užtikrinkite, kad jūsų maketai būtų prieinami vartotojams su negalia, nepriklausomai nuo rašymo krypties.
Išlaikykite nuoseklumą: Pradėję naudoti logines savybes, išlaikykite nuoseklumą visame projekte, kad išvengtumėte painiavos ir užtikrintumėte kodo priežiūrą.
Dokumentuokite savo kodą: Pridėkite komentarus prie savo CSS, paaiškindami, kodėl naudojate logines savybes ir kaip jos veikia.

Išvada

CSS loginės savybės yra galingas įrankis kuriant adaptyvius, internacionalizuotus interneto maketus. Suprasdami pagrindines rašymo krypčių ir teksto krypties sąvokas bei pritaikydami logines savybes savo CSS, galite kurti svetaines, kurios tenkina pasaulinę auditoriją ir suteikia nuoseklią vartotojo patirtį skirtingomis kalbomis ir kultūromis. Pasinaudokite loginių savybių galia ir atverkite naują lankstumo bei priežiūros lygį savo interneto kūrimo procese. Pradėkite nuo mažų žingsnelių, eksperimentuokite ir palaipsniui įtraukite jas į savo esamus projektus. Netrukus pamatysite labiau pritaikomo ir globaliai orientuoto požiūrio į interneto dizainą privalumus. Kadangi internetas ir toliau tampa vis globalesnis, šių metodų svarba tik augs.

MLOG