CSS rollover i treperenje

CSS rollover je izuzetno jednostavan metod za pravljenje rollovera sa "preloadom" slike koja se prikazuje kada posetilac pređe mišem preko linka. Opisavao sam ga ranije, a sad samo da ponovim neke osnovne stvari. Poenta je da imate recimo link dimanzija npr. 60x25 piksela. Za tako nešto se pravi slika 60x50px gde gornja polovina predstavlja normalno stanje, a donja polovina slike stanje kada korisnik pređe mišem. Ceo trik je da za hover datog elementa samo pomerite background nagore (background-position: bottom left će odraditi trik u našem slučaju). Evo i konkretnog primera:

a.nekiLink {
  background: url('background.png') no-repeat;
  background-position: top left;
}

a.nekiLink:hover {
  background-position: bottom left;
}

Namerno sam izvukao background position u prvoj deklaraciji da bi trik bio očigledan.

CSS rollover je užasno elegantan način da se brzo i jednostavno naprave rolloveri bez trunke JavaScripta i napucavanja markupa. Međutim, u Internet Exploreru ima mali problem: može da dođe do neprijatnog treperenja ukoliko vaš HTTP server šalje eksploreru vary headere. Nisam znao u čemu je problem ni kako se rešava, ali sam znao da užasno nervira čoveka kojem je sajt pravljen. Google je iznedrio rešenje za Apache:

BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

Ovo jednostavno dodajte u httpd.conf ili .htaccess i problem rešene. Samo rešenje sam našao u ovoj poruci.