Šuplík Honzy Hučína

Skok na navigaci (menu)

Tento blog je v současné době uzavřen.
Pokračování blogu na bloguje.cz jsem zrušil. Pokud budu někdy pokračovat, bude to spíš tady.

Komentovaný článek

Internet a vše kolem

6. 2. 2006

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.

Vložit vlastní komentář – Návrat k článku – RSS komentářů tohoto článku

Komentáře

[1] 6. 2. 2006, 10:55 – gizmo (Odkaz)

Myslím, že tvůj příspěvek je trochu nedotažený, jelikož Adblock se dá nastavit velice různě:
1) reklamy stahuje, ale nezobrazuje
2) reklamy nestahuje, ale jejich místo nechává prázdné podle požadavků HTML/CSS
3) reklamy nestahuje a všechny jejich prvky vynuluje=smrskne, nehledě na HTML/CSS předpis
Z čehož vyplývá, že chování je rozličné a mělo by se počítač se vším :)

[2] 6. 2. 2006, 11:21 – Honza Hučín (Odkaz)

Ad [1]: Díky za reakci. Podstatné je, že body 1 a 2 nemají na design žádný vliv (resp. mají stejný vliv jako např. vypnuté zobrazování obrázků), takže se nemusí zvlášť ošetřovat. Netriviální je IMHO pouze bod 3, o němž článek pojednává.

[3] 6. 2. 2006, 12:12 – Petr Weida (Odkaz)

Na obranu Honzy Hučína bych řekl, že právě ten bod 3 je IMHO nejčastější způsob blokování.

[4] 6. 2. 2006, 12:16 – MiK

Myslím, že kdo používá AdBlock, tak počítá s tím, že v designu nastane občas nějaký posun.
Totální zborcení designu by v důsledku zmizení nějakého prvku zrovna nastat nemuselo, ale jinak si myslím, že je kolikrát lepší ono "smrštění" blokovaného prvku, než hluchá prázdná místa, která zde tak pracně a IMHO i nesystémově styluješ.
Každý by si tak měl důkladně přečíst poslední odstavec Tvého příspěvku. :-) A mít na paměti, že o konečné podobě zobrazení stránky rozhoduje klient.

[5] 6. 2. 2006, 12:41 – llook (Odkaz)

Na IMG se při tvorbě layoutu nelze spoléhat. Další důvod vedle AdBlocku je Opera. Pokud je obrázek pouze nedostupný, tak se chová správně, ale při vypnutých obrázcích ignoruje rozměry obrázku (ať už nastavené v HTML nebo CSS).

[4] Asi s tím počítá, jako každý uživatel Firefoxu. Při jakékoli chybě začne nadávat na amatérský IE-only design a vůbec ho souvislost s AdBlockem nenapadne.
Za toho špatného je vždy webdesigner.

[6] 7. 2. 2006, 08:04 – marek (Odkaz)

[2] IMHO je nejčastější způsob 2 tzn.reklamy nestahuje, ale jejich místo nechává prázdné podle požadavků HTML/CSS

[7] 19. 7. 2006, 15:18 – Vladimír Muller

Nazdar Guruové:-)
existuje nějaký postup pro absolutní pc analfabety (pro mne:)jak odinstalovat ten abdlock. Rozhodilo mi to Firefox tak, že se s ním špatně pracuje. Celé zobrazení se šouplo do prava, čímž se stal posuvník nedostupným a hlavně konce řádků nejsou vidět. Na spodku stránky je pod řádkem s počasím a měřením rychlosti načtení stránky asi 3cm tlusté okno či co do kterého se nelze nijak přepnout. Je zde červeně napsáno toolbarbutton id=¨ff-overflow-btn¨label=¨ff.main.owerflow.label
....atd :-/
jelikož se mi ani omylem nechce přecházet na IE doufám, že zde naleznu pomoc.Díky

K tomuto článku není možné vkládat komentáře.