Blikající pozadí záhlaví stránky v MSIE při použití background-image

Přiznávám bez mučení, že u svých webů většinou nepoužívám přístupnou verzi hlavičky – loga (obvykle se nachází v levé horní části stránky) – která spočívá v konstrukci obsahující textový název webu a obrázek na pozadí, který jej překrývá.

Uvedený způsob nepoužívám z jednoho prostého důvodu – nelíbí se mi, jak v MSIE problikává textový název přes obrázek, když se přejede myší nad logem. Chcete-li vidět několik ukázek tohoto problikávání, podívejte se na některé z těchto serverů: h1.cz, Moderní web, další teď z hlavy nevím.

Prohlížeč, ve kterém to bliká

Pokud problikávání nevidíte, máte buď jiný prohlížeč, nebo jinou jeho verzi a nebo jiné nastavení. Chyba se projevuje jen v MSIE verze 6 s nastavením:

Možnosti Internetu/Dočasné soubory Internetu (Nastavení…)/Zjiš­ťovat existenci novějších verzí uložených stránek Při každé návštěvě stránky

Technika na zobrazování plně přístupné hlavičky stránky

Uvedená technika na zobrazování plně přístupné hlavičky stránky (tedy takové zobrazování, které při vypnutých stylech či obrázcích zobrazí textový název stránek) vypadá následovně a je popsána na mnoha místech, proto jen stručně:

Takto vypadá HTML kód:

<div id="header">
  <h1><a href="http://petr.vaclavek.com" title="Václavek WEBLOG">Václavek WEBLOG<span></span></a></h1>
</div>

A takto styly:

* {margin:0;padding:0;}
#header h1 a {
  display:block;
  width:770px;
  height:87px;
  position:relative;
  overflow:hidden;
  background-color:#88c251;
  color:#fff;
  font-family:verdana;
  padding:15px 0 0 40px
}

#header span {
  position:absolute;
  display:block;
  left:0;
  top:0;
  z-index:10;
  width:770px;
  height:87px;
  background:url('header.jpg') no-repeat top left;
  cursor:pointer;
}

Ukázková stránka

Na ukázce si můžete vyzkoušet (pokud máte výše uvedený prohlížeč s příslušným nastavením), že hlavička při přejíždění myší bliká.

Blíže a více se o tomto způsobu dozvíte například v těchto článcích:

Zpátky k problému

Ale teď zpět k problému a hlavně k jeho řešení. Zjistil jsem, že na některých webech se blikání nekoná (například Dlouhý webdesign nebo Přístupnost. „Půjčil“ jsem si tedy jejich kód a začal experimentovat. Posléze jsem dospěl k závěru, že v kódu to není, že se jedná o nastavení na straně serveru. Navíc z diskuse u Plaváčka (u článku o přístupné obrázkové navigaci) jsem si pamatoval, že blikání způsobuje cachování obrázků (tedy v tomto případě spíše jejich necachování nebo chcete-li zbytečné znovunačítání ze serveru).

Zkusil jsem tedy napsat autorovi webu Přístupnost Davidu Špinarovi o jaké serverové nastavení se jedná, ale zatím se neozval, takže jsem to prozatím pustil z hlavy. Pár dní na to se objevil nový design stránek hulan.cz a zároveň se opět objevil problém s blikáním záhlaví – které je u něj teď snad ještě větší a tedy o to blikavější. Právě v komentářích se objevil odkaz na článek, který se tímto zabývá: Caching IE (pro server Apache) a Stop Image Flicker With Cache-Control Extensions (pro IIS).

Řešení objeveno!

Je nutno upravit konfiguraci serveru pomocí souboru httpd.conf (případně souboru .htaccess), jak je ukázáno v článku:

#this stops screen flicker in IE
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

LoadModule expires_module modules/mod_expires.so

Nejsem expert na Apache, takže nečekejte bezchybné vysvětlení, ale v podstatě jde o to, že se obrázkům nastaví doba expirace na 30 dní (po tu dobu by měly zůstat v cache paměti prohlížeče).

Co na to webhosting?

Bohužel výše uvedené techniky jsem nemohl na hostingu od pipni použít (možná za nějaký čas – až bude nový build Apache – to nebude problém viz příspěvek omezené možnosti nastavení v .htaccess na fóru webhostingu).

Vlastní metoda pomocí PHP

A tak jsem zkusil něco podobného vytvořit pomocí PHP. Potřeboval jsem tedy nastavit cachování obrázku přímo v http hlavičce – výsledek vypadá následovně:

<?php
header ("Content-type:  image/jpeg");
Header ("Last-Modified: " . gmdate("D, d M Y H:i:s",mktime (0,0,0,1,1,2000)) . " GMT");
Header ("Expires: ".gmdate("D, d M Y H:i:s",mktime(0,0,0, date(m), date(d)+7,date(Y))) . " GMT");
Header ("Cache-Control: max-age=10000000, s-maxage=1000000, proxy-revalidate, must-revalidate");
readfile('header.jpg');
?>

Ve skriptu je natvrdo nastavené, který obrázek se má načítat. Pokud chcete skript používat pro více obrázků, snadno jej upravíte aby přijímal parametr představující název obrázku (ale pozor na bezpečnost!). CSS kód se trochu změnil – nyní se neodkazuje přímo na obrázek header.jpg ale na header.php (v případě verze s parametrem by to bylo například image.php?hea­der.jpg).

Upravená verze záhlaví stránky by už nyní neměla blikat při přejíždění myší. Schválně otestujte opravenou ukázku (a vpřípadě blikání mi dejte mi vědět).

P.S. Právě jsem zjistil, že i pan hulán publikoval článek na toto téma, tím pádem je sice můj článek duplicitní, ale stejně jej uveřejňuji, neboť obsahuje i řešení pro hosting, kde není dovoleno měnit konfiguraci webového serveru.

Komentáře

1
11 říjen 2005, 18:04

Hezké řešení. Podobné věci se dají použít třeba pro GZIP kompresi CSS souborů, kdysi jsem o tom psal.. Uspoří to hodně přenesených KB.

 
2
Ikrk
11 říjen 2005, 18:38

Zajímavé… Nevím, jestli nejsem trochu mimo mísu, ale není jednodušší se s tím tak nepárat, nedávat tam odkaz, a napsat jen onclick=„docu­ment.location­.href =…“? (případně ve stylech cursor)

 
3
11 říjen 2005, 18:42

Pro odstraneni problemu s blikanim (v pripade konfigurace webserveru) je podstatna jen mala cast z uvedene konfigurace, a to

ExpiresActive On ExpiresDefault „access plus 1 month“

coz se strci do .htaccess pro dany adresar. Pak server u vsech souboru s tohoto adresare nastavi Expires (a soucasne s nim i Cache-control: max-age) na 1 mesic od posledniho pristupu k souboru. Expires hlavicka je vlastne zastarala, a v HTTP 1.1 je nahrazovana prave Cache-control: max-age.

Ostatni je jen omacka/alternativy. Neni duvod kesovani vetvit podle prohlizecu, coz dela ten prvni blok.

Leo

 
4
11 říjen 2005, 19:19

Sice řešení trochu „přes koleno“, ale velmi díky za něj!

2Ikrk: toto řešení je možné, ale kvůli Přístupnosti nepoužitelné – vypnutý JS či obrázky?.

 
5
11 říjen 2005, 19:48

Fajn článek vznikl (dávno) na http://www.fi­vesevensix.com/…/i­e6flicker/

 
6
Ikrk
11 říjen 2005, 22:25

2soundake: no ty obrázky myslím nehrají roli, ne? Když by se tam nenapsal jen ten odkaz, ale text by zůstal (čili „Vácklavek WEBLOG“), tak se nic nemění. Ten JS už je horší…

 
7
12 říjen 2005, 10:39

[3] Díky za upřesnění, ja opravdu nejsem odborník na servery :)

[6] No nevím, bylo by to pak sice přístupné z obsahového hlediska – patřičně by se zobrazoval buď text nebo obrázek (podle toho, zda jsou zapnuté styly/obrázky), ale funkčně by to bylo nepřístupné, protože bez javascriptu by to nefungovalo.

Navíc by se mi nelíbilo používat takovéto nestandardní odkazy (nakonec to byl jeden z Nielsonovych bodů ve článku 10 největších chyb webdesignu za rok 2005) a taky se ošidíš o spoustu vnitřních odkazů viditelných googlem (tedy další SEO nevýhoda).

 
8
12 říjen 2005, 15:47
 
9
12 říjen 2005, 18:24

Díky za návod. Samozřejmě jsem měl na testovacím IE tu volbu vypnutou, takže jsem nic nepozoroval.

Na pipni by měli s tím nastavením Apache fakt něco udělat, je to takové „nestadardní“.

 
10
12 říjen 2005, 21:38

„Páči“ sa mi, ako kôli ošetreniu kdejakej chyby či vlastnosti, kód narastá a narastá… a narastajú náklady na programovanie a prevádzku webu. Množia sa články, diskusie… a opäť narastajú náklady na čas strávený učením sa ako vyriešiť niečiu chybu.

Keď to tak čítam prestávam sa čudovať, že kvalitné vytvorenie stránok stojí veľké peniaze a 80% internetových prezentácii jednoducho abstrahuje riešenia ako je toto tu popisované.

 
11
12 říjen 2005, 22:03

[10] V okamžiku, kdy tě tvorba srtánek živí, by sis ten čas na učení najít měl. Ale zase jakmile se něco naučíš, tak už to poté používáš automaticky a neřešíš to, takže tě to pak už skoro žádný čas nestojí.

Ale ten vývoj a učení je věčné, protože pořád se objevují nové technologie, prohlížeče, nové postupy a fígle. Konečně ten vývoj člověk vidí na stránách co udělal – třeba před rokem. Dnes, když se na ty stránky podíváš, tak tam najdes spoustu nedostatků.

A ta vysoká cena prezentací? Podle mě je to částečně tím, že někteří „webdesignéři“ si na tvorbě webů snaží namastit kapsu a mají zákazníky, kteří nemají absolutně potuchu, jak náročné je vytvoření jejich stránek, ale na druhou stranu si taky málokdo uvědomuje, že vytvoření kvalitních stránek není jen sestavení grafického návrhu a jeho přenesení do HTML. Tvorba stránek totiž obsahuje také činnosti, které nejdou moc vidět, ale o to více se podílí na úspěchu webu – programování, copywriting, optimalizace, výběr vhodných klíčových slov, registrace do vyhledávačů a katalogů (to občas zabere stejně času jako vytvoření grafického návrhu), pozdější aktualizace, údržby a další optimalizace…

 
12
Leo
13 říjen 2005, 21:46

[10][11] Nevim, jestli resite puvodni reseni nebo jeho nahradu PHPkem. V druhem pripade je prirozena volba jen jedna / zmenit webhosting a jit tam, kde jim mod_expires nedela problemy. Leo

 
13
13 říjen 2005, 22:07

[11]Viac to vidím z pohľadu zadávateľa, toho čo platí. Na tu diskutovanom probléme je krásne vidieť, AJ kam padajú naše peniaze. Ak by som to chcel veľmi zjednodušiť, niekto niekde (MS?, Apache?, webhoster?) spravil chybu a mňa to stojí peniaze, ktoré by som radšej investoval do marketingu.

„…pak už skoro žádný čas nestojí“ Práve že stojí. Koľko riadkov zbytočného kódu potrebuješ na ošetrenie jednej takejto chyby/vlastnosti? A koľko je takýchto hakov potrebných pri vytvorení perfektnej, naozaj perfektnej stránky? Riadok k riadku a pracovný čas narastá. Potom príde ladenie nie 20 riadkového CSS ale 150 riadkového. Všetok ten kód následne prúdi po sieti sem a tam (každý hak je navyše zvykom dobre opoznámkovať:-). Ja platím ten čas, ja platím ten trafik, ja platím ten diskový priestor a aj to prvotné vzdelávanie sa nakoniec premietne do ceny programátora.

 
14
13 říjen 2005, 23:25

[13] No jo, ale to už je něco s čím nic nenaděláš :-) Tohle zbytečné nabalování a zesložiťování je všude – to je vývoj.

Před několika desitkami (nebo stovkami) let jsi si řekl, že si postavíš barák, tak jsi šel a postavil ho a netrápil ses jako teď s všemi možnými lejstry, povoleními, standardy, kolaudacemi, normami. To je daň za vývoj. Před pár lety nebyly hlasové čtečky (neřešila se přístupnost), byly 2 prohlížeče, které uměly minimum současného HTML (neřešila se kompatibilita), neexistovaly rozumné vyhledávače (neřešila se optimalizace pro ně),… ale zase na druhou stranu – díky tomuto vývoji ty stránky osloví mnohem více lidí (hendikepovaní, uživatelé jiných zařízení, z vyhledávačů).

Druhá věc je, že Microsoft dělá chyby a ty za ně zaplatíš. Musíš, protože je silnější a definuje „standard“. Co s tím uděláš? Nic. Nemůžeš přestat používat Office, protože všichni ostatní ho používají. Nemůžeš přestat ladit stránky pro MSIE, protože ostatní ho používají. Tedy samozřejmě můžeš se na Microsoft vykašlat a začít ho úplně blokovat, ale cena za to bude mnohem vyšší…

 
15
14 říjen 2005, 11:21

V default nastaveni to IE6 takto nastavene nema. Chyba sa objavuje len pri zmene na nastavenie, ake uvadzas. Inak je to dlhodobo znamy fakt, na anglickych blogoch sa o nom diskutovalo nejake dva roky spat dost intenzivne. Existuje nanho aj riesenie, ktore ti ale nepopisem, kedze je to uz davno.

 

Přidej komentář

Pište prosím slušně, s diakritikou a k věci. Dodržujte pravidla a využijte možnosti formátování uvedená pod formulářem.

Email nebude zveřejněn

Pravidla a možnosti formátování

  • Nepoužívejte HTML značky, blog podporuje formátování texy. Nový odstavec získáte 2x odřádkováním, odkaz: "text odkazu":odkaz, **tučně**, *kurzíva*
  • Adresy začínající na http:// budou automaticky převedeny na odkazy
  • Jediné dvě povinné položky formuláře jsou Jméno a zpráva
  • Na předchozí komentáře odkazujte zápisem [2]

 

Sekce