PC-politika.cz - Novinky: HTML5: Nežadouci inline styly; jak je odstranit PC-politika

HTML5: Nežadouci inline styly; jak je odstranit

Specifikace HTML5 se dere rychle na webové stránky. Pro kodéry je to však někdy horor, např. se „zábavnými" inline styly, které HTML 5 nesnáší. V dnešní ukázce se podíváme, jak takové styly vypadají - a hlavně ukážeme si, jak je odstraňovat. Lépe řečeno nahrazovat, aby zdrojový kód byl validní. Úpravu provedeme na platformě PHP-Fusion, totéž platí pro další systémy, které pracují s PHP kódem.

news.php

Na inline styly vás např. upozorní nejen validator validatorW3c.org nebo validatorw3.cz, ale též SEO-servis.cz, a to takovým způsobem:

Hláška o výskytu inline stylování v dokumentu www stránky.

ř.74 a ř.75:

Původní zlotřilost kódu k obrázku img:

$news_[0] .= "<a href='print.php?type=N&item_id=".$news_info['news_id']."'><img src='".get_image("printer")."' alt='".$locale['global_075']."' style='vertical-align:middle;border:0;' /></a>"; {

Jak vidíme ze zápisu k obrázku, je v něm nežádoucí inline stylování, které validátor označí za chybu (definice zarovnání "vertical-middle" a zápis s nulovou hodnotu rámečku "border". Tyto zlotřilosti nežádouci inline CSS stylu jsou: style='vertical-align:middle;border:0;'

Po úpravě:

$news_[0] .= "<a href='print.php?type=N&item_id=".$news_info['news_id']."'><img src='".get_image("printer")."' alt='".$locale['global_075']."' /></a>";

Resumé

Provedli jsme tedy úpravu v kódu, který se týká odkazu na obrázek - konkrétně je to obrázek malé ikonky tiskárny ve footeru pod odkazem u článku na Homepage. Odstranili jsme nežádoucí inline styl, který HTML 5 nesnáší. A nejen to zmizi s ním i další nežádoucí zápis border:0;. O zobarzení obrázku se stará zápis: $locale['global_075'] = "Tisk";. Pokud bychom chtěli pozicování tohoto obrázku upravit, bylo by nejvhodnější přiřadit mu potřebné stylování v CSS. V tomto případě je to však zbytečné, jelikož obrázek je konkrétně v PHP-Fusion, v jeho styles.css definován v řádkovém boxu prostřednictvím selektoru news-footer.

Autor: Květoslav (Kvido) Vícha