इच्छा-परिवर्तन - सीएसएस-ट्रिक्स

Anonim

will-changeसीएसएस में संपत्ति दे ब्राउज़र पता लगाएं कि कौन गुण और तत्वों के बारे में चालाकी से किया जा रहे हैं, संभावित कि विशेष रूप से संचालन के प्रदर्शन में वृद्धि से एनिमेशन का अनुकूलन।

इस संपत्ति के चार मूल्य हैं:

  • 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 का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
३६ ३६ नहीं न । ९ 9.1

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 .५ 81 9.3