ResizeObserver: když CSS Media Queries nestačí

Responzivní design stojí hlavně na CSS Media Queries, které reagují na velikost/změnu okna prohlížeče nebo třeba na změnu orientace mobilního zařízení. Co ale v případě, že potřebujete odchytit změnu velikosti nějakého prvku na webové stránce?

povídání k jednomu z nedávných Technical Preview webového prohlížeče Safari mě zaujala zmínka o ResizeObserveru. Pomocí tohoto JavaScriptového řešení jste totiž schopni elegantně reagovat na změnu velikosti prvku na webové stránce.

Proč do něčeho takového tahat JavaScript, když máme Media Queries? Dovedu si představit situaci, kdy se pružně mění layout nějaké webové stránky poté, co rozbalujete nějaké prvky, přepínáte zobrazení layoutu, ale šířka webu zůstává neměnná. Typicky různé administrační stránky, kde se rozbaluje a zabaluje nástrojový panel.

Protože ResizeObserver bude podporovat další verze Safari a je již nějakou dobu funkční v Chrome a Firefoxu, můžeme tvrdit, že bude brzy použitelný pro nasazení. Jasně, absence podpory v IE11 zamrzí, ale ne moc.

ResizeObserver

Jak ResizeObserver použít?

Použití ResizeObserveru je velice snadné. Stejně jako u jemu podobných z Observers API. Rozdělil bych to na tři části:

  1. Definice nějakého callbacku, který se zavolá v momentě, kdy sledovaný prvek změní svůj rozměr
  2. Vytvoření nového observeru
  3. Napojení observeru na nějaký element nebo elementy v HTML DOM

Celý kód by mohl vypadat následovně:

const callback = (entries) => {

  Array.from(entries).forEach((entry) => {

    let rect = entry.contentRect;

    console.log(

      `velikost prvku je nyní ${rect.width} x ${rect.height}`

    )

  })

}

const myObserver = new ResizeObserver(callback)

myObserver.observe(document.querySelector('.css-trida'))

Tip: Mnohem častěji používám jiný Observer. Koukněte na můj článek věnovaný Intersection Observeru a sledování, kdy se různé prvky objeví při rolování stránkou na obrazovce.

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru