Miksi loogiset ominaisuudet ovat tärkeitä: kansainvälistäminen
Ymmärtäkää, miksi fyysiset CSS-ominaisuudet rikkovat RTL-asetteluja ja miten loogiset ominaisuudet korjaavat ongelman.
Miksi loogiset ominaisuudet ovat tärkeitä: kansainvälistäminen on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Fyysisten ominaisuuksien ongelma
Perinteinen CSS käyttää fyysisiä suuntia: top, right, bottom ja left. Ne sopivat hyvin vasemmalta oikealle eteneville (LTR) kielille, kuten englannille, mutta eivät toimi oikein oikealta vasemmalle etenevissä (RTL) kielissä, kuten arabiassa ja hepreaksi, tai pystysuuntaisissa kirjoitusjärjestelmissä, kuten perinteisessä japanissa.
Fyysiset ja loogiset ominaisuudet
Verrataan:
- Fyysiset: top, right, bottom, left – sidottuja näyttöön
- Loogiset: block-start, block-end, inline-start, inline-end – suhteessa kirjoitustilaan
Lohko- ja inline-akselit
Jokaisella kirjoitusjärjestelmällä on:
- Lohkoakseli: suunta, johon tekstilohkot pinoutuvat (LTR- ja RTL-kirjoituksessa pystysuora, pystykirjoituksessa vaakasuora)
- Inline-akseli: suunta, johon teksti etenee rivillä (LTR- ja RTL-kirjoituksessa vaakasuora, pystykirjoituksessa pystysuora)
LTR- ja RTL-asettelu
LTR-kirjoituksessa (englanti): inline-start = vasen ja inline-end = oikea. RTL-kirjoituksessa (arabia): inline-start = oikea ja inline-end = vasen. Loogiset ominaisuudet mukautuvat automaattisesti ilman media queryja tai JavaScriptiä.
Fyysisten ominaisuuksien todellinen hinta
Fyysisiä ominaisuuksia käyttävä sivusto tarvitsee erillisen RTL-ohitustyylitiedoston tai ominaisuuskohtaiset ohitukset jokaiselle käännettävälle margin-, padding-, border-, position- ja text-alignment-ominaisuudelle. Tämä kaksinkertaistaa ylläpitotyön.
Kirjoitustila vaikuttaa akseleihin
Kun writing-mode: vertical-rl on asetettu (pystysuuntainen japani tai korea), lohkoakselista tulee vaakasuora ja inline-akselista pystysuora. Loogiset ominaisuudet mukautuvat automaattisesti.
<div class="vertical-text">縦書きテキスト Vertical Text</div>
Käyttöönotto nykyaikaisessa CSS:ssä
Kaikki tärkeimmät selaimet tukevat loogisia ominaisuuksia. CSS-määritys suosittelee nykyään loogisten ominaisuuksien käyttämistä kaikille ominaisuuksille, jotka liittyvät suuntaan, joka voi muuttua kirjoitustilan tai suunnan mukaan.
Käytännön vaikutus
Oikein loogisia ominaisuuksia käyttävä yksittäinen koodikanta tukee LTR-, RTL- ja pystykirjoitusta ilman päällekkäistä koodia. CSS seuraa yksinkertaisesti juurielementin direction- ja writing-mode-arvoja.
dir="rtl" HTML:ssä
Asettakaa kirjoitussuunta HTML:ssä, ei pelkästään CSS:ssä:
<div dir="rtl" lang="ar" class="rtl-demo">هذا نص من اليمين إلى اليسار</div>
Vaiheittainen käyttöönotto
Kaikkea CSS:ää ei tarvitse kirjoittaa uudelleen kerralla. Aloittakaa käyttämällä loogisia ominaisuuksia uusissa komponenteissa. Muuttakaa ajan mittaan fyysiset ominaisuudet komponenteissa, jotka kuuluvat kansainvälistymisen kannalta herkkiin alueisiin.
CSS:n direction-ominaisuus
CSS:n direction-ominaisuus (ltr tai rtl) vaikuttaa inline-suunnan etenemiseen. Se toimii yhdessä writing-mode-ominaisuuden kanssa ja määrittää elementin koko kirjoitusjärjestelmän kontekstin.
Pikatarkistus
Miksi fyysiset CSS-ominaisuudet, kuten margin-left, aiheuttavat ongelmia RTL-asetteluissa?
Kertaus
CSS:n loogiset ominaisuudet käyttävät lohko- ja inline-mallia fyysisten top-, right-, bottom- ja left-suuntien sijaan. Näin yksi tyylitiedosto toimii LTR-, RTL- ja pystykirjoitusjärjestelmissä. direction- ja writing-mode-ominaisuudet määrittävät kontekstin, johon loogiset ominaisuudet mukautuvat automaattisesti.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Miksi loogiset ominaisuudet ovat tärkeitä: kansainvälistäminen” ilmainen?
Kyllä – oppitunnin ”Miksi loogiset ominaisuudet ovat tärkeitä: kansainvälistäminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Miksi loogiset ominaisuudet ovat tärkeitä: kansainvälistäminen”?
Ymmärtäkää, miksi fyysiset CSS-ominaisuudet rikkovat RTL-asetteluja ja miten loogiset ominaisuudet korjaavat ongelman. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Miksi loogiset ominaisuudet ovat tärkeitä: kansainvälistäminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Miksi loogiset ominaisuudet ovat tärkeitä: kansainvälistäminen
- Lohko- ja inline-suunnat
- Loogiset margin-, padding- ja border-ominaisuudet
- Loogiset ominaisuudet RTL-asetteluissa