Pixy: CSS blog

Kurzory v CSS

Celkem často se stále setkávám s nastavováním kurzoru nad prvkem pomocí Javascriptu a jinými, ještě obskurnějšími metodami. Je to zcela zbytečné a neefektivní, vše může zařídit CSS. Pokud se má nad prvkem změnit kurzor a poukázat na to, že na prvek lze kliknout, stačí mu nastavit ve stylu cursor:pointer. Tato definice zajistí, že kurzor bude všude normální, jen v prostoru nad prvkem se změní na kurzor používaný pro odkazy (obvykle ruka s napřaženým prstem). Po opuštění jeho prostoru se vrátí zase do normálu.

MSIE ve Windows ale z jakýchsi důvodů tento standardní typ nepodporuje a místo něj používá vlastní výmysl hand (který nefunguje nikde jinde). "Naštěstí" má MSIE ještě jednu chybu, a to špatné zpracování pravidel CSS. Dá se toho využít pro malý hack, který zajistí stejný "ukazovací" kurzor ve všech prohlížečích: {cursor:pointer;cursor:hand}. Je nutno dodržet toto pořadí, opačné fungovat nebude. Toto pravidlo můžeme otestovat na příkladě: tento text má cursor:pointer;cursor:hand a naopak: tento text má cursor:hand;cursor:pointer

S ostatními typy kurzorů, které CSS používá, už problémy obvykle nebývají. Pouze musíme pamatovat na to, že kurzor určitě nebude vypadat všude tak, jak ho vidíme na svém počítači. Vzhled kurzorů poskytuje operační systém a každý je zobrazuje jinak. Např. help se někde zobrazí jako šipka s malým otazníkem, jinde jako velký otazník, jinde zas jako komiksová bublina atd. A vůbec největší rozdíly jsou v kurzorech typu nw-resize,se-resize atd. - ty vypadají na každém OS úplně jinak.

P.S.: Ach ten stress. Samozřejmě jsem ty definice hand-pointer napsal opačně - takže se omlouvám všem, kteří si to stihli přečíst ještě před opravením a pochopitelně jim to nefungovalo. Teď už je to správně.

Přesouvám sem upravený seznam definic písem pro CSS. Jen jsem ho trochu aktualizoval a doladil. Uvádím zde definice písma vhodné pro použití v CSS na českých (resp. středoevropských) WWW stránkách. Zvýrazněné položky jsou pro bezchybnou funkčnost nezbytné, ostatní lze vynechat. Pořadí se musí dodržet, názvy písem obsahujících mezeru musí být v uvozovkách (jednoduchých nebo dvojitých). Proč to musí být právě takhle, podrobný popis a další detaily se dočtete v Knize (stay tuned!).

bezpatkové

font-family: sans-serif;

patkové

font-family: serif;

neproporciální

font-family: monospace;

Arial

font-family: "Arial CE", "Helvetica CE", Arial, helvetica, sans-serif;

Verdana

font-family: "Verdana CE", "Arial CE", "Lucida Grande CE", "Helvetica CE", Verdana, Arial, lucida, sans-serif;

Tahoma

font-family: "Tahoma CE", "Arial CE", "Helvetica CE", Tahoma, Arial, lucida, sans-serif;

Times New Roman

font-family: "Times New Roman CE", "Times New CE", "Times CE", "Times New Roman", times, serif;

Courier New

font-family: "Courier New CE", "Courier CE", "Courier New", courier, monospace;

Georgia

font-family: "Georgia CE", "Times New CE", "New York CE", "Times CE", Georgia, times, serif;

Impact

font-family: "Impact CE", "Arial CE", "Techno CE", "Helvetica CE", Impact, lucida, sans-serif;

Comic Sans MS

font-family: "Comic Sans MS CE", "Arial CE", "Sand CE", "Helvetica CE", "Comic Sans MS", lucida, fantasy;