CLEARFiX - xhtml, css, javascript, seo

V tomto příspěvku budu hlavně odkazovat na zajímavé taháky, které se můžou hodit webdesignerovi, pro rychlé nakouknutí do dané problematiky.

HTML 5

Antonio Lupetti alias Woork připravil přehlednou tabulku s HTML 5 tagy, můžete si dokonce vybrat mezi bílou nebo černou verzí

CSS

Dave Child udělal přehledný tahák pro CSS styly, dokonce ho aktualizoval a proto jsou u něj ke stažení dvě verze, novější V2 a starší V1.

Javascript

Dave Child udělal přehledný tahák pro Javascript.

jQuery

Antonio Lupetti alias Woork udělal přehledný tahák pro jQuery.
G. Scott Olson udělal také tahák pro jQuery

PHP

Dave Child udělal přehledný tahák pro PHP, také ve dvou verzích, aktualizovaná V2 nebo starší V1.

Regulární výrazy

Další co Dave Child udělal jsou regulární výrazy, také ve dvou verzích, novější V2 nebo starší V1.

mod_rewrite

Poslední co jsem našel od Dave Child je tahák pro mod_rewrite, opět ve dvou verzích, novější V2 nebo starší V1.

SEO

Danny Dover na serveru SEOmoz.org publikoval skvělý tahák o SEO.

Většina lidí používá ve svém prohlížeči záložky, a při kliknutí na odkaz a zobrazení do nového panelu se odkaz typicky označí čárkovaným ohraničením:

Pokud tomuto jevu chcete zabránit, tak stačí do CSS přidat:

link, a:visited, a:hover {
     outline:none;
}

A po kliknutí na nebude odkaz orámován:

Vě většině prohlížečů se průhledný PNG zobrazí správně, až na starý Internet Explorer 6 se průhledne okraje podbarví odstínem šedo/bílé.

Pro odstranění toho nešvaru se používá malá javascriptová knihovna,
kterou udělal Drew Diller a řešení se nazývá DD_belatedPNG.

Použítí je jednoduché, připojíte si do dokumentu 7Kb soubor, a na elemtech které, chcete probudit, tak tento script zavoláte, např:

Tímto si na elementech logo a search, na kterých používáme průhledné PNG, zavoléme funkci, která nám i v IE6 zaručí správnou funkci.

Čím jiným na blogu pojmenovaném CLEARFiX začít, než se stejnojmeným trikem
Většina kodéru tento trik určitě zná, a pokud ne tak se už určitě setkali s tímto problémem:

	div zarovnaný doleva


	div zarovnaný doprava

Pokud toto udělám, a neošetřím float, tak nám z divu content oba floatované divy „vytečou“.
Dříve se používalo např:

	div zarovnaný doleva


	div zarovnaný doprava

Nebo místo clear=“all“ se používalo (kvůli strictu) class=“clear“, kde clear byl nastylován jako clear:both, ale tento zápis se mí vubec nelíbil, proč kvůli takové „blbosti“ jako jsou dva floatované prvky dávat do kodu další tag, proto vzniknul clearfix:

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */

Po přidání do CSS, upravíme ještě zdrojový kod:

	div zarovnaný doleva


	div zarovnaný doprava

A po této úpravě se nám nic podobného už nemůže stát