Archiv rubriky: Formátování

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ě

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

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ů

Obrázek v DIVu bez okrajů

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>

Pokračování textu Obrázek v DIVu bez okrajů

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.

Proč nefunguje line-height?

Nastavíte prvku menší velikost písma a příslušnou line-height, ale prohlížeč line-height ignoruje a zobrazuje řádky příliš daleko od sebe?

<div>
    Lorem ipsum dolor sit amet,
    <span>
        consectetur adipiscing elit. ...
    </span>
</div>
div {
    font-size:32px;
    line-height:1.4EM;
}
span {
    font-size:12px;
    line-height:1EM;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque bibendum ullamcorper nibh, mattis laoreet eros consectetur a. Nam aliquam venenatis tellus a cursus. In et mattis eros, eget ullamcorper nisi. Donec interdum iaculis feugiat. In a lobortis nulla. Proin egestas dolor id lorem semper, vitae viverra sapien scelerisque. Integer consequat venenatis nibh, id egestas ligula mollis eu. Cras vitae justo hendrerit, pretium elit sit amet, volutpat metus. Donec et sagittis nunc. Cras luctus turpis sed risus molestie, ac eleifend urna tristique. Aenean a nunc fermentum, bibendum nibh in, rutrum tellus. Aliquam dictum nunc quis leo tempor, vitae molestie tortor viverra.

Pokračování textu Proč nefunguje line-height?

Google Fonts na stránkách

Již jsme si dříve ukázali, jak vložit do stránky vlastní písmo. Tento přístup ale vyžaduje, abyste příslušné písmo měli a nahráli na svůj web server.

Existuje ale i alternativa, jak použít na webu pěkné písmo, bez nutnosti shánět vlastní písmo a konvertovat ho pro web.

Tím jsou Google Fonts, neboli online knihovna volně dostupných písem. Písma jsou hostována přímo na stránkách Googlu (CDN/Cloud), takže pokud si uživatel jednou písmo stáhne, bude ho moci používat na všech vašich i cizích webech (teď samozřejmě mluvím o cachování – není potřeba nic instalovat). Pokračování textu Google Fonts na stránkách