CSS Will Change
एक moving crew की कल्पना करें जो बिना किसी warning के किसी घर पर पहुँच जाता है, उन्हें मौके पर ही यह पता लगाना पड़ता है कि कौन-से items भारी हैं और truck layout plan करना पड़ता है जबकि सब पहले से इंतज़ार कर रहे हैं।
अगर आप पहले से call करके उन्हें exactly बता दें कि किन rooms में भारी furniture है, तो वे सही equipment पहले से ला सकते हैं और move कहीं तेज़ी से होता है।
will-change browser के लिए वही phone call है। यह browser को पहले से warn कर देता है कि transform या opacity जैसी एक specific property बदलने वाली है, ताकि browser animation शुरू होने से पहले एक optimized rendering layer तैयार कर सके, mid-animation में scramble करने के बजाय।
In this page:
Syntax
selector {
will-change: property;
}will-change असल में क्या करता है
will-change browser को पहले से किसी element के लिए एक नया compositor layer बनाने के लिए कहता है, ताकि जब promised property बदले, तो browser पूरी page layout दोबारा calculate किए बिना इसे सस्ते में animate कर सके।
Note:
- सिर्फ उन specific properties को list करें जिन्हें आप animate करने वाले हैं, जैसे will-change: transform, vague will-change: auto के बजाय।
- Accepted values:
- property name — जैसे transform, opacity
- scroll-position — content scrolling बदलने वाली है
- contents — element का content बदलेगा
- auto — कोई hints नहीं (default)
- कम मात्रा में इस्तेमाल करें, सिर्फ उन elements पर जो animate होंगे
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
will-change एक hint है, guarantee नहीं, browsers memory pressure के तहत या अगर बहुत सारे elements एक साथ इसे request करें तो इसे नज़रअंदाज़ कर सकते हैं।
उदाहरण: What will-change Actually Does
<style>
.box { width: 160px; padding: 20px; background: #cfe8ff; border: 2px solid #1e6fd9; }
.box:hover { transform: scale(1.1); }
.box {
will-change: transform;
}
</style>
<div class="box">Hover me: the browser is told transform will change</div>will-change कब इस्तेमाल करें
will-change किसी known, upcoming animation से ठीक पहले सबसे valuable है, उदाहरण के लिए किसी modal के slide in होने या sidebar के expand होने से ठीक पहले, page पर हर animated element पर लगातार लागू करने के बजाय।
Note:
- किसी animation trigger करने से ठीक पहले JavaScript के ज़रिए will-change जोड़ें और animation event खत्म होने पर इसे हटा दें, सबसे efficient usage pattern के लिए।
- Accepted values:
- will-change: transform — एक transform animation से पहले
- will-change: opacity — एक opacity animation से पहले
- will-change: auto — animation के बाद हटाएँ
- JavaScript — इसे hover या focus पर जोड़ें, बाद में हटाएँ
Warning:
page load पर दर्जनों elements पर will-change लागू करना browser को किसी भी animation चलने से पहले ही कई compositor layers upfront allocate करने पर मजबूर कर सकता है, memory usage बढ़ाते हुए।
उदाहरण: When to Use will-change
<style>
.modal { width: 200px; padding: 20px; background: #cfe8ff; border: 2px solid #1e6fd9; }
.modal.about-to-open {
will-change: transform;
}
</style>
<div class="modal about-to-open">Modal about to open</div>transform Animations को Optimize करना
translate, scale, और rotate जैसे transform changes will-change set होने पर पूरी तरह compositor thread पर चल सकते हैं, main thread busy होने पर भी animations को smooth रखते हुए।
Note:
- elements को move करने के लिए top और left बदलने के बजाय transform: translate() prefer करें, क्योंकि transform को composite किया जा सकता है जबकि position changes को नहीं।
- Accepted values:
- will-change: transform — एक transform animation का संकेत देता है
- transform: translate() | scale() | rotate() — compositor-friendly
- will-change: auto — बाद में reset करें
- नोट: एक stacking context और एक नई layer बनाता है
Warning:
will-change: transform मदद नहीं करता अगर animation कहीं और भी layout changes trigger करे, जैसे किसी sibling element को resize करना।
उदाहरण: Optimizing transform Animations
<style>
.box {
will-change: transform;
transition: transform 0.3s;
background: teal;
color: white;
padding: 12px;
display: inline-block;
}
.box:hover {
transform: translateX(50px);
}
</style>
<div class="box">Runs on the compositor thread</div>opacity Animations को Optimize करना
transform की तरह ही, opacity को पूरी तरह compositor thread पर animate किया जा सकता है, modals, tooltips, और overlays पर fade transitions को will-change के लिए खासतौर पर अच्छे candidates बनाते हुए।
Note:
- tooltips जैसे बार-बार toggle किए जाने वाले elements पर सबसे smooth possible fade effects के लिए will-change: opacity को transition: opacity के साथ combine करें।
- Accepted values:
- will-change: opacity — एक opacity animation का संकेत देता है
- opacity: 0 से 1 — animated range
- will-change: auto — बाद में reset करें
- नोट: एक extra compositor layer बनाई जाती है
Warning:
किसी शायद ही कभी बदलने वाले element पर will-change: opacity set करना इसके द्वारा बनाई गई compositor layer को बर्बाद कर देता है, इसे सिर्फ उन elements पर लागू करें जो अक्सर fade होते हैं।
उदाहरण: Optimizing opacity Animations
<style>
.tooltip {
will-change: opacity;
opacity: 0;
transition: opacity 0.2s;
background: #333;
color: white;
padding: 8px 12px;
display: inline-block;
}
.tooltip.visible {
opacity: 1;
}
</style>
<div class="tooltip visible">Fades smoothly</div>Overuse की Warning
क्योंकि हर will-change declaration एक नयी GPU-backed layer बना सकती है, बहुत सारे elements को mark करना significant graphics memory consume करता है और paradoxically scrolling और animations को तेज़ के बजाय धीमा महसूस करा सकता है।
Note:
- किसी element की animation पूरी होने के बाद उससे will-change हटाएँ, या तो एक class toggle करके या JavaScript में property को वापस auto पर reset करके।
- Accepted values:
- will-change: transform — सिर्फ कुछ elements पर
- will-change: auto — default, कुछ भी extra नहीं
- { will-change: ... } से बचें — बहुत सारी layers बनाता है
- इस्तेमाल के बाद हटाना — memory free करता है
Warning:
कभी भी will-change: transform, opacity को * या body जैसे किसी global selector पर लागू न करें, यह page पर हर एक element के लिए एक compositor layer बना देता है।
उदाहरण: The Overuse Warning
<style>
.box { width: 160px; padding: 20px; background: #cfe8ff; border: 2px solid #1e6fd9; }
/* Avoid: creates a compositor layer for every element on the page */
* {
will-change: transform;
}
</style>
<div class="box">Every element now gets its own layer (avoid)</div>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- एक blanket performance fix की तरह एक साथ कई elements पर will-change लागू करना, जो अत्यधिक memory consume कर सकता है और असल में page को धीमा कर सकता है।
- किसी element की animation खत्म होने के बहुत बाद तक will-change permanently set छोड़ देना, browser resources को अनिश्चित काल तक बर्बाद करते हुए।
- जब intended change असल में transform या opacity है तब will-change: contents इस्तेमाल करना, mismatched hints कोई फ़ायदा नहीं देते।
चैप्टर सारांश
- will-change browser को संकेत देता है कि कोई property बदलने वाली है, इसे पहले से rendering optimize करने देते हुए।
- यह transform और opacity के साथ सबसे अच्छा काम करता है, क्योंकि उन properties को layout या paint trigger किए बिना compositor पर animate किया जा सकता है।
- किसी animation शुरू होने से थोड़ा पहले will-change लागू करें और बाद में इसे हटा दें, इसे permanently ज़्यादा इस्तेमाल करना मदद के बजाय performance को नुकसान पहुँचा सकता है।
ब्राउज़र सपोर्ट
will-change हर modern browser द्वारा supported है; जो browsers इसे नहीं पहचानते वे बस बिना किसी negative effect के hint को नज़रअंदाज़ कर देते हैं।
🔒
Chapter Quiz — Complete all 25 topics to unlock
0/25 topics done
Complete these topics first:
- CSS Container Queries
- CSS Subgrid
- CSS Logical Properties
- CSS Logical Sizing
- CSS Writing Modes
- CSS Aspect Ratio
- CSS Object Fit
- CSS object-position
- CSS Masking
- CSS Math Functions
- CSS Motion Path
- CSS @supports
- CSS @property
- CSS At-Rules
- CSS Cursor
- CSS Will Change
- CSS User Interface
- CSS Print Styles
- CSS Pagination (Print)
- CSS Dark Mode
- CSS Accessibility
- CSS Performance
- CSS Preprocessors
- CSS Frameworks Overview
- CSS Interview Prep