CSS:n loogiset ominaisuudet: Verkkosivustojen rakentaminen globaalille yleisölle

Nykypäivän verkostoituneessa maailmassa verkkosivustojen on palveltava globaalia yleisöä. Tämä tarkoittaa erilaisten kielten, kirjoitustapojen ja kulttuuristen käytäntöjen tukemista. Perinteiset CSS-ominaisuudet, jotka perustuvat fyysisiin mittoihin (top, right, bottom, left), voivat olla ongelmallisia käsiteltäessä eri suuntiin virtaavia asetteluita. CSS:n loogiset ominaisuudet tarjoavat ratkaisun määrittelemällä asettelun sisällön virtauksen, ei fyysisen näytön suunnan, perusteella. Tässä artikkelissa syvennymme CSS:n loogisten ominaisuuksien voimaan ja siihen, miten ne voivat auttaa sinua rakentamaan todella kansainvälisiä verkkosivustoja.

Loogisten ominaisuuksien tarpeen ymmärtäminen

Perinteisesti CSS-ominaisuudet, kuten margin-left ja padding-right, olettavat vasemmalta oikealle (LTR) -kirjoitustavan. Monet kielet, kuten arabia ja heprea, käyttävät kuitenkin oikealta vasemmalle (RTL) -kirjoitustapaa. Kun perinteistä CSS:ää käytetään RTL-verkkosivustolla, näiden ominaisuuksien arvot on usein käännettävä, mikä johtaa monimutkaisiin ja virheherkkiin tyylitiedostoihin. Lisäksi jotkin itäaasialaiset kielet voidaan kirjoittaa pystysuunnassa, mikä tuo mukanaan uuden monimutkaisuuden tason. Loogiset ominaisuudet ratkaisevat nämä ongelmat tarjoamalla tavan määritellä tyylejä sisällön virtauksen perusteella sen sijaan, että ne perustuisivat sen fyysiseen sijaintiin näytöllä. Tämä varmistaa, että asettelusi mukautuvat automaattisesti erilaisiin kirjoitustapoihin ja -suuntiin.

Fyysisten ominaisuuksien ongelma

Tarkastellaan yksinkertaista navigointivalikkoa, jonka kohteet on erotettu marginaalilla. Fyysisiä ominaisuuksia käyttämällä voisit kirjoittaa:

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

            

              
                Copy
              
            
          

Tämä toimii täydellisesti LTR-kielillä. Kun verkkosivusto kuitenkin renderöidään RTL-kielellä, marginaali ilmestyy navigointikohteiden väärälle puolelle. Korjataksesi tämän sinun olisi lisättävä toinen CSS-sääntö erityisesti RTL-asetteluita varten:

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

            

              
                Copy
              
            
          

Tämä lähestymistapa on kömpelö ja tekee CSS:stä vaikeammin ylläpidettävän. Loogiset ominaisuudet tarjoavat paljon siistimmän ja ylläpidettävämmän ratkaisun.

CSS:n loogisten ominaisuuksien esittely

CSS:n loogiset ominaisuudet korvaavat fyysiset ominaisuudet (top, right, bottom, left) loogisilla vastineilla, jotka ovat suhteessa sisällön kirjoitustapaan ja suuntaan. Tässä on joitakin keskeisiä loogisia ominaisuuksia ja niiden vastaavia fyysisiä ominaisuuksia:

• margin-inline-start: Vastaa ominaisuutta margin-left LTR-tilassa ja margin-right RTL-tilassa.
• margin-inline-end: Vastaa ominaisuutta margin-right LTR-tilassa ja margin-left RTL-tilassa.
• padding-inline-start: Vastaa ominaisuutta padding-left LTR-tilassa ja padding-right RTL-tilassa.
• padding-inline-end: Vastaa ominaisuutta padding-right LTR-tilassa ja padding-left RTL-tilassa.
• border-inline-start: Vastaa ominaisuutta border-left LTR-tilassa ja border-right RTL-tilassa.
• border-inline-end: Vastaa ominaisuutta border-right LTR-tilassa ja border-left RTL-tilassa.
• inset-inline-start: Vastaa ominaisuutta left LTR-tilassa ja right RTL-tilassa.
• inset-inline-end: Vastaa ominaisuutta right LTR-tilassa ja left RTL-tilassa.
• margin-block-start: Vastaa ominaisuutta margin-top sekä LTR- että RTL-tilassa.
• margin-block-end: Vastaa ominaisuutta margin-bottom sekä LTR- että RTL-tilassa.
• padding-block-start: Vastaa ominaisuutta padding-top sekä LTR- että RTL-tilassa.
• padding-block-end: Vastaa ominaisuutta padding-bottom sekä LTR- että RTL-tilassa.
• border-block-start: Vastaa ominaisuutta border-top sekä LTR- että RTL-tilassa.
• border-block-end: Vastaa ominaisuutta border-bottom sekä LTR- että RTL-tilassa.
• inset-block-start: Vastaa ominaisuutta top sekä LTR- että RTL-tilassa.
• inset-block-end: Vastaa ominaisuutta bottom sekä LTR- että RTL-tilassa.
• inline-size: Edustaa horisontaalista ulottuvuutta. Vastaa width-ominaisuutta horisontaalisissa kirjoitustavoissa.
• block-size: Edustaa vertikaalista ulottuvuutta. Vastaa height-ominaisuutta horisontaalisissa kirjoitustavoissa.

Termit "inline" ja "block" viittaavat tekstin virtaussuuntaan. Inline-suunta on suunta, johon teksti virtaa rivin sisällä (esim. vasemmalta oikealle tai oikealta vasemmalle). Block-suunta on suunta, johon tekstilohkot pinotaan (esim. ylhäältä alas). Näiden loogisten ominaisuuksien avulla voit määritellä tyylejä, jotka ovat riippumattomia kirjoitustavasta ja -suunnasta.

Käytännön esimerkkejä loogisten ominaisuuksien käytöstä

Esimerkki 1: Navigointivalikko

Palataan navigointivalikkoesimerkkiin. Sen sijaan, että käyttäisimme margin-right-ominaisuutta, voimme käyttää margin-inline-end-ominaisuutta:

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

            

              
                Copy
              
            
          

Nyt riippumatta siitä, onko verkkosivusto LTR- vai RTL-muodossa, marginaali ilmestyy aina navigointikohteiden oikealle puolelle. Ei tarvetta erillisille RTL-kohtaisille CSS-säännöille!

Esimerkki 2: Korttiasettelu

Tarkastellaan korttiasettelua, jossa on kuva toisella puolella ja teksti toisella. Voimme käyttää loogisia ominaisuuksia kuvan sijoittamiseen oikein kirjoitustavasta riippumatta:

            .card {
 display: flex;
}

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

.card-content {
 padding-inline-start: 20px; /* Säädä kuvan ja tekstin väliä */
}

            

              
                Copy
              
            
          

Tässä esimerkissä padding-inline-start lisää täytettä sisällön vasemmalle puolelle LTR-tilassa ja oikealle puolelle RTL-tilassa, varmistaen, että teksti on aina visuaalisesti erotettu kuvasta.

Esimerkki 3: Lomakkeen otsikot

Lomakkeita suunniteltaessa otsikot sijoitetaan tyypillisesti syöttökenttien vasemmalle puolelle LTR-asetteluissa. RTL-asetteluissa otsikoiden tulisi olla oikealla. Loogiset ominaisuudet tekevät tästä helppoa:

            label {
 display: inline-block;
 text-align: end;
 width: 100px;
 margin-inline-end: 10px; /* Väli otsikon ja syöttökentän välillä */
}

            

              
                Copy
              
            
          

Ominaisuus text-align: end tasaa tekstin oikealle LTR-tilassa ja vasemmalle RTL-tilassa. Ominaisuus margin-inline-end lisää tilaa otsikon ja syöttökentän väliin oikealle puolelle.

Loogisten ominaisuuksien käyttäminen kirjoitustapojen kanssa

CSS:n kirjoitustavat (Writing Modes) hallitsevat tekstin virtaussuuntaa sekä vaaka- että pystysuunnassa. Loogiset ominaisuudet ovat erityisen hyödyllisiä työskenneltäessä erilaisten kirjoitustapojen, kuten pystysuoran tekstin, kanssa. Ominaisuus writing-mode voi saada arvoja kuten horizontal-tb (oletus, vaakasuora ylhäältä alas), vertical-rl (pystysuora oikealta vasemmalle) ja vertical-lr (pystysuora vasemmalta oikealle).

Kun käytetään pystysuoria kirjoitustapoja, loogisten ominaisuuksien merkitys muuttuu. Esimerkiksi margin-inline-start ja margin-inline-end viittaavat nyt vastaavasti ylä- ja alamarginaaleihin.

Esimerkki: Pystysuora navigointi

Luodaan pystysuora navigointivalikko:

            .vertical-nav {
 writing-mode: vertical-rl; /* tai vertical-lr */
}

.vertical-nav-item {
 margin-block-end: 10px; /* Väli kohteiden välillä */
}

            

              
                Copy
              
            
          

Tässä esimerkissä margin-block-end lisää tilaa navigointikohteiden väliin pystysuunnassa.

Suunta: LTR ja RTL

Ominaisuus direction määrittää tekstin virtaussuunnan elementin sisällä. Sillä voi olla kaksi arvoa: ltr (vasemmalta oikealle) ja rtl (oikealta vasemmalle). Tätä ominaisuutta käytetään usein yhdessä lang-attribuutin kanssa <html>-tagissa tai tietyissä elementeissä ilmaisemaan sisällön kieltä ja suuntaa.

            <html lang="ar" dir="rtl">
 <body>
 <!-- Arabialaista sisältöä tähän -->
 </body>
</html>

            

              
                Copy
              
            
          

Kun dir-attribuutti on asetettu arvoon rtl, selain kääntää automaattisesti inline-sisällön suunnan ja soveltaa asianmukaiset tyylit loogisten ominaisuuksien perusteella.

Loogisten ominaisuuksien hyödyt

• Parannettu kansainvälistäminen (i18n) ja lokalisointi (l10n): Loogiset ominaisuudet helpottavat sellaisten verkkosivustojen luomista, jotka mukautuvat eri kieliin, kirjoitustapoihin ja kulttuurisiin käytäntöihin.
• Vähentynyt CSS-monimutkaisuus: Poistamalla tarpeen erillisille RTL-kohtaisille CSS-säännöille loogiset ominaisuudet yksinkertaistavat tyylitiedostojasi ja tekevät niistä helpommin ylläpidettäviä.
• Parannettu koodin luettavuus: Loogisten ominaisuuksien nimet ovat kuvaavampia ja helpommin ymmärrettäviä kuin fyysisten ominaisuuksien nimet, mikä johtaa luettavampaan koodiin.
• Parempi suorituskyky: Vähentynyt CSS-monimutkaisuus voi johtaa parempaan verkkosivuston suorituskykyyn, koska selaimella on vähemmän CSS:ää jäsennettävänä ja sovellettavana.
• Tulevaisuudenkestävyys: Verkkostandardien kehittyessä loogisista ominaisuuksista tulee todennäköisesti entistä tärkeämpiä joustavien ja mukautuvien verkkosivustojen luomisessa.

Selainyhteensopivuus

Useimmat nykyaikaiset selaimet tukevat hyvin CSS:n loogisia ominaisuuksia, mukaan lukien Chrome, Firefox, Safari ja Edge. Vanhemmat selaimet eivät kuitenkaan välttämättä tue niitä täysin. On aina hyvä tarkistaa selainyhteensopivuustaulukot (esim. osoitteesta caniuse.com) ennen loogisten ominaisuuksien laajamittaista käyttöä. Voit myös käyttää työkaluja, kuten Autoprefixer, luomaan automaattisesti varalla olevia ominaisuuksia vanhemmille selaimille.

Parhaat käytännöt loogisten ominaisuuksien käyttämiseen

• Aloita loogisilla ominaisuuksilla: Käytä aina kun mahdollista loogisia ominaisuuksia fyysisten ominaisuuksien sijaan, kun määrität asettelutyylejä.
• Käytä dir-attribuuttia: Käytä dir-attribuuttia <html>-tagissa tai tietyissä elementeissä ilmaisemaan sisällön suuntaa.
• Testaa perusteellisesti: Testaa verkkosivustoasi eri kielillä ja kirjoitustavoilla varmistaaksesi, että asettelu mukautuu oikein. Käytä selaimen kehittäjätyökaluja tarkastellaksesi sovellettuja tyylejä ja tunnistaaksesi mahdolliset ongelmat.
• Harkitse vararatkaisuja: Vanhemmille selaimille, jotka eivät tue loogisia ominaisuuksia, harkitse varalla olevien ominaisuuksien tai työkalujen, kuten Autoprefixer, käyttöä.
• Ylläpidä johdonmukaisuutta: Käytä loogisia ominaisuuksia johdonmukaisesti koko tyylitiedostossasi välttääksesi sekaannusta ja ylläpitääksesi yhtenäistä suunnittelua.
• Opi terminologia: Tutustu termeihin "inline" ja "block" ja siihen, miten ne liittyvät kirjoitustapoihin ja suuntaan.
• Käytä CSS-muuttujia: Voit käyttää CSS-muuttujia määrittämään arvoja loogisille ominaisuuksille ja käyttää niitä uudelleen koko tyylitiedostossasi. Tämä auttaa ylläpitämään johdonmukaisuutta ja helpottaa tyylien päivittämistä. Esimerkiksi:

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

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

            

              
                Copy
              
            
          

Edistyneet tekniikat

calc()-funktion käyttäminen loogisten ominaisuuksien kanssa

Voit käyttää calc()-funktiota loogisten ominaisuuksien kanssa suorittaaksesi laskelmia, jotka perustuvat sisällön tai muiden elementtien kokoon. Esimerkiksi:

            .container {
 width: 100%;
}

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

            

              
                Copy
              
            
          

Loogisten ominaisuuksien yhdistäminen Flexboxiin ja Gridiin

Loogiset ominaisuudet toimivat saumattomasti CSS Flexbox- ja Grid-asettelujen kanssa. Voit käyttää niitä hallitsemaan kohteiden tasausta ja jakautumista flex- tai grid-säiliön sisällä. Esimerkiksi:

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

            

              
                Copy
              
            
          

Loogisten ominaisuuksien käyttäminen JavaScriptin kanssa

Voit käyttää JavaScriptiä havaitsemaan sisällön suunnan ja soveltamaan asianmukaisia tyylejä loogisten ominaisuuksien perusteella. Esimerkiksi:

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

if (isRtl) {
 // Sovella RTL-kohtaisia tyylejä
 document.body.classList.add('rtl');
}

            

              
                Copy
              
            
          

Sitten CSS:ssäsi:

            .element {
 margin-inline-start: 10px; /* Oletusarvoinen LTR-tyyli */
}

.rtl .element {
 margin-inline-start: 0; /* Korvaus RTL:lle */
 margin-inline-end: 10px;
}

            

              
                Copy
              
            
          

Vaikka tämä lähestymistapa on mahdollinen, on yleensä parempi luottaa CSS:n loogisiin ominaisuuksiin ja dir-attribuuttiin aina kun mahdollista, sillä tämä pitää koodisi siistimpänä ja helpommin ylläpidettävänä.

Saavutettavuusnäkökohdat

Loogisten ominaisuuksien käyttö voi myös parantaa verkkosivustosi saavutettavuutta. Varmistamalla, että asettelusi mukautuu oikein eri kirjoitustapoihin, voit helpottaa vammaisten käyttäjien navigointia ja sisällön ymmärtämistä. Esimerkiksi ruudunlukijoita käyttävät käyttäjät saattavat luottaa elementtien oikeaan lukemisjärjestykseen, johon kirjoitussuunta voi vaikuttaa. Loogisten ominaisuuksien käyttö auttaa varmistamaan, että lukemisjärjestys on johdonmukainen kielestä riippumatta.

Yhteenveto

CSS:n loogiset ominaisuudet ovat tehokas työkalu globaalille yleisölle suunnattujen verkkosivustojen rakentamiseen. Käyttämällä loogisia ominaisuuksia fyysisten ominaisuuksien sijaan voit luoda asetteluita, jotka mukautuvat automaattisesti eri kieliin, kirjoitustapoihin ja kulttuurisiin käytäntöihin. Tämä johtaa parempaan kansainvälistämiseen, pienempään CSS-monimutkaisuuteen ja parempaan koodin luettavuuteen. Ota CSS:n loogiset ominaisuudet käyttöön ja luo todella globaaleja ja saavutettavia verkkokokemuksia kaikille.

Lisälukemista

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