CSS will-change

Najbolje ime, zar ne?

Pa, CSS se menja i promeniće se, nadamo se dodavanjem još opcija sa cool imenima.

Postoji reč will-change koja je tu da promeni tranziciji u tranzicija-transformacija vezu. Mogu li samo da pitam: hoće li se to promeniti? (Ok ja sam gotov!)

Potpuno je u redu ako do sada niste čuli za will-change, razumećete sve što postoji u tekstu koji sledi.

O will-change

Prava svrha will-change je da upozori pretraživač da će se izabrani element promeniti u budućim procesima, tako da pregledač može unapred da podesi odgovarajuću optimizaciju.

Moguće vrednosti:

• auto - standardne optimizacije pregledača;
• scroll-position - položaj pomicanja elementa će biti animiran nekad u bliskoj budućnosti;
• contents - očekuje se promena sadržaja elementa, tako da pregledač neće keširati sadržaj ovog elementa;
• [custom-ident] - određivanje imena ili imena jednog ili više svojstava koja očekujete da će se promeniti (npr. transformisati, podesiti neprozirnost itd.);

Moguće je prijaviti više vrednosti pomoću liste odvojene zarezima.

 .sidebar{
     will-change:transform, opacity;
 }

Neka svojstva neće imati efekta kada su navedena u will-change, jer pregledač ne vrši posebne optimizacije za promene u većini svojstava. Ipak je sigurno navesti ih; to jednostavno neće imati efekta.

Ovo svojstvo nije podržano u IE, Edge i Opera Mini, imajte to na umu.

Koristiti

Umereno koristite Dodavanje will-change direktno u tabelu stilova podrazumeva da ciljani elementi uvek budu udaljeni nekoliko trenutaka od promene i pretraživač će zadržati optimizacije mnogo duže nego što bi to bio slučaj inače. Dakle, dobra je praksa uključivanje i isključivanje will-change pomoću koda skripte pre i posle promene.

Dajte mu vremena Važno je dati pregledaču malo vremena da stvarno izvrši optimizaciju. Nađite neki način da bar malo unapred predvidete da će se nešto promeniti, a zatim postavite da će se promeniti.

Uklonite sve will-change nakon što se promene izvrše Uobičajeno ponašanje pregledača za optimizacije koje vrši je uklanjanje tih optimizacija i vraćanje na normalno ponašanje što je pre moguće.

Imajte na umu da će will-change zapravo uticati na vizuelni izgled elemenata, kada se koristi sa vrednostima svojstava, što stvara kontekst slaganja (npr. will-change: opacity), jer se kontekst slaganja kreira unapred.

Ne Koristiti

Ne primenjujte will-change na previše elemenata Preglednik se već trudi koliko god može da optimizuje sve.

Ne primenjujte will-change na elemente da biste izvršili prevremenu optimizaciju. will-change je namenjena korišćenju kao krajnjem utočištu, kako bi se pokušalo rešiti postojeće probleme sa performansama. Prekomerna upotreba will-change rezultiraće prekomernom upotrebom memorije i prouzrokovaće složenije prikazivanje dok se pretraživač pokušava pripremiti za moguću promenu. To će dovesti do loših performansi.

Kraj

Čitajte O, čitajte Koristiti, čitajte Ne Koristiti, i to je sve. Nemam više ništa za dodati.

Za nedeljne novosti, pretplatite se na naš bilten.