CSS fígle od Plaváčka

Pár fíglů, které jsem si odnesl z Plaváčkova článku o přístupné obrázkové navigaci – nulování výchozích hodnot všech elementů, kurzor ručička ve všech prohlížečích a elegantní posouvání pozadí.

Vynulování výchozích hodnot

Pomocí hvězdičky jakožto selektoru se snadno vynulují výchozí hodnoty okraje a výplně všech blokových prvků (což je podstatné hlavně u těch, které mají tyto hodnoty v prohlížeči přednastaveny: nadpisy, odstavce, seznamy,…)

* {
  margin:0;
  padding:0
}

Ušetří vám to spoustu problémů s rozdíly mezi jednotlivými prohližeči.

Kurzor ručička v MSIE i v Mozille

Pro kurzor ve tvaru ručičky používá MSIE hodtnotu hand zatímco ostatní podporují pointer, takže zápis v CSS by měl vypadat následovně (aby ručička fungovala opravdu všude):

span {
 cursor: pointer;
 cursor: hand;
}

Posouvání obrázku na pozadí

O rolloverech založených na posouvání pozadí psal už i pixy ve svém článku, ale Plaváček použil pro nastavení polohy pozadí místo pixelů klíčová slova left, center a right, což je podstatně více elegantní a hlavně rozměrově nezávislé.

#home span {
 background:  url("home.gif") no-repeat center top;
}

#home a:hover span {
 background:  url("home.gif") no-repeat left top;
}

Přístupná obrázková navigace

A konečně také celý článek stojí za přečtení – je o vytváření grafické navigace s rollover efektem, která je:

• bez javascriptu
• použitelná i bez stylů
• použitelná i bez obrázků
• jednoduchá a elegantní

navíc byl článek později i zaktualizován a tak se vyřešil problém s blikáním obrázků v prohlížeči MSIE 6.

Odkazy:

• Plaváčkův článek o přístupné obrázkové navigaci
• Pixyho rychlé rollovery bez načítání
• Pixiho náhrada textu obrázkem