CSS Academy · Oppitunti

Oletusarvot ja var()

Antakaa var()-funktiossa oletusarvot tilanteisiin, joissa mukautettua ominaisuutta ei ole määritetty tai se on virheellinen.

Oppitunti 2/413 vaihetta

Oletusarvot ja var() on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

var()-funktion oletusarvosyntaksi

var()-funktio hyväksyy valinnaisen toisen argumentin oletusarvoksi, jota käytetään, kun mukautettua ominaisuutta ei ole määritetty.

<button class="button">Fallback: royalblue</button>

Milloin oletusarvoja käytetään

Oletusarvoa käytetään, kun:

ominaisuutta ei ole määritetty vaikutusalueella
ominaisuuden arvo on initial
ominaisuus on määritetty kontekstissa virheellisellä arvolla

Useita oletusarvotasoja

Sisäkkäisillä var()-kutsuilla voitte ketjuttaa useita oletusarvotasoja:

<p class="text">Falls through two levels to #3b82f6</p>

Oletusarvo voi olla mikä tahansa arvo

Oletusarvot voivat olla mitä tahansa ominaisuudelle kelvollisia arvoja — myös muita muuttujia, laskettuja arvoja tai literaaleja:

<div class="card">16px / 50%</div>

initial-avainsana

Mukautetun ominaisuuden arvon asettaminen arvoon initial saa aikaan saman vaikutuksen kuin jos ominaisuutta ei olisi koskaan asetettu. Yhdessä oletusarvon kanssa tämä antaa komponenteille mahdollisuuden jättäytyä perityn mukautetun ominaisuuden ulkopuolelle.

<div class="no-theme">
  <button class="button">Falls back to gray</button>
</div>

Taattu virheellinen arvo

Arvon initial käyttäminen mukautetun ominaisuuden arvona takaa, että oletusarvo otetaan käyttöön. Tämän avulla CSS:ään voidaan luoda valinnaisia ominaisuuslippuja.

Mukautettu ominaisuus ja @property

@property-säännöllä (Houdini) rekisteröidään tyypitetty mukautettu ominaisuus, jolla on taattu alkuarvo. Tämä on vankempi ratkaisu kuin oletusarvoihin luottaminen.

<div class="track">
  <div class="bar"></div>
</div>

Oletusarvo animaatioille turvallisille arvoille

Varmistakaa siirtymien toiminta myös silloin, kun mukautettua ominaisuutta ei ole asetettu, antamalla turvallinen oletusarvo, josta siirtymä voi alkaa:

<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>

Puuttuvien muuttujien vianmääritys

Jos mukautettu ominaisuus puuttuu eikä oletusarvoa ole annettu, ominaisuus saa alkuarvonsa (usein avainsanan initial). Värit voivat tällöin muuttua odottamatta läpinäkyviksi tai mustiksi. Lisätkää aina oletusarvot kriittisiin ominaisuuksiin.

var() mukautetuissa ominaisuuksissa

Mukautettujen ominaisuuksien arvot voivat itse viitata muihin mukautettuihin ominaisuuksiin, jolloin muodostuu tunnisteiden ketju:

<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>

Varavaihtoehdot ja spesifisyys

Varavaihtoehdoilla ei ole mitään tekemistä spesifisyyden kanssa — niitä käytetään vain, kun viitattu mukautettu ominaisuus on määrittelemätön tai virheellinen. Spesifisyys määrittää, mikä sääntö asettaa mukautetun ominaisuuden, ei sitä, mikä varavaihtoehto valitaan.

Pikatarkistus

Mitä color: var(--theme-text, #111) tekee, kun --theme-text ei ole määritelty?

Vastaa interaktiivisessa oppitunnissa

Kertaus

var(--name, fallback) tarjoaa varasarvon, kun mukautettua ominaisuutta ei ole määritelty. Varasarvoja voidaan ketjuttaa usealle tasolle. Käyttäkää @property-sääntöä tyypitetyille mukautetuille ominaisuuksille, joilla on taattu alkuarvo. Määrittäkää aina varasarvot kriittisille visuaalisille ominaisuuksille.

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Oletusarvot ja var()” ilmainen?

Kyllä – oppitunnin ”Oletusarvot ja var()” 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 ”Oletusarvot ja var()”?

Antakaa var()-funktiossa oletusarvot tilanteisiin, joissa mukautettua ominaisuutta ei ole määritetty tai se on virheellinen. 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 2/4.

Kuinka kauan ”Oletusarvot ja var()”-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

← Takaisin: CSS Academy