CSS rychle a efektivně

Taky pořád čtete, jak optimalizovat CSS tím, že je spojíte do jednoho velkého souboru, který načtete v hlavičce HTML stránky?

No, Google si teď uvědomil, že to není tak úplně nejlepší a snaží se Chrome (a tedy i Operu a Safari) přepsat tak, aby se – světe div se – choval stejně jako Internet Explorer. Vývojáři Microsoftu totiž do IE (ať už záměrně nebo nechtěně) zakomponovali mechanismus, který umožňuje načítat CSS efektivněji po částech.

Pokračování textu CSS rychle a efektivně

Favicon, aneb jedna ikona nestačí

Od roku 1999 umějí prohlížeče, počínaje tehdy vydaným IE5, zobrazovat ikonu webu, tzv. favicon.

Původně šlo o 16x16px obrázek uložený ve speciálním, Microsoftem vytvořeným, formátu obsahujícím BMP obrázek a masku průhlednosti (známý jako *.ICO). Od té doby se ale hodně změnilo a s malou ikonou si již nevystačíte.
Pokračování textu Favicon, aneb jedna ikona nestačí

Responzivní obrázky na míru prohlížeči

Webkit nyní podporuje tzv. Client Hints („rady od klienta“), pomocí kterých můžete na serveru připravit obrázky a ostatní zdroje tak, aby se co nejlépe hodily pro příslušný prohlížeč nebo zařízení.

Když prohlížeč požádáte, může v každém požadavku poslat údaje o rozlišení a rychlosti připojení zařízení, takže budete přesně vědět, co si můžete dovolit stáhnout a zobrazit, aby to neovlivnilo rychlost zobrazení a kvalitu stránky.

Pokračování textu Responzivní obrázky na míru prohlížeči

Pomozte zobrazit vaši stránku

HTML stránka může obsahovat celou řadu tagů a odkazů, které pomohou buď prohlížečům nebo vyhledávačům lépe pochopit rozložení stránek a rychleji ho načíst a zobrazit.

Pokud například načítáte obrázky a soubory z CDN, můžete prohlížeči říct, že se má připravit a najít nejbližší CDN server ještě před tím, než začnete soubory stahovat. Pokud máte seznam nebo článek rozdělený na stránky, můžete označit odkaz na následující stránku a prohlížeč pak tuto stránku načte ještě dříve, než ji bude chtít uživatel zobrazit; vyhledávač naopak díky tomu spojí všechny položky na jednu stránku a nebude uživatele odkazovat doprostřed seznamu.

Pokračování textu Pomozte zobrazit vaši stránku

Pro testování IE už nepotřebujete Windows

Pokud potřebujete otestovat stránku v IE (Internet Explorer, Trident, Edge), můžete použít virtuální stroje, které nabízí Microsoft zdarma ke stažení na modern.ie.

Druhou možností je použítí vzdáleného testování přes Microsoft Azure. Zatím jde o Technical preview, takže je zdarma, ale je možné, že později bude tato možnost zpoplatněna nebo dostupná jen uživatelům Azure nebo MSDN. Oproti virtualizaci zde stačí stáhnout několika megabytovou aplikaci a samotný několika GB virtuální stroj bude uložen v Azure cloudu.

Pokračování textu Pro testování IE už nepotřebujete Windows

Jak na průhlednost obrázků?

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ů?

Označení navštívených odkazů

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).

Pokračování textu Označení navštívených odkazů