Pokud potřebujete na stránce udělat nějaký obrázek průhledný (ikonu, vodoznak, apod.) asi vás napadne použít GIF nebo PNG, které jsou nejčastěji používanými formáty pro průhledné obrázky.
Bohužel ale GIF podporuje jen 256 barev a PNG je zase bezztrátové, takže generuje hodně velké obrázky.
Existuje ale celá řada alternativ, pomocí kterých můžete ušetřit čas a traffic uživatelů při stahování stránky.
Pokračování textu Jak na průhlednost obrázků?Každý správný web designer a HTML kodér zná CSS pseudo třídu :visited, pomocí které můžete označit již navštívené odkazy.
V moderním web designu se ale často setkáváme s tím, že navštívené odkazy jsou záměrně sjednocovány, aby nebylo potřeba vymýšlet odlišný styl pro navštívené a nenavštívené položky.
A v neposlední řadě některé designy ani neumožňují efektivně určit, co už uživatel „navštívil“ a co ne (např. Facebook, Twitter, apod.) nebo je lze navštěvovat opakovaně (např. několikrát denně aktualizované články na iDnes nebo Novinkách).
Máte nějaký kontejner (DIV), jehož nejdůležitějším obsahem je obrázek na pozadí (ikona, logo, apod.) a chcete, aby se velikost DIVu a velikost pozadí responzivně přizpůsobila na šířku stránky (nebo její část)?
Inspirováno http://www.sitepoint.com/video-scalable-backgrounds-css/.
Pokud umístíte obrázek do DIVu za tím účelem, aby se DIV velikostí přizpůsobil obrázku (a umožnil např. zadání více borderů, nebo absolutní pozicování přes obrázek), někdy se setkáte s tím, že DIV má dole malý okraj, který přesně nesedí na obrázku. Navíc se tento okraj nedá najít v debuggeru, protože nejde o padding ani margin.
<div class="imgWrapper">
<!-- autosize DIV around IMG -->
<img src="..." />
</div>
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.
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.