Šuplík Honzy Hučína

Opomenutý Adblock může rozhodit design pro Firefox

Máte-li na webové stránce jakýkoliv prvek blokovatelný pomocí rozšíření Adblock (typicky flash, iframe nebo obrázek), zkuste si na chvíli představit, že v kódu vůbec není. Rozhodí to nějak zásadně design? Pak je potřeba to ošetřit, protože uživatel může mít ve Firefox Adblock nastavený na odstranění tohoto prvku z prohlížené stránky.

Co se může stát, když Adblock nějaký prvek odstraní (nevím, zda odstraní z kódu, nebo dá display:none, ale to je jedno)?

• Vše, co bylo v toku dokumentu uvnitř jednoho bloku za postiženým prvkem, se posune nahoru (ev. doleva),
• pokud něco z toho není absolutně pozicováno.

A to jsou ta dvě úskalí – design se při aktivaci Adblocku může na jednom místě ošklivě zdrcnout a zatímco absolutně pozicované prvky zůstanou na místě, zbytek stránky se posune.

Ošetření je jednoduché. Prvek, který může být Adblockem postižený, dáme do elementu, kterému nastavíme rozměry. Tedy místo

<img src=‘obrazek.jpg‘ width=‘šířka‘ height=‘výška‘ alt=‘popis‘>

píšeme

<div style=‘width:šířka; height:výška‘>
<img src=‘obrazek.jpg‘ alt=‘popis‘>
</div>

či ještě lépe obalujícímu elementu dáme id a ošetříme to ve stylopisu.

Tím se zajistí, že ani po odstranění prvku Adblockem ze stránky se nic neposune, na místě prvku bude prázdno.

Někdy nevadí, že je prvek odstraněn, ale vzniká problém s absolutně pozicovanými prvky za ním. Na to je asi nejúčinnější nekombinovat v takovém případě absolutní pozicování s volným tokem dokumentu, ale prvky, které chci absolutně pozicovat, připevnit k jinému prvku v bloku.