Vytváření webových stránek, které jsou reaktivní a responzivní, se dříve považovalo za pokročilé, ale schopnost reagovat je pro úspěšné weby a aplikace nezbytností. Přidali jsme dotazy na média, matchMedia
a řadu dalších rozhraní API, které vývojářům pomohou usnadnit odezvu, a nyní máme nové:ResizeObserver
. Pomocí rozhraní Resize Observer API můžeme sledovat změnu velikosti jednotlivých prvků!
Pomocí ResizeObserver
Chcete-li naslouchat změnám velikosti prvků, vytvořte ResizeObserver
instance a volání observe
, předávání prvku:
const observer = new ResizeObserver(entries => { for (let entry of entries) { // Now do something with the resized element if (entry.contentRect.width < 1000) { // Stop making AJAX calls for content... } } }); observer.observe(document.querySelector('div'));
entry
poskytuje cílový prvek a také jeho rozměry a umístění:
entry = { target: div, // The element passed to `observe` contentRect: { bottom: 88, height: 88, left: 0, right: 1043, top: 0, width: 1043, x: 0, y: 0 } }
Mediální dotazy a matchMedia
poskytují možnost upravit zobrazení pomocí CSS, ale ne funkčnost, což je místo ResizeObserver
zapadá.
Před lety jsem vytvořil hack pro špehování prvků pomocí CSS, mediálních dotazů a :before
, ale ke správnému fungování vyžadoval dotazování pomocí JavaScriptu. Mít legitimní, optimalizované JavaScript API k dosažení stejného je osvěžující a zoufale potřebné!