CSS-i loogilised omadused: veebisaitide ehitamine globaalsele publikule

Tänapäeva ühendatud maailmas peavad veebisaidid olema suunatud globaalsele publikule. See tähendab erinevate keelte, kirjaviiside ja kultuuriliste tavade toetamist. Traditsioonilised CSS-i omadused, mis põhinevad füüsilistel mõõtmetel (üleval, paremal, all, vasakul), võivad muutuda problemaatiliseks, kui tegeleda paigutustega, mis voogavad erinevates suundades. CSS-i loogilised omadused pakuvad lahendust, määratledes paigutuse sisuvoo, mitte füüsilise ekraani orientatsiooni alusel. See artikkel süveneb CSS-i loogiliste omaduste võimsusse ja sellesse, kuidas need aitavad teil luua tõeliselt rahvusvahelisi veebisaite.

Loogiliste omaduste vajaduse mõistmine

Traditsiooniliselt eeldavad CSS-i omadused nagu margin-left ja padding-right vasakult-paremale (LTR) kirjaviisi. Kuid paljud keeled, näiteks araabia ja heebrea keel, kasutavad paremalt-vasakule (RTL) kirjaviisi. Kasutades traditsioonilist CSS-i RTL-veebisaidil, peaksite sageli nende omaduste väärtused ümber pöörama, mis viib keerukate ja vigadele altide stiililehtedeni. Lisaks saab mõningaid Ida-Aasia keeli kirjutada vertikaalselt, lisades veel ühe keerukuse kihi. Loogilised omadused lahendavad need probleemid, pakkudes viisi stiilide määratlemiseks sisu voo, mitte selle füüsilise asukoha alusel ekraanil. See tagab, et teie paigutused kohanduvad automaatselt erinevate kirjaviiside ja suundadega.

Füüsiliste omaduste probleem

Kujutage ette lihtsat navigeerimismenüüd, mille elemente eraldab veeris. Füüsilisi omadusi kasutades võiksite kirjutada:

            .nav-item {
 margin-right: 10px;
}

            

              
                Copy
              
            
          

See töötab LTR-keelte puhul ideaalselt. Kuid kui veebisaiti renderdatakse RTL-keeles, ilmub veeris navigeerimismenüü elementide valele poolele. Selle parandamiseks peaksite lisama teise CSS-i reegli spetsiaalselt RTL-paigutuste jaoks:

            [dir="rtl"] .nav-item {
 margin-right: 0;
 margin-left: 10px;
}

            

              
                Copy
              
            
          

See lähenemine on tülikas ja muudab teie CSS-i hooldamise keerulisemaks. Loogilised omadused pakuvad palju puhtamat ja hooldatavamat lahendust.

CSS-i loogiliste omaduste tutvustus

CSS-i loogilised omadused asendavad füüsilised omadused (üleval, paremal, all, vasakul) loogiliste vastetega, mis on seotud sisu kirjaviisi ja suunalisusega. Siin on mõned peamised loogilised omadused ja nende vastavad füüsilised omadused:

• margin-inline-start: Vastab margin-left omadusele LTR-is ja margin-right omadusele RTL-is.
• margin-inline-end: Vastab margin-right omadusele LTR-is ja margin-left omadusele RTL-is.
• padding-inline-start: Vastab padding-left omadusele LTR-is ja padding-right omadusele RTL-is.
• padding-inline-end: Vastab padding-right omadusele LTR-is ja padding-left omadusele RTL-is.
• border-inline-start: Vastab border-left omadusele LTR-is ja border-right omadusele RTL-is.
• border-inline-end: Vastab border-right omadusele LTR-is ja border-left omadusele RTL-is.
• inset-inline-start: Vastab left omadusele LTR-is ja right omadusele RTL-is.
• inset-inline-end: Vastab right omadusele LTR-is ja left omadusele RTL-is.
• margin-block-start: Vastab margin-top omadusele nii LTR-is kui ka RTL-is.
• margin-block-end: Vastab margin-bottom omadusele nii LTR-is kui ka RTL-is.
• padding-block-start: Vastab padding-top omadusele nii LTR-is kui ka RTL-is.
• padding-block-end: Vastab padding-bottom omadusele nii LTR-is kui ka RTL-is.
• border-block-start: Vastab border-top omadusele nii LTR-is kui ka RTL-is.
• border-block-end: Vastab border-bottom omadusele nii LTR-is kui ka RTL-is.
• inset-block-start: Vastab top omadusele nii LTR-is kui ka RTL-is.
• inset-block-end: Vastab bottom omadusele nii LTR-is kui ka RTL-is.
• inline-size: Esindab horisontaalset mõõdet. Vastab width omadusele horisontaalsete kirjaviiside puhul.
• block-size: Esindab vertikaalset mõõdet. Vastab height omadusele horisontaalsete kirjaviiside puhul.

Terminid "inline" (rea-) ja "block" (ploki-) viitavad teksti voo suunale. Reasuund on suund, milles tekst voolab rea piires (nt vasakult paremale või paremalt vasakule). Plokisuund on suund, milles tekstiplokid on üksteise peale laotud (nt ülalt alla). Nende loogiliste omaduste kasutamine võimaldab teil määratleda stiile, mis on kirjaviisist ja suunast sõltumatud.

Loogiliste omaduste kasutamise praktilised näited

Näide 1: Navigeerimismenüü

Vaatame uuesti navigeerimismenüü näidet. margin-right asemel saame kasutada margin-inline-end:

            .nav-item {
 margin-inline-end: 10px;
}

            

              
                Copy
              
            
          

Nüüd, olenemata sellest, kas veebisait on LTR või RTL, ilmub veeris alati navigeerimismenüü elementide õigele poolele. Pole vaja eraldi RTL-spetsiifilisi CSS-i reegleid!

Näide 2: Kaardipaigutus

Kujutage ette kaardipaigutust, kus ühel pool on pilt ja teisel tekst. Saame kasutada loogilisi omadusi pildi korrektseks paigutamiseks, olenemata kirjaviisist:

            .card {
 display: flex;
}

.card-image {
 flex: 0 0 150px;
}

.card-content {
 padding-inline-start: 20px; /* Kohanda pildi ja teksti vahelist ruumi */
}

            

              
                Copy
              
            
          

Selles näites lisab padding-inline-start täidise sisu vasakule poolele LTR-is ja paremale poolele RTL-is, tagades, et tekst on alati pildist visuaalselt eraldatud.

Näide 3: Vormi sildid

Vormide kujundamisel paigutatakse sildid tavaliselt LTR-paigutustes sisestusväljadest vasakule. RTL-paigutustes peaksid sildid olema paremal. Loogilised omadused teevad selle lihtsaks:

            label {
 display: inline-block;
 text-align: end;
 width: 100px;
 margin-inline-end: 10px; /* Sildi ja sisestusvälja vaheline ruum */
}

            

              
                Copy
              
            
          

Omadus text-align: end joondab teksti paremale LTR-is ja vasakule RTL-is. Omadus margin-inline-end lisab õigele poolele ruumi sildi ja sisestusvälja vahele.

Loogiliste omaduste kasutamine kirjaviisidega

CSS-i kirjaviisid (Writing Modes) kontrollivad suunda, milles tekst voolab, nii horisontaalselt kui ka vertikaalselt. Loogilised omadused on eriti kasulikud erinevate kirjaviisidega, näiteks vertikaalse tekstiga töötamisel. Omadus writing-mode võib võtta väärtusi nagu horizontal-tb (vaikimisi, horisontaalne ülalt alla), vertical-rl (vertikaalne paremalt vasakule) ja vertical-lr (vertikaalne vasakult paremale).

Vertikaalsete kirjaviiside kasutamisel muutub loogiliste omaduste tähendus. Näiteks margin-inline-start ja margin-inline-end viitavad nüüd vastavalt ülemisele ja alumisele veerisele.

Näide: Vertikaalne navigeerimine

Loome vertikaalse navigeerimismenüü:

            .vertical-nav {
 writing-mode: vertical-rl; /* või vertical-lr */
}

.vertical-nav-item {
 margin-block-end: 10px; /* Elementide vaheline ruum */
}

            

              
                Copy
              
            
          

Selles näites lisab margin-block-end ruumi navigeerimismenüü elementide vahele vertikaalses suunas.

Suunalisus: LTR ja RTL

Omadus direction määrab teksti voo suuna elemendi sees. Sellel võib olla kaks väärtust: ltr (vasakult paremale) ja rtl (paremalt vasakule). Seda omadust kasutatakse sageli koos lang atribuudiga <html> sildil või konkreetsetel elementidel, et näidata sisu keelt ja suunalisust.

            <html lang="ar" dir="rtl">
 <body>
 <!-- Araabiakeelne sisu siin -->
 </body>
</html>

            

              
                Copy
              
            
          

Kui dir atribuudi väärtuseks on seatud rtl, pöörab veebilehitseja automaatselt reasisese sisu suuna ümber ja rakendab vastavad stiilid loogiliste omaduste põhjal.

Loogiliste omaduste kasutamise eelised

• Parem rahvusvahelistamine (i18n) ja lokaliseerimine (l10n): Loogilised omadused lihtsustavad veebisaitide loomist, mis kohanduvad erinevate keelte, kirjaviiside ja kultuuriliste tavadega.
• Väiksem CSS-i keerukus: Kõrvaldades vajaduse eraldi RTL-spetsiifiliste CSS-reeglite järele, lihtsustavad loogilised omadused teie stiililehti ja muudavad need kergemini hooldatavaks.
• Parem koodi loetavus: Loogiliste omaduste nimed on kirjeldavamad ja lihtsamini mõistetavad kui füüsiliste omaduste nimed, mis viib loetavama koodini.
• Parem jõudlus: Väiksem CSS-i keerukus võib parandada veebisaidi jõudlust, kuna veebilehitsejal on vähem CSS-i, mida sõeluda ja rakendada.
• Tulevikukindlus: Veebistandardite arenedes muutuvad loogilised omadused tõenäoliselt veelgi olulisemaks paindlike ja kohandatavate veebisaitide loomisel.

Veebilehitsejate ühilduvus

Enamik kaasaegseid veebilehitsejaid, sealhulgas Chrome, Firefox, Safari ja Edge, toetavad CSS-i loogilisi omadusi hästi. Vanemad veebilehitsejad ei pruugi neid aga täielikult toetada. Alati on hea mõte kontrollida veebilehitsejate ühilduvustabeleid (nt caniuse.com-is), enne kui hakkate loogilisi omadusi laialdaselt kasutama. Samuti saate kasutada tööriistu nagu Autoprefixer, et automaatselt genereerida varuomadusi vanematele veebilehitsejatele.

Loogiliste omaduste kasutamise parimad praktikad

• Alustage loogiliste omadustega: Võimaluse korral kasutage paigutusstiilide määratlemisel füüsiliste omaduste asemel loogilisi omadusi.
• Kasutage dir atribuuti: Kasutage dir atribuuti <html> sildil või konkreetsetel elementidel, et näidata sisu suunalisust.
• Testige põhjalikult: Testige oma veebisaiti erinevates keeltes ja kirjaviisides, et tagada paigutuse korrektne kohandumine. Kasutage veebilehitseja arendaja tööriistu rakendatud stiilide kontrollimiseks ja probleemide tuvastamiseks.
• Kaaluge varuvariante: Vanemate veebilehitsejate jaoks, mis ei toeta loogilisi omadusi, kaaluge varuomaduste või tööriistade, näiteks Autoprefixeri, kasutamist.
• Säilitage järjepidevus: Kasutage loogilisi omadusi kogu oma stiililehel järjepidevalt, et vältida segadust ja säilitada ühtlane disain.
• Õppige terminoloogiat: Tehke endale selgeks terminid "inline" ja "block" ning kuidas need on seotud kirjaviiside ja suunalisusega.
• Kasutage CSS-muutujaid: Saate kasutada CSS-muutujaid loogiliste omaduste väärtuste määratlemiseks ja nende taaskasutamiseks kogu oma stiililehel. See aitab säilitada järjepidevust ja lihtsustab stiilide värskendamist. Näiteks:

            :root {
 --spacing-inline: 10px;
}

.element {
 margin-inline-start: var(--spacing-inline);
 padding-inline-end: var(--spacing-inline);
}

            

              
                Copy
              
            
          

Täpsemad tehnikad

calc() kasutamine loogiliste omadustega

Saate kasutada calc() funktsiooni koos loogiliste omadustega, et teha arvutusi sisu või muude elementide suuruse põhjal. Näiteks:

            .container {
 width: 100%;
}

.element {
 margin-inline-start: calc(50% - 100px); /* Tsentreeri element */
}

            

              
                Copy
              
            
          

Loogiliste omaduste kombineerimine Flexboxi ja Gridiga

Loogilised omadused töötavad sujuvalt koos CSS Flexboxi ja Grid paigutustega. Saate neid kasutada elementide joonduse ja jaotuse kontrollimiseks flex- või grid-konteineris. Näiteks:

            .flex-container {
 display: flex;
 justify-content: space-between;
 padding-inline-start: 20px;
 padding-inline-end: 20px;
}

            

              
                Copy
              
            
          

Loogiliste omaduste kasutamine JavaScriptiga

Saate kasutada JavaScripti, et tuvastada sisu suunalisust ja rakendada sobivaid stiile loogiliste omaduste põhjal. Näiteks:

            const isRtl = document.documentElement.getAttribute('dir') === 'rtl';

if (isRtl) {
 // Rakenda RTL-spetsiifilisi stiile
 document.body.classList.add('rtl');
}

            

              
                Copy
              
            
          

Seejärel oma CSS-is:

            .element {
 margin-inline-start: 10px; /* Vaikimisi LTR-stiil */
}

.rtl .element {
 margin-inline-start: 0; /* Ülekirjutus RTL-i jaoks */
 margin-inline-end: 10px;
}

            

              
                Copy
              
            
          

Kuigi see lähenemine on võimalik, on üldiselt parem tugineda võimaluse korral CSS-i loogilistele omadustele ja dir atribuudile, kuna see hoiab teie koodi puhtama ja hooldatavamana.

Juurdepääsetavuse kaalutlused

Loogiliste omaduste kasutamine võib parandada ka teie veebisaidi juurdepääsetavust. Tagades, et teie paigutus kohandub korrektselt erinevate kirjaviisidega, saate muuta puuetega kasutajatele teie sisu navigeerimise ja mõistmise lihtsamaks. Näiteks võivad ekraanilugejaid kasutavad kasutajad tugineda elementide õigele lugemisjärjekorrale, mida võib mõjutada kirjutamissuund. Loogiliste omaduste kasutamine aitab tagada, et lugemisjärjekord on keelest olenemata järjepidev.

Kokkuvõte

CSS-i loogilised omadused on võimas tööriist veebisaitide ehitamiseks, mis on suunatud globaalsele publikule. Kasutades füüsiliste omaduste asemel loogilisi omadusi, saate luua paigutusi, mis kohanduvad automaatselt erinevate keelte, kirjaviiside ja kultuuriliste tavadega. See viib parema rahvusvahelistamise, väiksema CSS-i keerukuse ja parema koodi loetavuseni. Võtke omaks CSS-i loogilised omadused ja looge tõeliselt globaalseid ja juurdepääsetavaid veebikogemusi kõigile.

Lisalugemist

• MDN Web Docs: CSS Logical Properties
• CSS Logical Properties and Values Level 1
• Can I Use: CSS Logical Properties