Autor publikacji: Virtual Patriot - Administrator

will-change

Data publikacji: Kwiecień 20 2015
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - will-change property (LV1)

Przeznaczenie właściwości `will-change`

Za pomocą właściwości will-change możemy określić dodatkową informację dla przeglądarki internetowej o tym, która cecha interesującego nas elementu HTML może zostać wkrótce zmieniona. Ma to na celu poprawę optymalizacji niektórych mechanizmów przeglądarki internetowej.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `will-change`

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: nie
wartość initial: auto
wyjątki initial: brak
animowanie: nie

Interpretacja właściwości `will-change`

: tak
: tak
: tak
: tak
: nie
: tak

Zobacz więcej informacji o interpretacji właściwości will-change.

Opis wartości właściwości `will-change`

auto

Wyjaśnienie

Wartość auto jest domyślną wartością właściwości will-change.

Domyślnie element HTML nie posiada żadnej dodatkowej informacji dla przeglądarki internetowej o tym, która cecha tego elementu HTML może zostać wkrótce zmieniona.

Przykład

  will-change:auto;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div" nie posiada żadnej dodatkowej informacji dla przeglądarki internetowej o tym, która cecha przykładowego elementu "div" może zostać wkrótce zmieniona.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        width:350px;
        height:150px;
        overflow:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

scroll-position

Wyjaśnienie

Za pomocą wartości scroll-position właściwości will-change możemy sprawić, że interesujący nas element HTML będzie posiadał dodatkową informację dla przeglądarki internetowej o tym, że mechanizm służący do przewijania treści tego elementu HTML powinien posiadać dodatkową optymalizację, ponieważ wspomniany mechanizm może zostać wkrótce użyty przez użytkownika.

Przykład

  will-change:scroll-position;

W momencie gdy kursor myszy znajduje się nad obszarem przykładowego elementu "div", przykładowy element "div" posiada właściwość "will-change" wraz z wartością "scroll-position" co stanowi dodatkową informację dla przeglądarki internetowej o tym, że mechanizm służący do przewijania treści wspomnianego elementu "div" powinien posiadać dodatkową optymalizację.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        width:350px;
        height:150px;
        overflow:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      div:hover {
        will-change:scroll-position;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

Wyjaśnienie

Za pomocą wartości contents właściwości will-change możemy sprawić, że interesujący nas element HTML będzie posiadał dodatkową informację dla przeglądarki internetowej o tym, że zawartość tego elementu HTML będzie zmieniała się zbyt często, dlatego mechanizm służący do zapamiętywania zawartości elementów HTML (w pamięci podręcznej przeglądarki internetowej (tzw. Cache)) nie powinien tego robić lub powinien to robić rzadko dla wspomnianego elementu HTML.

Przykład

  will-change:contents;

tekst domyślny

Przykładowy element "div" posiada dodatkową optymalizację swojej zawartości, ponieważ do wspomnianego elementu "div" została dodana właściwość "will-change" wraz z wartością "contents".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        will-change:contents;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div id="blok-1">
      tekst domyślny
    </div>

    <script>
      (function(){
          var div = window.document.getElementById('blok-1');
          var text = ['pierwszy tekst', 'tekst drugi', 'trzeci tekst'];
          var limit = text.length - 1;
          var start = 0;

          function changeText(){
              div.textContent = text[start];

              if(start < limit)
              {
                  start++;
              }
              else
              {
                  start = 0;
              }
          };

          setInterval(changeText, 2000);
      })();
    </script> 

  </body>
</html>

nazwa właściwości CSS

Wyjaśnienie

Za pomocą właściwości will-change oraz nazwy istniejącej właściwości CSS możemy sprawić, że interesujący nas element HTML będzie posiadał dodatkową informację dla przeglądarki internetowej o tym, która właściwość CSS tego elementu HTML posiada wartość, która wkrótce może zostać zmieniona, dlatego mechanizm odpowiadający za wspomnianą zmianę powinien posiadać dodatkową optymalizację.

Podaną przez nas nazwą właściwości CSS nie może być nazwa wskazująca na właściwość all lub właściwość "will-change".

Przykład

  will-change:transform;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

W momencie gdy kursor myszy znajduje się nad obszarem przykładowego elementu "div#rodzic", przykładowy element "div#dziecko" posiada właściwość "will-change" wraz z wartością "transform" co stanowi dodatkową informację dla przeglądarki internetowej o tym, że mechanizm odpowiadający za zmianę wartości właściwości "transform" wspomnianego elementu "div#dziecko" powinien posiadać dodatkową optymalizację.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #rodzic {
        border:3px solid black;
        padding:1em;
      }

      #dziecko {
        transition:transform 2s;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #dziecko:hover {
        transform:scale(0.8);
      }

      #rodzic:hover > #dziecko {
        will-change:transform;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <div id="dziecko">
        ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      </div>
    </div>

  </body>
</html>

sekwencja wartości

Wyjaśnienie

Za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości will-change możemy uzyskać lepszą optymalizację kilku cech interesującego nas elementu HTML jednocześnie.

Podana przez nas sekwencja wartości właściwości "will-change" nie może zawierać wartości "auto", "none", "all", "will-change" oraz wartości globalnych.

Przykład

  will-change:transform, scroll-position;

W momencie gdy kursor myszy znajduje się nad obszarem przykładowego elementu "div#rodzic", przykładowy element "div#dziecko" posiada właściwość "will-change" wraz z sekwencją wartości "transform, scroll-position" co stanowi dodatkową informację dla przeglądarki internetowej o tym, że zarówno mechanizm odpowiadający za zmianę wartości właściwości "transform" wspomnianego elementu "div#dziecko" jak i mechanizm służący do przewijania treści wspomnianego elementu "div#dziecko" powinny posiadać dodatkową optymalizację.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #rodzic {
        border:3px solid black;
        padding:1em;
      }

      #dziecko {
        transition:transform 2s;
        width:60%;
        height:150px;
        overflow:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #dziecko:hover {
        transform:scale(0.8);
      }

      #rodzic:hover > #dziecko {
        will-change:transform, scroll-position;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <div id="dziecko">
        ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      </div>
    </div>

  </body>
</html>