Seriál: Používáme CSS

Svislé centrování v CSS

Vilém Málek použil postup ja na 100% výšku z QuirksMode a vytvořil návod jak na svislé centrování. Celý návod je popsán v angličtině a funguje dobře ve všech moderních prohlížečích. Celá "finta" spočívá v tom, že stačí nastavit height: 100% prvkům body a html (via Pixy).

Okraje v CSS

Andy Budd přináší na svém weblogu v příspěvku No Margin for Error pěkné vysvětlení, jak fungují okraje v CSS. Pokud vám až doteď dělaly problémy, tak po přečtení příspěvku budete mít alespoň trochu jasněji. Dozvíte se například, že okraje sousedních bloků se slučují nebo jak se chová vnější a vnitřní blok.

CSS pro tabulky

Tabulky jsou mnohými opovrhovány a je zapomínán jejich hlavní účel - prezentace tabulkových dat. Pokud je budete chtít použít a při tom je správně ostylovat pomocí CSS, tak vám doporučuji velmi pěkný článek Marka Lynche Tables for Tabular Data. Je v něm shrnuto, jak správně používat značky <thead>, <tbody> a <tfoot> nebo jak vše správně ostylovat pomocí CSS.

CSS position:fixed i v IE

Pixy přinesl v příspěvku Náhrada chybějící podpory position:fixed řešení, jak použít position:fixed i v Internet Exploreru. Využití najdete třeba u menu (nebo jiné části stránky), které má zůstat stále na stejné pozici a nerolovat s obsahem. Při pohledu na ukázku, bych ještě do přečtení příspěvku řekl, že se jedná o stránku s rámci.

Takže pomocí tohoto CSS hacku můžete využít jednu z mála výhod rámců.

3D CSS Box Model

Jon Hicks vytvořil pěkný 3D CSS Box Model, na kterém je vidět, jak se jednotlivé vrstvy v CSS skládají na sebe. Je vidět co se čím překryje a co tedy bude a nebude viditelné.

Klikací CSS logo

Řada webů nevkládá logo jako obrázek do (X)HTML, ale nadefinuje obrázek jako pozadí nějakému prvku. Takže místo:

<a href="/"><img src="/logo.gif" ... /></a>

použijí například:

<a href="/"><span id="logo"></span></a>

a v CSS:

#logo {
  background: url (logo.gif) no-repeat;
  width: 200 px;
  height: 100 px;
  display: block;
}

Vše funguje správně až na Internet Explorer, který nad logem neukáže obvyklou ruku, ale kurzor myši zůstane stejný. Takže 99 % uživatelů nepozná, že je logo klikací. A to je chyba. Řešení je přitom velice jednoduché.

Místo definování velikosti prvku span, kterému potom nastavíme obrázkové pozadí, rovnou nastavíme prvek a. Výsledek bude tedy následující:

<a href="/" id="logo"></a>

Dále je samozřejmě možné vše dále upravit, ale pointa zůstává - nastavit obrázek na pozadí prvku a místo span.

Klikatelné obrázky vložené přes CSS

Problém obrázků vložených přes CSS je, že z nich nejdou snadno udělat odkazy. To se snaží vyřešit Dan Cederholm na SimpleBits v článku Clickable Link Backgrounds. Trik spočívá v použití seznamu a nadefinování obrázku na pozadí jednotlivým prvkům <li> místo odkazu.

Relativní jednotky v CSS

Martin Snížek v článku Myslete elasticky s CSS na Intervalu přinesl návod, jak používat relativní jednotky místo absolutních. Dále doporučuje používat CSS vlastnosti max-width a min-width. Nechybí také jejich CSS hack pro Internet Explorer.

Výtahy z textu na webu

V tištěných médiích je časté zvýraznění určité zajímavé části textu, která má upoutat čtenáře. Na webu se výtahy z textu nevyskytují skoro vůbec. Návod, jak takové výtahy z textu vytvořit, přinesl Martin Snížek v článku Výtahy z textu na stránce pomocí JavaScriptu a CSS pro Interval.cz.

Martin použil k vytvoření výtahů z textu JavaScript a CSS. Sice by bylo možné zvýrazněný text znovu zopakovat, ale pak by uživateli s vypnutými styly (např. hlasové čtečky, některé mobily) nedával text smysl. Nevěděl by, proč se určitá část textu opakuje. Díky použití JavaScriptu a CSS je daný text na stránce zobrazen pouze jednou.

Ilustrační obrázek v textu

Pro A List Apart napsal Daniel M. Frommelt článek Cross-Column Pull-Outs, v kterém přináší návod, jak do textu vložit obrázek, aby přesahoval do dvou sloupců. Použito je pouze prostředků XHTML a CSS. Vše funguje výborně, pouze při vypnutém CSS jsou obrázky vloženy na trochu nestandardní místa. Výsledek bude vypadat následovně:

Podtrhněte odkaz libovolnou barvou

Dosud jsem žil tak nějak v domnění, že nelze podtrhnout odkaz jinou barvou než je barva textu. Po přečtení článku Barva podtržení odkazu Honzy Biena si to už nemyslím. Opravdu je možné mít různou barvu textu a podtržení, viz ukázka. Použit je následující jednoduchý XHTML/CSS kód:

CSS:

a {color:red}
a span {color:blue}

XHTML:

<a href="#"><span>modrý odkaz s červeným podtržením</span></a>

JavaScript a CSS: Drag and Drop

Dokáži si představit webové aplikace, kde se bude Drag and Drop hodit. Například si navrhnete vlastní rozložení menu a to si pak uložíte do Cookies. Živou ukázku a kódy naleznete na stránce Drag & Drop Sortable Lists with JavaScript and CSS (via Zeldman).

Odkáží vás také na starší článek, který se ale tématicky váže k tomuto tématu, na A List Apart. V Complex Dynamic Lists: Your Order Please se dočtete o dynamickém stylování a upravování seznamů.

Přístupné záložky v CSS a JavaScriptu

Chris Heilmann vytvořil přístupné záložky vytvořené v CSS a JavaScriptu. Líbí se mi na nich, že fungují jak při zapnutém či vypnutém CSS a JavaScriptu. Dají se použít pro dokumenty s velkým množstvím dat, které je nutné zorganizovat na stránce. Není to úplná novinka, ale zde máte vše nachystané pro snadné použití na libovolném webu. (via CSS Beauty)