Moderní poučky o CSS tvrdí, že hackům už odzvonilo a místo nich by se měla používat feature detect a fallbacky. To je sice pravda v okamžiku, kdy chcete stylovat vzhled stránky, ale pokud potřebujete vyřešit nějaký bug, který se projevuje jen v konkrétním prohlížeči (hádáte správně, mluvím o Internet Exploreru Safari), je CSS hack tou nejlepší cestou.
Archiv štítku: hack
Stylování nenačteného obrázku
Pokud se ve stránce nenačte obrázek, zpravidla to znamená chybu serveru a je potřeba ji opravit. Když je to chyba vašeho serveru, zpravidla to není problém, ale řada stránek načítá obrázky z jiných serverů, např. CDN třetích stran, kde dostupnost nelze moc ovlivnit (a často může být jen dočasná).
Nicméně to návštěvníka nezajímá. Z jeho pohledu stačí, když mu místo nedostupného obrázku zobrazíte něco jiného. HTML k tomuto účelu nabízí atribut ALT, který může (resp. měl by) obsahovat popis toho, co by bylo na obrázku vidět, kdyby se zobrazil. Nicméně obyčejně zobrazený text v základním stylu už dopředu říká „tady něco není v pořádku“ zvláště v okamžiku, kdy máte stránku založenou na speciálním designu.
Námět článku: http://bitsofco.de/styling-broken-images/
Absolutně pozicovaný odkaz nefunguje na IE9?
Internet Explorer 9, který je stále rozšířený na počítačích s Windows XP a neaktualizovaných Vista a Windows 7, obsahuje jednu nepěknou chybu, která může uživatelům vašich stránek zabránit ji správně používat.
Chyba spočívá v tom, že odkaz, který je absolutně pozicovaný, nedostane správně nastavenu hodnotu z-index a v důsledku toho bude skrytý za ostatními prvky:
.linkContainer { width: 100px; height: 50px }
.linkContainer > * {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 10;
}
/* display link above everything else */
.linkContainer > a { z-index: 11; }
V tomto případě bude mít v IE9 odkaz skutečný z-index = 1, takže jakýkoliv jiný prvek v kontejneru znemožní kliknout na něj.
Oprava je celkem jednoduchá – pokud do odkazu přidáte nějaký obrázek na pozadí, donutíte IE9 trochu více přemýšlet o tom, jak odkaz zobrazit a správně mu nastaví požadovaný z-index.
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url('link.png') transparent;
}
Tento trik funguje i s prázným nebo dokonce neexistujícím obrázkem:
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) transparent;
/* 1x1px průhledný GIF */
}
nebo
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url(#) transparent;
/* # odkazuje na vlastní HTML stránku,
což není validní obrázek a proto
se v pozadí nic nezobrazí */
}
Pokud nemůže řešit opravu pro konkrétní odkazy, stačí na začátek prvního CSS souboru (nebo na začátek HTML stránky) přidat obecnou definici:
a { background: url(#); /* Fix IE9 anchor */ }
Pokud bude tato definice skutečně na začátku, opraví automaticky všechny (potencionálně rozbité) odkazy a zároveň umožní ostatním CSS definicím definovat vlastní barvy a pozadí specifickým odkazům.
Ani tohle nepomohlo?
V některých případech se může zdát, že z-index v IE9 nejde nastavit některým (dalším) prvkům.
To je pravděpodobně způsobeno tím, že se pokoušíte umístit prvek absolutně přes nějaký z uživatelského pohledu důležitý prvek. V takovém případě IE9 zabrání znepřístupnění tohoto prvku tím, že zruší z-index prvkům, které by ho překrývali.
Za uživatelsky důležité jsou považovány formulářové prvky (input, select, atd.), videa, Java objekty a podobné prvky, které nativně reagují na kliknutí a jiné události myši.
Firefox hack pro velikost tlačítka
Ve Firefoxu mohou být tlačítka (input[type=button]) přesně o 2 pixely menší. To je způsobeno „chybou“ v interním výchozím CSS stylu, který neumožnuje změnu line-height u inputů.
Pro ruční nastavení výšky tlačítek použijte tento hack:
/* použij následující styl pouze ve FF */
@−moz−document url−prefix() {
input[type=button] {
height: 16px;
}
}