CSS loginės kraštinių spindulių savybės: prisitaikymas prie rašymo režimų kuriant globalų dizainą

Nuolat besikeičiančiame interneto dizaino pasaulyje labai svarbu kurti maketus, kurie sklandžiai prisitaiko prie skirtingų kalbų, kultūrų ir rašymo režimų. Tradicinės CSS savybės dažnai remiasi fiziniais matmenimis (viršus, dešinė, apačia, kairė), o tai gali tapti problematiška dirbant su kalbomis, kurios skaitomos iš dešinės į kairę (RTL) arba iš viršaus į apačią.

CSS loginės savybės ir reikšmės siūlo sprendimą, įvesdamos srautu ir kryptimi pagrįstas sąvokas, o ne fizines kraštines. Tarp šių galingų įrankių border-radius šeima įgauna naujo lankstumo su savo loginiais atitikmenimis. Šiame straipsnyje gilinamasi į CSS loginių kraštinių spindulių savybių pasaulį, paaiškinama jų funkcionalumas ir parodoma jų vertė kuriant tikrai globalias interneto patirtis.

Loginių savybių poreikio supratimas

Istoriškai CSS savybės buvo susietos su fiziniais matmenimis. Pavyzdžiui, margin-left visada prideda tarpą kairėje elemento pusėje. Tai puikiai tinka kalboms, rašomoms iš kairės į dešinę (LTR), pavyzdžiui, anglų, tačiau tampa mažiau intuityvu RTL kalbose, tokiose kaip arabų ar hebrajų, kur „kairė“ pusė iš tikrųjų yra vizualiai dešinė.

Įsivaizduokite svetainę su šonine juosta, esančia kairėje pusėje LTR kalbose. Naudojant margin-left ir float: left viskas veikia puikiai. Tačiau, kai svetainė išverčiama į arabų kalbą, šoninė juosta idealiai turėtų atsirasti dešinėje. Rankinis margin-left keitimas į margin-right ir float: right prideda sudėtingumo ir padidina priežiūros kaštus.

Loginės savybės išsprendžia šią problemą naudodamos tokias sąvokas kaip „pradžia“ (start) ir „pabaiga“ (end), kurios automatiškai prisitaiko pagal rašymo režimą. Tai drastiškai supaprastina maketų, kurie teisingai veikia skirtingose kalbose ir rašymo sistemose, kūrimą.

Pristatome CSS logines kraštinių spindulių savybes

Tradicinė border-radius savybė leidžia apvalinti elemento kampus. Tačiau ji remiasi fizinėmis kryptimis, tokiomis kaip border-top-left-radius, border-top-right-radius, border-bottom-right-radius ir border-bottom-left-radius. CSS loginių savybių ir reikšmių specifikacija pristato naujas, rašymo režimą palaikančias savybes, kurios suteikia didesnį lankstumą ir pritaikomumą:

• border-start-start-radius: Nurodo kraštinės spindulį elemento pradžios-pradžios kampui.
• border-start-end-radius: Nurodo kraštinės spindulį elemento pradžios-pabaigos kampui.
• border-end-start-radius: Nurodo kraštinės spindulį elemento pabaigos-pradžios kampui.
• border-end-end-radius: Nurodo kraštinės spindulį elemento pabaigos-pabaigos kampui.

Čia „pradžia“ (start) ir „pabaiga“ (end) yra santykinės sąvokos, priklausančios nuo turinio rašymo režimo ir krypties. LTR kalboje „pradžia“ atitinka kairę, o „pabaiga“ – dešinę. RTL kalboje „pradžia“ atitinka dešinę, o „pabaiga“ – kairę. Panašiai, vertikaliuose rašymo režimuose „pradžia“ atitinka viršų, o „pabaiga“ – apačią.

Praktiniai pavyzdžiai ir naudojimo atvejai

Panagrinėkime keletą praktinių pavyzdžių, kad iliustruotume, kaip šios loginės kraštinių spindulių savybės gali būti naudojamos kuriant prisitaikančius ir rašymo režimą palaikančius dizainus.

1 pavyzdys: apvalinti mygtukai, prisitaikantys prie rašymo režimo

Apsvarstykime mygtuką su apvalintais kampais. Norime, kad apvalinimas atsirastų priekiniuose ir galiniuose kraštuose, nepriklausomai nuo rašymo režimo.

HTML:

<button class="button">Spausk Mane</button>

CSS:

.button {
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
  border-end-start-radius: 10px;
  border-end-end-radius: 10px;
  /* Arba, naudojant sutrumpinimą: */
  border-radius: 10px;
}

[dir="rtl"] .button {
 /* Jokių pakeitimų nereikia! Naršyklė pati pritaiko rašymo režimą */
}

Šiame pavyzdyje, nepriklausomai nuo to, ar puslapis yra LTR ar RTL, viršutinis kairysis ir viršutinis dešinysis (LTR) arba viršutinis dešinysis ir viršutinis kairysis (RTL) kampai bus apvalinti. Nereikia rašyti atskirų CSS taisyklių skirtingiems rašymo režimams. Naršyklė išmaniai taiko stilius pagal dir atributą.

2 pavyzdys: pokalbių burbulai su dinamišku uodegos išdėstymu

Pokalbių burbulai yra įprastas vartotojo sąsajos elementas. Paprastai burbulo uodega rodo į siuntėją. Naudodami logines savybes, galime lengvai pritaikyti burbulo išvaizdą pagal tai, ar žinutė yra nuo vartotojo, ar nuo kito kontakto, ir atsižvelgti į rašymo režimą.

HTML:

<div class="chat-bubble user">Sveiki!</div>
<div class="chat-bubble other">Labas!</div>

CSS:

.chat-bubble {
  background-color: #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.chat-bubble.user {
  border-start-start-radius: 0; /* Pašalinti spindulį viršutiniame kairiajame (LTR) arba viršutiniame dešiniajame (RTL) kampe */
}

.chat-bubble.other {
  border-start-end-radius: 0; /* Pašalinti spindulį viršutiniame dešiniajame (LTR) arba viršutiniame kairiajame (RTL) kampe */
}

/* RTL kalboms naršyklė automatiškai veidrodiškai atspindi pradžią/pabaigą */
/* Papildomo CSS nereikia */

Šiame scenarijuje .user klasė pašalina kraštinės spindulį „pradžios-pradžios“ kampe, taip sukurdama uodegą. LTR kalboms tai yra viršutinis kairysis kampas. RTL kalboms naršyklė automatiškai interpretuoja „pradžios-pradžią“ kaip viršutinį dešinįjį kampą, užtikrindama, kad uodega visada būtų teisingai išdėstyta be jokių atskirų RTL stilių.

3 pavyzdys: kortelės su kampų paryškinimu

Tarkime, norime paryškinti tam tikrą kortelės kampą, kad nurodytume išskirtinį elementą. Naudojant logines savybes tai tampa neįtikėtinai lankstu.

HTML:

<div class="card featured">
  <h2>Produkto pavadinimas</h2>
  <p>Produkto aprašymas.</p>
</div>

CSS:

.card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}

.card.featured {
  border-end-end-radius: 0; /* Pašalinti spindulį apatiniame dešiniajame (LTR) arba apatiniame kairiajame (RTL) kampe */
  border-top: 3px solid red;
  border-start-start-radius:0; /*Pašalinti viršutinio kairiojo kampo spindulį*/
}

.featured klasė pašalina spindulį iš „pabaigos-pabaigos“ kampo, kuris bus apatinis dešinysis LTR ir apatinis kairysis RTL. Šį efektą naršyklė automatiškai atspindės RTL kalboms.

Loginių kraštinių spindulių savybių naudojimo privalumai

• Supaprastinta internacionalizacija: Rašykite mažiau CSS ir išvenkite sudėtingumo valdant atskirus stilių failus skirtingiems rašymo režimams.
• Patobulintas prisitaikymas: Kurkite maketus, kurie sklandžiau prisitaiko prie skirtingų ekrano dydžių ir orientacijų.
• Padidintas palaikomumas: Loginės savybės lemia švaresnį, glaustesnį kodą, kurį lengviau suprasti ir palaikyti.
• Pagerintas prieinamumas: Teisingai tvarkydami maketą ir kryptį, sukuriate įtraukesnę patirtį visų kalbų ir kultūrų vartotojams.
• Ateities užtikrinimas: Kadangi CSS ir toliau vystosi, loginių savybių naudojimas užtikrina, kad jūsų kodas išliks aktualus ir pritaikomas.

Naršyklių palaikymas ir „Polyfill“ bibliotekos

Dauguma šiuolaikinių naršyklių puikiai palaiko CSS logines savybes ir reikšmes, įskaitant logines kraštinių spindulių savybes. Tačiau senesnėms naršyklėms, kurios neturi vietinio palaikymo, galite naudoti „polyfill“ bibliotekas, kad užtikrintumėte suderinamumą. „Autoprefixer“ dažnai gali atlikti reikiamas transformacijas, kad jūsų kodas veiktų platesniame naršyklių spektre.

Visada gera praktika yra patikrinti dabartinį naršyklių palaikymą tokiuose ištekliuose kaip Can I use prieš įdiegiant šias savybes gamybinėje aplinkoje.

Geroji praktika ir svarstymai

• Nuosekliai naudokite logines savybes: Pradėję naudoti logines savybes, stenkitės jas taikyti visame projekte nuoseklumui užtikrinti. Loginių ir fizinių savybių maišymas gali sukelti painiavą ir netikėtų rezultatų.
• Kruopščiai testuokite: Testuokite savo svetainę skirtingais rašymo režimais (LTR, RTL ir galbūt vertikaliu), kad įsitikintumėte, jog maketas prisitaiko teisingai.
• Atsižvelkite į direction atributą: Atributas direction (dir="ltr" arba dir="rtl") yra būtinas nurodant jūsų turinio rašymo režimą. Įsitikinkite, kad jis teisingai nustatytas <html> elemente arba konkrečiose jūsų puslapio dalyse.
• Naudokite su kitomis loginėmis savybėmis: Derinkite logines kraštinių spindulių savybes su kitomis loginėmis savybėmis, tokiomis kaip margin-inline-start, padding-block-end ir inset-inline-start, kad sukurtumėte tikrai rašymo režimą palaikančius maketus.
• Prieinamumo testavimas: Užtikrinkite, kad jūsų maketai būtų prieinami, naudodami ekrano skaitytuvus ir kitas pagalbines technologijas. Teisinga kryptis yra labai svarbi vartotojams, kurie remiasi šiais įrankiais.

Pažangios technikos ir sutrumpinimai

Kaip ir su standartine `border-radius` savybe, galite naudoti sutrumpinimą, kad nustatytumėte kelis loginius kraštinių spindulius vienu metu:

border-radius: border-start-start-radius border-start-end-radius border-end-end-radius border-end-start-radius;

Taip pat galite naudoti vieną, dvi, tris ar keturias reikšmes, kaip ir su standartine `border-radius` savybe. Šių reikšmių interpretacija laikosi tų pačių taisyklių:

• Viena reikšmė: Visi keturi kampai turi tą patį spindulį.
• Dvi reikšmės: Pirmoji reikšmė taikoma pradžios-pradžios ir pabaigos-pabaigos kampams, o antroji reikšmė taikoma pradžios-pabaigos ir pabaigos-pradžios kampams.
• Trys reikšmės: Pirmoji reikšmė taikoma pradžios-pradžios kampui, antroji reikšmė taikoma pradžios-pabaigos ir pabaigos-pradžios kampams, o trečioji reikšmė taikoma pabaigos-pabaigos kampui.
• Keturios reikšmės: Kiekviena reikšmė taikoma konkrečiam kampui eilės tvarka: pradžios-pradžios, pradžios-pabaigos, pabaigos-pabaigos, pabaigos-pradžios.

Pavyzdžiui:

border-radius: 10px; /* Visi kampai turi 10px spindulį */
border-radius: 10px 20px; /* pradžios-pradžios ir pabaigos-pabaigos: 10px, pradžios-pabaigos ir pabaigos-pradžios: 20px */
border-radius: 10px 20px 30px; /* pradžios-pradžios: 10px, pradžios-pabaigos ir pabaigos-pradžios: 20px, pabaigos-pabaigos: 30px */
border-radius: 10px 20px 30px 40px; /* pradžios-pradžios: 10px, pradžios-pabaigos: 20px, pabaigos-pabaigos: 30px, pabaigos-pradžios: 40px */

Išvada: pasitelkite logines savybes globaliam internetui

CSS loginės savybės ir reikšmės, įskaitant logines kraštinių spindulių savybes, yra esminiai įrankiai kuriant tikrai globalias ir prieinamas interneto patirtis. Suprasdami ir naudodami šias savybes, galite ženkliai supaprastinti savo dizainų pritaikymą skirtingoms kalboms, kultūroms ir rašymo režimams.

Kadangi internetas tampa vis globalesnis, labai svarbu taikyti geriausias praktikas, kurios užtikrina įtrauktį ir prieinamumą visiems vartotojams. Pasitelkite logines savybes, kruopščiai testuokite ir kurkite svetaines, kurios sklandžiai veikia skirtingose kalbose ir rašymo sistemose.

Atsisakydami fizinių matmenų ir pasitelkdami logines sąvokas, sukursite lengviau prižiūrimas, labiau prisitaikančias ir patogesnes vartotojui svetaines, kurios atitiks įvairialypės pasaulinės auditorijos poreikius.

Papildomi ištekliai

• MDN Web Docs: CSS Loginės savybės ir reikšmės
• W3C CSS Loginės savybės ir reikšmės, 1 lygis
• Can I use (naršyklių palaikymo tikrinimui)