Muutos - CSS-temppuja | CSS-almanakka 2025

will-changeOmaisuus CSS optimoi animaatioita antamalla selaimen tietävät, mitkä ominaisuudet ja elementit ovat juuri aikeissa käsitellä ja mahdollisesti lisätä suorituskykyä kyseisen toiminnan.

Tällä ominaisuudella on neljä arvoa:

auto: käytetään selaimen vakiooptimointeja.
scroll-position: osoittaa, että elementin vierityssijainti animoidaan joskus lähitulevaisuudessa, joten selain valmistautuu sisältöön, joka ei ole näkyvissä elementin vieritysikkunassa.
contents: elementin sisällön odotetaan muuttuvan, joten selain ei tallenna välimuistiin tämän elementin sisältöä.
: mikä tahansa käyttäjän määrittelemä ominaisuus, kuten transformtai opacityjohon haluamme will-changesoveltaa.

Voimme ilmoittaa selaimelle, että kiinteistöön on tapahtumassa muutos transform:

.element ( will-change: transform; )

Tai jos haluamme ilmoittaa useita arvoja, voimme käyttää pilkuilla erotettua luetteloa, kuten:

.element ( will-change: transform, opacity; )

On kuitenkin tärkeää olla käyttämättä will-changeomaisuutta liikaa, koska se voi itse asiassa aiheuttaa sivun vähemmän suorituskyvyn (huomaa, että alltälle omaisuudelle ei ole arvoa hyvästä syystä). Tämän seurauksena MDN suosittelee, että kiinteistöä käytetään viimeisenä keinona olemassa oleviin suorituskykyongelmiin sen sijaan, että oletat voivasi tapahtua. Ja sitä käytettäessä on suositeltavaa vaihtaa will-changejuuri ennen elementin tai ominaisuuden muutosta ja kytkeä se sitten pois päältä pian prosessin päättymisen jälkeen.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.