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?
reklama

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
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

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

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
reklama
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.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru