ResizeObserver - अनुकूलन क्षमता के साथ काम करने के लिए एक नया शक्तिशाली उपकरण

इतिहास का हिस्सा

तत्व प्रश्न

डेवलपर्स को अक्सर शैली तत्वों की क्षमता की आवश्यकता होती है, जब वे देखने के क्षेत्र की परवाह किए बिना अपने मूल कंटेनर का आकार बदलते हैं। कंटेनर आकारों के लिए अनुरोध उन्हें यह अवसर देते हैं। सीएसएस उपयोग उदाहरण:।
भुगतान: मीडिया (न्यूनतम-चौड़ाई: 30em) स्क्रीन {***}

ResizeObserver API का उपयोग करते हुए मॉनिटरिंग तत्व

ResizeObserver API ट्रैकिंग आकार बदलने वाले तत्व के लिए एक इंटरफ़ेस है। यह एक तत्व के लिए window.resize इवेंट का एक प्रकार का एनालॉग है।

उदाहरण: किसी तत्व का आकार बदलने पर पाठ बदलना

<h1> size </h1>
<h2> boring text </h2>

const ro = new ResizeObserver(entries => {
    for(let entry of entries){
        const width = entry.contentBoxSize
        ? entry.contentBoxSize.inlineSize
        : entry.contentRect.width

        if(entry.target.tagName === 'H1'){
            entry.target.textContent = width < 1000 'small' : 'big'
        }

        if(entry.target.tagName === 'H2' && width < 500){
            entry.target.textContent = `I won't change anymore`
            ro.unobserve(entry.target) //  ,     500px
        }
    }
})

//       
ro.observe(document.querySelector('h1'))
ro.observe(document.querySelector('h2'))

const resizeObserver = new ResizeObserver((entries, observer) => {
    for(let entry of entries){
        // 
    }
})

for(let entry of entries){
    const width = entry.contentBoxSize
    ? entry.contentBoxSize.inlineSize
    : entry.contentRect.width

    if(entry.target.tagName === 'H1'){
        entry.target.textContent = width < 1000 ? 'small' : 'big'
    }
    ...
}

सामग्री का आकार ResizeObserver के प्रारंभिक विकास चरण में दिखाई दिया और केवल वर्तमान संगतता के हितों में जोड़ा गया था। संभवतः भविष्य में इसे अप्रचलित माना जाएगा।

तत्व अवलोकन

// resizeObserver(target, options)
ro.observe(document.querySelector('h1'))
ro.observe(document.querySelector('h2'))

ब्लॉक मॉडल

प्रेक्षक को परिवर्तनों के बारे में कब पता चलता है?

• अवलोकन मनाया जाता है जब एक मनाया आइटम डोम से जोड़ा / हटा दिया जाता है।
• प्रेक्षित तत्व के प्रदर्शन गुण को किसी के पास सेट करने पर अवलोकन चालू हो जाता है।
• अवलोकन "असंबद्ध" लाइन तत्वों के लिए काम नहीं करता है।
• सीएसएस परिवर्तन में अवलोकन काम नहीं करता है।
• , , .. , 0,0.