Ostatnio edytowany:

will-change

Autor: Virtual Patriot

Opis 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.

Dodatkowe techniczne informacje o właściwości will-change

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości will-change

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

nie

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

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

auto

Opis

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

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:#AFF;
      }
    </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

Opis

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

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

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:#AFF;
      }

      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>

contents

Opis

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

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:#AFF;
      }
    </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

Opis

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

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:#AFF;
      }

      #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

Opis

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

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

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:#AFF;
      }

      #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>