CLEARFiX - xhtml, css, javascript, seo

Většina kodérů pokud na stránce použije Javascript (dále JS), tak už se nestará o ty, kteří JS mají vypnutý. Na svých webech (jako je např. tento blog) mě to také nezajímá nebo neřeším to do takových extrémů, protože počítám s tím, že moji návštěvníci mají JS zapnutý, ale na webech, které tvoří portfolio naší firmy a jsou pýchou naších referencí, se o uživatelé, kteří mají JS vypnutý starám!

Zvláštní CSS

První věc, kterou se snažím základní prvky ošetřit, je vlastní CSS styl. Takový styl sepíšu vždy až při finalizování samotného webu, kdy ladím právě tyto věci. Pro připojení speciálního CSS, které se bude načítat pouze pokud má uživatel JS zapnutý, používám tento kód, který umístím do hlavičky webu:

Tímto si načtu do zdrojového kódu CSS styl s názvem styles_js.css, ve kterém jsou speciální styly pro zobrazení různých JS fičur.
Pokud tedy např. použiju na webu slider, kterým budu listovat tam a zpět, tak bez JS tento script nebude fungovat, proto do hlavního stylu, ve kterém mám sepsaný celý web např. styles.css, dám tento slider display:none a naopak v souboru slider_js.css dám display:block a tím zaručím správnou funkčnost i pro ty co nemají zapnutý JS.

Odkaz ve kterém je javascript:void(0)

Typický příklad, kdy někdo dělá nějaký script nad odkazem a na něm volá např. onclickem nějakou funkci a aby nemusel ošetřovat odkaz, tak dá do pamateru href=“javascript:void(0)“ tímto udělá to, že při kliknutí na odkaz se nic neudělá, typický příklad:

alert ahoj světe

Toto je opravdu jednoduchý příklad, kde při zapnutém JS se při kliknutí na odkaz zobrazí vyskakovací okno, kde bude napsáno ahoj světe, při vypnutém JS se půjde na stránku alert.html, kde se dozvíme stejnou věc, ale v době internetových prohlížečů se záložkami a zvykem uživatelů je používat se mi tento způsob zdá opravdu příšerný, protože při zapnutém JS a snaha zobrazit stránku do nového okna se nám neudělá nic, a přitom řešení je jednoduché:

ahoj světe

Tímto si uživatel může „vybrat“, buď si klikne a zobrazí se mu vyskakovací okno ahoj světe a nebo si bude chtít zobrazit odkaz do nového okna a tím se mu zobrazí stránka alert.html.

Tyto příklady berte jen jako ukázku, nic jednoduššího mě nenapadlo! Chtěl jsem jen poukázat na základní problémy, na které kodéři zapomínají

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