Atraskite CSS loginės dėžutės modelį, kuris leidžia kurti lanksčius maketus, prisitaikančius prie skirtingų rašymo režimų ir teksto krypčių globaliai auditorijai.
CSS loginės dėžutės modelis: globaliam žiniatinkliui skirtų, rašymo režimą atpažįstančių maketų kūrimas
Žiniatinklis yra pasaulinė platforma, ir mes, kaip kūrėjai, esame atsakingi už tai, kad sukurtume prieinamas ir intuityvias patirtis vartotojams visame pasaulyje. Svarbus aspektas siekiant šio tikslo – suprasti ir naudoti CSS loginės dėžutės modelį, kuris leidžia mums kurti maketus, sklandžiai prisitaikančius prie skirtingų rašymo režimų ir teksto krypčių. Šis metodas yra žymiai patikimesnis nei pasikliovimas vien fizinėmis savybėmis (viršus, dešinė, apačia, kairė), kurios yra iš prigimties priklausomos nuo krypties.
Fizinių ir loginių savybių supratimas
Tradicinis CSS remiasi fizinėmis savybėmis, kurios apibrėžia pozicionavimą ir dydį remiantis fiziniu ekranu ar įrenginiu. Pavyzdžiui, margin-left
prideda paraštę kairėje elemento pusėje, nepriklausomai nuo teksto krypties. Šis metodas puikiai veikia kalboms, kurios skaitomos iš kairės į dešinę, tačiau gali sukelti problemų dirbant su kalbomis, rašomomis iš dešinės į kairę (RTL), pavyzdžiui, arabų ar hebrajų, arba su vertikaliais rašymo režimais, dažnai pasitaikančiais Rytų Azijos kalbose.
Kita vertus, loginės dėžutės modelis naudoja logines savybes, kurios yra susijusios su rašymo režimu ir teksto kryptimi. Vietoj margin-left
, naudotumėte margin-inline-start
. Naršyklė automatiškai teisingai interpretuoja šią savybę pagal esamą rašymo režimą ir kryptį. Tai užtikrina, kad paraštė atsiranda tinkamoje elemento pusėje, nepriklausomai nuo naudojamos kalbos ar rašto.
Pagrindinės sąvokos: rašymo režimai ir teksto kryptis
Prieš gilinantis į loginių savybių specifiką, svarbu suprasti rašymo režimų ir teksto krypties sąvokas.
Rašymo režimai
CSS savybė writing-mode
apibrėžia kryptį, kuria išdėstomos teksto eilutės. Dažniausiai naudojamos reikšmės yra:
horizontal-tb
: Standartinis horizontalus rašymo režimas iš viršaus į apačią (pvz., anglų, ispanų kalbos).vertical-rl
: Vertikalus rašymo režimas iš dešinės į kairę (dažnas tradicinėje kinų ir japonų kalbose).vertical-lr
: Vertikalus rašymo režimas iš kairės į dešinę.
Pagal numatytuosius nustatymus dauguma naršyklių taiko writing-mode: horizontal-tb
.
Teksto kryptis
CSS savybė direction
nurodo kryptį, kuria teka įterptinis turinys. Ji gali turėti dvi reikšmes:
ltr
: Iš kairės į dešinę (pvz., anglų, prancūzų kalbos). Tai yra numatytoji reikšmė.rtl
: Iš dešinės į kairę (pvz., arabų, hebrajų kalbos).
Svarbu pažymėti, kad savybė direction
veikia tik teksto ir įterptinių elementų *kryptį*, bet ne bendrą maketą. Savybė writing-mode
yra tai, kas pirmiausia nustato maketo kryptį.
Loginių savybių išsami apžvalga
Panagrinėkime pagrindines logines savybes ir kaip jos susijusios su jų fiziniais atitikmenimis:
Paraštės (Margins)
margin-block-start
: Atitinkamargin-top
režimehorizontal-tb
, irmargin-right
arbamargin-left
vertikaliuose rašymo režimuose.margin-block-end
: Atitinkamargin-bottom
režimehorizontal-tb
, irmargin-right
arbamargin-left
vertikaliuose rašymo režimuose.margin-inline-start
: Atitinkamargin-left
ltr
kryptyje irmargin-right
rtl
kryptyje.margin-inline-end
: Atitinkamargin-right
ltr
kryptyje irmargin-left
rtl
kryptyje.
Užpildymas (Padding)
padding-block-start
: Atitinkapadding-top
režimehorizontal-tb
, irpadding-right
arbapadding-left
vertikaliuose rašymo režimuose.padding-block-end
: Atitinkapadding-bottom
režimehorizontal-tb
, irpadding-right
arbapadding-left
vertikaliuose rašymo režimuose.padding-inline-start
: Atitinkapadding-left
ltr
kryptyje irpadding-right
rtl
kryptyje.padding-inline-end
: Atitinkapadding-right
ltr
kryptyje irpadding-left
rtl
kryptyje.
Kraštinės (Borders)
border-block-start
,border-block-start-width
,border-block-start-style
,border-block-start-color
: Atitinka viršutinę kraštinę režimehorizontal-tb
.border-block-end
,border-block-end-width
,border-block-end-style
,border-block-end-color
: Atitinka apatinę kraštinę režimehorizontal-tb
.border-inline-start
,border-inline-start-width
,border-inline-start-style
,border-inline-start-color
: Atitinka kairę kraštinęltr
kryptyje ir dešinę kraštinęrtl
kryptyje.border-inline-end
,border-inline-end-width
,border-inline-end-style
,border-inline-end-color
: Atitinka dešinę kraštinęltr
kryptyje ir kairę kraštinęrtl
kryptyje.
Atitraukimo savybės (Offset Properties)
inset-block-start
: Atitinkatop
režimehorizontal-tb
.inset-block-end
: Atitinkabottom
režimehorizontal-tb
.inset-inline-start
: Atitinkaleft
ltr
kryptyje irright
rtl
kryptyje.inset-inline-end
: Atitinkaright
ltr
kryptyje irleft
rtl
kryptyje.
Plotis ir aukštis (Width and Height)
block-size
: Atspindi vertikalų matmenį režimehorizontal-tb
ir horizontalų matmenį vertikaliuose rašymo režimuose.inline-size
: Atspindi horizontalų matmenį režimehorizontal-tb
ir vertikalų matmenį vertikaliuose rašymo režimuose.min-block-size
,max-block-size
: Minimalios ir maksimaliosblock-size
reikšmės.min-inline-size
,max-inline-size
: Minimalios ir maksimaliosinline-size
reikšmės.
Praktiniai pavyzdžiai: loginių savybių įgyvendinimas
Pažvelkime į keletą praktinių pavyzdžių, kaip naudoti logines savybes kuriant rašymo režimą atpažįstančius maketus.
1 pavyzdys: paprasta naršymo juosta
Įsivaizduokite naršymo juostą su logotipu kairėje ir naršymo nuorodomis dešinėje. Naudodami fizines savybes, tarpams sukurti tikriausiai naudotumėte margin-left
logotipui ir margin-right
naršymo nuorodoms. Tačiau tai neveiks teisingai RTL kalbose.
Štai kaip galite pasiekti tą patį maketą naudodami logines savybes:
```html ``` ```css nav { display: flex; justify-content: space-between; padding-inline-start: 1rem; /* Naudokite loginę savybę */ padding-inline-end: 1rem; /* Naudokite loginę savybę */ } .logo { margin-inline-end: auto; /* Stumia logotipą į pradžią, o nuorodas į pabaigą */ } ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; } ```Šiame pavyzdyje pakeitėme margin-left
ir margin-right
į padding-inline-start
ir padding-inline-end
naršymo juostos užpildymui ir margin-inline-end
logotipo automatinei paraštei. auto
reikšmė ant logotipo margin-inline-end
priverčia jį užpildyti erdvę kairėje LTR režime ir dešinėje RTL režime, efektyviai nustumiant naršymo meniu į pabaigą.
Tai užtikrina, kad logotipas visada bus naršymo juostos pradžioje, o naršymo nuorodos – pabaigoje, nepriklausomai nuo teksto krypties.
2 pavyzdys: kortelės komponento stilizavimas
Tarkime, turite kortelės komponentą su pavadinimu, aprašymu ir paveikslėliu. Norite pridėti užpildymą aplink turinį ir kraštinę atitinkamose pusėse.
```html
Kortelės pavadinimas
Tai trumpas kortelės turinio aprašymas.
Čia mes panaudojome padding-block-start
, padding-block-end
, padding-inline-start
ir padding-inline-end
, kad pridėtume užpildymą aplink kortelės turinį. Tai užtikrina, kad užpildymas bus pritaikytas teisingai tiek LTR, tiek RTL maketuose.
3 pavyzdys: darbas su vertikaliais rašymo režimais
Apsvarstykite scenarijų, kai reikia rodyti tekstą vertikaliai, pavyzdžiui, tradicinėje japonų ar kinų kaligrafijoje. Maketas turi prisitaikyti prie šių specifinių rašymo režimų.
```htmlŠis tekstas rodomas vertikaliai.
Šiame pavyzdyje nustatėme writing-mode
į vertical-rl
, kuris tekstą atvaizduoja vertikaliai iš dešinės į kairę. Naudojame block-size
bendram aukščiui apibrėžti. Kraštines ir užpildymą taikome naudodami logines savybes, kurios yra permapuojamos vertikaliame kontekste. vertical-rl
režime border-inline-start
tampa viršutine kraštine, border-inline-end
– apatine kraštine, padding-block-start
– kairiuoju užpildymu, o padding-block-end
– dešiniuoju užpildymu.
Darbas su „Flexbox“ ir „Grid“ maketais
CSS loginės dėžutės modelis sklandžiai integruojasi su moderniomis maketavimo technikomis, tokiomis kaip „Flexbox“ ir „Grid“. Naudojant šiuos maketavimo metodus, turėtumėte naudoti logines savybes lygiavimui, dydžiui ir tarpams, kad užtikrintumėte, jog jūsų maketai teisingai prisitaikytų prie skirtingų rašymo režimų ir teksto krypčių.
Flexbox
„Flexbox“ modulyje savybės kaip justify-content
, align-items
ir gap
turėtų būti naudojamos kartu su loginėmis paraščių ir užpildymo savybėmis, siekiant sukurti lanksčius ir rašymo režimą atpažįstančius maketus. Ypač naudojant flex-direction: row | row-reverse;
, savybės start
ir end
tampa priklausomos nuo konteksto ir paprastai yra tinkamesnės nei left
ir right
.
Pavyzdžiui, apsvarstykite eilutę elementų „Flexbox“ konteineryje. Norėdami tolygiai paskirstyti elementus, galite naudoti justify-content: space-between
. RTL makete elementai vis tiek bus tolygiai paskirstyti, tačiau jų tvarka bus atvirkštinė.
Grid maketas
„Grid“ maketas suteikia dar galingesnių įrankių sudėtingiems maketams kurti. Loginės savybės ypač naudingos derinant jas su pavadintomis tinklelio linijomis. Užuot nurodę tinklelio linijas pagal numerį, galite jas pavadinti loginiais terminais, tokiais kaip „start“ ir „end“, ir tada apibrėžti jų fizinę vietą priklausomai nuo rašymo režimo.
Pavyzdžiui, galite apibrėžti tinklelį su pavadintomis linijomis, tokiomis kaip „inline-start“, „inline-end“, „block-start“ ir „block-end“, ir tada naudoti šiuos pavadinimus elementų pozicionavimui tinklelyje. Tai palengvina maketų, prisitaikančių prie skirtingų rašymo režimų ir teksto krypčių, kūrimą.
Loginės dėžutės modelio naudojimo privalumai
CSS loginės dėžutės modelio pritaikymas suteikia keletą reikšmingų privalumų:
- Geresnė internacionalizacija (i18n): Sukuria patikimesnius ir labiau pritaikomus maketus įvairioms kalboms ir raštams.
- Pagerintas prieinamumas: Užtikrina nuoseklią ir intuityvią vartotojo patirtį, nepriklausomai nuo jo kalbos ar kultūrinės aplinkos.
- Sumažintas kodo sudėtingumas: Supaprastina CSS kodą, pašalinant poreikį sudėtingoms medijos užklausoms ar sąlyginei logikai, skirtai skirtingoms teksto kryptims valdyti.
- Lengvesnė priežiūra: Jūsų kodą lengviau prižiūrėti ir atnaujinti, nes maketo pakeitimai automatiškai prisitaikys prie skirtingų rašymo režimų.
- Ateities perspektyva: Paruošia jūsų svetainę ateities kalboms ir rašymo sistemoms, kurių šiuo metu galbūt nepalaikote.
Svarstymai ir gerosios praktikos
Nors loginės dėžutės modelis siūlo daugybę privalumų, jį įgyvendinant būtina atsižvelgti į šiuos dalykus:
- Naršyklių suderinamumas: Įsitikinkite, kad jūsų tikslinės naršyklės palaiko naudojamas logines savybes. Dauguma modernių naršyklių siūlo puikų palaikymą, tačiau senesnėms naršyklėms gali prireikti polifilų ar atsarginių sprendimų.
- Testavimas: Kruopščiai išbandykite savo maketus skirtinguose rašymo režimuose ir teksto kryptyse, kad įsitikintumėte, jog jie rodomi teisingai. Įrankiai, tokie kaip naršyklės kūrėjų konsolės, gali padėti imituoti skirtingas kalbų aplinkas.
- Nuoseklumas: Išlaikykite nuoseklumą naudodami logines savybes visoje savo kodo bazėje. Tai padarys jūsų kodą lengviau suprantamą ir prižiūrimą.
- Progresyvus tobulinimas: Naudokite logines savybes kaip progresyvų tobulinimą, pateikdami atsarginius stilius senesnėms naršyklėms, kurios jų nepalaiko.
- Atsižvelkite į esamas kodo bazes: Didelės, nusistovėjusios kodo bazės konvertavimas į logines savybes gali būti didelis uždavinys. Atidžiai suplanuokite perėjimą ir apsvarstykite galimybę naudoti automatizuotus įrankius, kurie padėtų atlikti konversiją.
Įrankiai ir ištekliai
Štai keletas naudingų įrankių ir išteklių, padėsiančių daugiau sužinoti apie CSS loginės dėžutės modelį:
- MDN Web Docs: Mozilla Developer Network (MDN) teikia išsamią dokumentaciją apie CSS logines savybes: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
- CSS Writing Modes: CSS rašymo režimų specifikacija apibrėžia
writing-mode
irdirection
savybes: https://www.w3.org/TR/css-writing-modes-3/ - RTLCSS: Įrankis, kuris automatizuoja CSS stilių lentelių konvertavimo procesą RTL kalboms: https://rtlcss.com/
- Naršyklės kūrėjų įrankiai: Naudokite savo naršyklės kūrėjų įrankius, kad patikrintumėte ir derintumėte maketus skirtinguose rašymo režimuose ir teksto kryptyse.
Išvada
CSS loginės dėžutės modelis yra galingas įrankis, skirtas kurti prieinamas ir įtraukias interneto patirtis pasaulinei auditorijai. Suprasdami ir naudodami logines savybes, galite kurti maketus, kurie sklandžiai prisitaiko prie skirtingų rašymo režimų ir teksto krypčių, užtikrindami, kad jūsų svetainės būtų patogios visiems, nepriklausomai nuo jų kalbos ar kultūrinės aplinkos. Loginės dėžutės modelio pritaikymas yra reikšmingas žingsnis kuriant tikrai globalų žiniatinklį, prieinamą visiems.