Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >will-change

will-change

will-change: auto | scroll-position | contents | <właściwość>, …

Wskazówka dla przeglądarki, że któraś właściwość elementu wkrótce się zmieni (zwykle transform albo opacity w animacji). Przeglądarka może się przygotować, na przykład rysując element na osobnej warstwie, żeby start animacji nie szarpał. To rozwiązanie konkretnego problemu z płynnością, a nie zwykła część stylów.

Wartości

  • auto – bez wskazówki.
  • nazwa właściwości – transform, opacity…, kilka oddzielonych przecinkami.
  • scroll-position – zmieni się pozycja przewinięcia zawartości (przewijanie).
  • contents – zmieni się zawartość elementu.

Wartość początkowa: auto. Dziedziczona: nie. Dotyczy: wszystkich elementów.

Przykłady

Wskazówka dopiero wtedy, gdy zmiana jest prawdopodobna – po najechaniu kursorem na menu, tuż zanim zostanie otwarte kliknięciem:

.submenu {
  opacity: 0;
  translate: 0 -10px;
  transition: opacity 0.3s, translate 0.3s;
}
.menu:hover .submenu {
  will-change: opacity, translate;
}
.menu.open .submenu {
  opacity: 1;
  translate: none;
}

Na co uważać

  • Nie zapisuj jej hurtowo (* { will-change: transform; }) ani „na wszelki wypadek”: każda dodatkowa warstwa zajmuje pamięć i strona może wtedy działać wolniej zamiast szybciej.
  • Wartości, które same utworzyłyby kontekst nakładania (transform, opacity, filter…), tworzą go już z will-change, nawet gdy nic się nie zmienia. Przy transform i filter element staje się dodatkowo blokiem zawierającym dla potomków z position: fixed – przyklejony pasek w nim nie ustawia się już względem okna.
  • Animacje transform i opacity przez transition albo @keyframes przeglądarka optymalizuje sama, zwykle nie potrzebują will-change.
  • auto nie da się łączyć z innymi wartościami, a all nie jest dozwoloną wartością – taka deklaracja zostanie odrzucona.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od stycznia 2020, za szeroko dostępne uznawane od lipca 2022. Od wersji: Chrome 36, Firefox 36, Safari 9.1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
transform
opacity
transition
animation
z-index