Θα αλλάξει - CSS-Κόλπα

Η will-changeιδιότητα στο CSS βελτιστοποιεί τα κινούμενα σχέδια ενημερώνοντας το πρόγραμμα περιήγησης ποιες ιδιότητες και στοιχεία πρόκειται να χειριστούν, αυξάνοντας ενδεχομένως την απόδοση αυτής της συγκεκριμένης λειτουργίας.

Αυτή η ιδιότητα έχει τέσσερις τιμές:

auto: θα εφαρμοστούν οι τυπικές βελτιστοποιήσεις προγράμματος περιήγησης.
scroll-position: υποδεικνύει ότι η θέση κύλισης του στοιχείου θα είναι κινούμενη κάποια στιγμή στο εγγύς μέλλον, ώστε το πρόγραμμα περιήγησης να προετοιμαστεί για περιεχόμενο που δεν είναι ορατό στο παράθυρο κύλισης ενός στοιχείου.
contents: τα περιεχόμενα ενός στοιχείου αναμένεται να αλλάξουν, ώστε το πρόγραμμα περιήγησης να μην αποθηκεύει προσωρινά το περιεχόμενο αυτού του στοιχείου.
: οποιαδήποτε ιδιότητα που καθορίζεται από τον χρήστη όπως transformή για opacityτην οποία θέλουμε will-changeνα εφαρμοστεί.

Μπορούμε να ενημερώσουμε το πρόγραμμα περιήγησης ότι πρόκειται να πραγματοποιηθεί μια αλλαγή στην transformιδιοκτησία όπως:

.element ( will-change: transform; )

Ή αν θέλουμε να δηλώσουμε πολλές τιμές, μπορούμε να χρησιμοποιήσουμε μια λίστα διαχωρισμένη με κόμμα, όπως:

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

Είναι σημαντικό να μην κάνετε υπερβολική χρήση της will-changeιδιότητας, ωστόσο, διότι μπορεί στην πραγματικότητα να προκαλέσει τη χαμηλότερη απόδοση της σελίδας (λάβετε υπόψη ότι δεν υπάρχει allτιμή για αυτήν την ιδιότητα για καλό λόγο). Ως αποτέλεσμα, η MDN συνιστά να χρησιμοποιηθεί το ακίνητο ως έσχατη λύση για υπάρχοντα ζητήματα απόδοσης και όχι αυτά που αναμένεται να συμβούν. Και, όταν το χρησιμοποιείτε, συνιστάται να κάνετε εναλλαγή will-changeλίγο πριν αλλάξει ένα στοιχείο ή μια ιδιότητα και, στη συνέχεια, να το απενεργοποιήσετε ξανά λίγο μετά την ολοκλήρωση της διαδικασίας.

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.