सिर्फ content-visibility: auto लागू करने भर से स्क्रीन पर दिखाई न देने वाले ऑब्जेक्ट render नहीं होते, जिससे गति बेहतर होती है.
किसी ऑब्जेक्ट पर auto सेट करने पर CSS Containment spec में layout, style, paint लागू होते हैं, और जब वह ऑब्जेक्ट स्क्रीन के बाहर चला जाता है तो size भी लागू होता है.
→ स्क्रीन के बाहर जाते ही उस ऑब्जेक्ट के child elements बिल्कुल draw नहीं होते
→ फिर से स्क्रीन के पास आने पर size हट जाता है और hit-test शुरू होता है
contain-intrinsic-size से डिफ़ॉल्ट रूप से draw की जाने वाली size तय की जा सकती है. यदि सेट न किया जाए तो यह 0 है.
content-visibility: hidden सेट करने पर यह ऐसे व्यवहार करता है जैसे वह स्क्रीन के बाहर हो और बिल्कुल render नहीं होता.
→ ऑब्जेक्ट को छिपाता है और rendering state बनाए रखता है, लेकिन अगर कोई बदलाव हुआ हो तो दोबारा दिखने पर rendering लागू होती है.
→ display:none - ऑब्जेक्ट को छिपाता है और rendering state को नष्ट कर देता है. यानी दोबारा दिखने पर यह लगभग नए सिरे से draw होने जैसा है
→ visibility:hidden - ऑब्जेक्ट को छिपाता है और rendering state बनाए रखता है. वास्तव में यह document से हटाया नहीं जाता, ऑब्जेक्ट अपनी जगह घेरता रहता है और क्लिक भी किया जा सकता है. छिपा होने पर भी rendering जारी रहती है
अभी कोई टिप्पणी नहीं है.