ResizeObserver - أداة قوية جديدة للعمل مع القدرة على التكيف

القليل من التاريخ

استعلامات العنصر

غالبًا ما يحتاج المطورون إلى القدرة على تصميم العناصر عند تغيير حجم الحاوية الرئيسية الخاصة بهم ، بغض النظر عن منطقة العرض. طلبات أحجام الحاويات تمنحهم هذه الفرصة. مثال لاستخدام CSS:
.element : شاشة الوسائط (min-width: 30em) {***}

عنصر مراقبة تغيير الحجم باستخدام ResizeObserver API

واجهة برمجة تطبيقات ResizeObserver هي واجهة لتتبع تغيير حجم العنصر. هذا هو نوع من التناظرية للحدث 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'
    }
    ...
}

ظهر contentRect في مرحلة التطوير الأولية لـ ResizeObserver وتمت إضافته فقط من أجل التوافق الحالي. ربما في المستقبل سيعتبر عفا عليه الزمن.

مراقبة العنصر

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

نموذج كتلة

متى يكتشف المراقب التغييرات؟

• يتم تشغيل الملاحظة عند إضافة / إزالة عنصر تمت ملاحظته من DOM.
• يتم تشغيل الملاحظة عند تعيين خاصية العرض للعنصر المرصود على لا شيء.
• لا تعمل الملاحظة لعناصر الخط "غير المستبدلة".
• لا تعمل الملاحظة في تحويل CSS.
• , , .. , 0,0.