PricingLoginStart free
CSS Academy · Oppitunti

CSS Properties and Values API (@property)

Rekisteröi mukautettuja ominaisuuksia tyyppeineen ja periytymisasetuksineen @property-säännöllä animoitavia CSS-muuttujia varten.

Oppitunti 2/413 vaihetta

CSS Properties and Values API (@property) 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.

Mikä on @property?

@property on CSS:n tapa rekisteröidä mukautettu ominaisuus, jolla on tyyppi, periytymiskäytäntö ja alkuarvo. Se on CSS Properties and Values API:n (CSS.registerProperty) deklaratiivinen muoto.

@property-syntaksi

Rekisteröikää mukautettu ominaisuus kolmella pakollisella kuvaajalla:

<div class="box"></div>

syntax-kuvaus

syntax-kuvaus määrittää ominaisuuden tyypin CSS-tyyppinimien avulla:

  • "<number>", "<integer>", "<percentage>"
  • "<angle>", "<color>", "<length>"
  • "<image>", "<transform-list>"
  • "*" — hyväksyy minkä tahansa arvon (kuten rekisteröimätön ominaisuus)

inherits-kuvaus

Hallitsee, periytyykö ominaisuus DOM-puussa. Asettakaa false ominaisuuksille, jotka halutaan eristää elementtikohtaisesti.

initial-value-kuvaus

Antaa taatun alkuarvon, kun ominaisuutta ei ole asetettu. Tämä tekee ominaisuudesta animoitavan.

Mukautettujen ominaisuuksien animointi

@propertyn keskeinen hyöty on, että rekisteröityjä mukautettuja ominaisuuksia voidaan siirtymäanimoida ja animoida, koska selain tuntee niiden tyypin ja voi interpoloida arvojen välillä:

<div class="element is-hovered"></div>

Ilman @propertya

Ilman rekisteröintiä CSS ei tunne mukautettujen ominaisuuksien tyyppejä. Kahden muuttuja-arvon väliset siirtymät nytkähtävät interpolaation sijaan — selain ei voi laskea tuntemattoman tyypin keskiarvoa.

@property liukuvärin animointiin

Liukuvärin pysäytyspisteiden animointi (aiemmin mahdotonta ilman @propertya):

<div class="loader loading"></div>

JavaScript-vastine

Voitte rekisteröidä ominaisuuksia myös JavaScript-APIlla:

<div id="box"></div>
<script>
  // JavaScript equivalent of @property
  CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });

  document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>

Selaintuki

@property on tuettu Chrome 85:ssa ja sitä uudemmissa versioissa, Edge 85:ssä ja sitä uudemmissa versioissa, Safarissa 16.4:stä alkaen sekä Firefoxissa 128:sta alkaen. Ominaisuus on laajalti käytettävissä nykyaikaisissa selaimissa.

@propertyn käytännön käyttötavat

Yleisiä käyttötapauksia:

  • Liukuvärien sijaintien ja värien animointi
  • HSL-värien sävyn ja kylläisyyden animointi
  • Edistymispalkin täyttöanimaatiot
  • Laskurianimaatiot numeroiden paljastamiseen
  • Tumman ja vaalean tilan sujuvat siirtymät väritunnisteiden animoinnin avulla

Pikatarkistus

Miksi @property tarvitaan CSS:n mukautettujen ominaisuuksien animointiin?

Vastaa interaktiivisessa oppitunnissa

Kertaus

@property rekisteröi mukautetut ominaisuudet syntax-tyypin, inherits-lipun ja initial-value-alkuarvon avulla. Rekisteröidyt ominaisuudet ovat animoitavia ja siirtymäanimoitavia, koska selain voi interpoloida niiden tyypitettyjä arvoja. Tämä mahdollistaa liukuvärien, sävyjen ja laskureiden animaatiot, jotka eivät onnistu rekisteröimättömillä mukautetuilla ominaisuuksilla.

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 maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”CSS Properties and Values API (@property)” ilmainen?

Kyllä – oppitunnin ”CSS Properties and Values API (@property)” 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 ”CSS Properties and Values API (@property)”?

Rekisteröi mukautettuja ominaisuuksia tyyppeineen ja periytymisasetuksineen @property-säännöllä animoitavia CSS-muuttujia varten. 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 ”CSS Properties and Values API (@property)”-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

  1. CSS Typed Object Model (OM)
  2. CSS Properties and Values API (@property)
  3. CSS Paint API: Workletit
  4. CSS Layout API ja sen laajuus
← Takaisin: CSS Academy