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: Atitinka margin-top režime horizontal-tb, ir margin-right arba margin-left vertikaliuose rašymo režimuose.
• margin-block-end: Atitinka margin-bottom režime horizontal-tb, ir margin-right arba margin-left vertikaliuose rašymo režimuose.
• margin-inline-start: Atitinka margin-left ltr kryptyje ir margin-right rtl kryptyje.
• margin-inline-end: Atitinka margin-right ltr kryptyje ir margin-left rtl kryptyje.

Užpildymas (Padding)

• padding-block-start: Atitinka padding-top režime horizontal-tb, ir padding-right arba padding-left vertikaliuose rašymo režimuose.
• padding-block-end: Atitinka padding-bottom režime horizontal-tb, ir padding-right arba padding-left vertikaliuose rašymo režimuose.
• padding-inline-start: Atitinka padding-left ltr kryptyje ir padding-right rtl kryptyje.
• padding-inline-end: Atitinka padding-right ltr kryptyje ir padding-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žime horizontal-tb.
• border-block-end, border-block-end-width, border-block-end-style, border-block-end-color: Atitinka apatinę kraštinę režime horizontal-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: Atitinka top režime horizontal-tb.
• inset-block-end: Atitinka bottom režime horizontal-tb.
• inset-inline-start: Atitinka left ltr kryptyje ir right rtl kryptyje.
• inset-inline-end: Atitinka right ltr kryptyje ir left rtl kryptyje.

Plotis ir aukštis (Width and Height)

• block-size: Atspindi vertikalų matmenį režime horizontal-tb ir horizontalų matmenį vertikaliuose rašymo režimuose.
• inline-size: Atspindi horizontalų matmenį režime horizontal-tb ir vertikalų matmenį vertikaliuose rašymo režimuose.
• min-block-size, max-block-size: Minimalios ir maksimalios block-size reikšmės.
• min-inline-size, max-inline-size: Minimalios ir maksimalios inline-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 ``` ```css .card { border: 1px solid #ccc; margin-block-end: 1em; } .card-content { padding-block-start: 1rem; padding-block-end: 1rem; padding-inline-start: 1.5rem; padding-inline-end: 1.5rem; } ```

Č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 ``` ```css .vertical-text { writing-mode: vertical-rl; /* Arba vertical-lr */ block-size: 200px; /* Valdo teksto konteinerio aukštį */ border-inline-start: 2px solid blue; /* Viršutinė kraštinė vertical-rl režime */ border-inline-end: 2px solid green; /* Apatinė kraštinė vertical-rl režime */ padding-block-start: 10px; /* Kairysis užpildymas vertical-rl režime */ padding-block-end: 10px; /* Dešinysis užpildymas vertical-rl režime */ } .vertical-text p { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; } ```

Š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 ir direction 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.