Časté chyby v CSS
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Časté chyby v CSSČasté chyby v CSS

 

Časté chyby v CSS

Google       16. 11. 2008       33 126×

V dnešním článku se blíže podíváme na nejčastější chyby, kterých se kodéři dopouštějí při tvorbě webu za pomocí kaskádových stylů. Tento jazyk je sice velmi mocný, na druhou stranu nijak neomezuje tvůrce webu v jeho používání, což vede k častým chybám. Přináším vám tedy soupis deseti nejčastějších chyb, které lze v CSS udělat.

Reklama
Reklama
  1. Optimalizace pro různé prohlížeče
    Jedná se pravděpodobně o nejčastější problém, protože různé prohlížeče kód interpretují různě. V optimální situaci se vaše webová stránka zobrazí ve všech prohlížečích stejně, realita je však, jak už to tak bývá, někde jinde. Způsob, kterým jádra dvou nejrozšířenějších prohlížečů - Firefoxu a Internet Exploreru - renderují stránku, se v mnoha věcech liší, mnohdy tedy dostanete rozdílné výsledky. Situace se v průběhu let výrazně zlepšila, některé odlišnosti však přetrvaly. Někteří weboví vývojáři stránku optimalizují pouze pro svůj oblíbený prohlížeč, aniž by zkontrolovali výsledek i v konkurenčních programech. V mnoha případech nezpozorujete žádný rozdíl, v některých však může dojít k mnoha nechtěným situacím - od mírně posunutých prvků na stránce až k naprostému rozhození layoutu, ve kterém se poté uživatel či čtenář nemusí orientovat. K ověření správného zobrazení v nejrůznějších prohlížečích a na nejrůznějších platformách slouží výborný nástroj Browsershots. Tento nástroj je velmi jednoduchý - zadáte url vašich stránek, zvolíte, na kterých prohlížečích a platformách se mají otestovat, a do několika minut obdržíte výsledek ve formě snapshotů. Snadno tak zjistíte, ve kterých prohlížečích se vaše stránky zobrazují korektně, a ve kterých nikoliv.

  2. Optimalizace pro nízká rozlišení
    Spousta vývojářů dnes vlastní displeje s vysokým rozlišením (a nutno dodat, že na to jsou patřičně hrdí) a nic je nenutí optimalizovat pro nižší rozlišení. Situace na druhé straně barikády je však jiná - najde se velké množství lidí, kteří web stále prohlížejí v nižších rozlišeních (800x600 či 1024x768), a pokud pro tato rozlišení není stránka optimalizována, může vám být sebelepší design k ničemu. Zastoupení různých rozlišení, která používají návštěvníci vašich stránek, lze celkem dobře odpozorovat z monitorovacích služeb jako je Toplist či Google Analytics. Pamatujte: pokud optimalizujete vaše stránky i pro nižší rozlišení, máte větší šanci, že téměř každý návštěvník najde informace, které hledá.

  3. Opomíjení frameworků
    Pokud vytváříte layout pomocí CSS vlastními silami úplně od začátku, možná byste se sami měli zamyslet, proč tak činíte. Ani v oblasti CSS nic nového pod sluncem nevymyslíte. Existuje spousta frameworků pro snazší práci s CSS - například Blueprint Framework či 960 CSS Framework. Největší výhodou těchto pomocníků je, že nemusíte začínat od naprostého začátku, to již udělal někdo za vás. Jsou navíc dobře vyladěné pro správné zobrazování ve všech majoritních prohlížečích, odpadá tedy práce s testováním kompatibility. Pokud tedy nevyvíjíte projekt, ve kterém mají vaše kódy opravdové opodstatnění, použijte raději některý z CSS frameworků. Proč znovu vynalézat kolo?

  4. Generické třídy
    Pokud chcete přemýšlet o dobré znovupoužitelnosti nějaké třídy, je vhodné, aby její název vypovídal o tom, co ona třída ve skutečnosti dělá. Mezi výhody tohoto postupu patří fakt, že nemusíte pro různé prvky na stránce vytvářet různé třídy, které v podstatě dělají to samé. Výstižný název třídy zajistí, že nebudete v budoucnu muset přemýšlet, co třída dělá. Ukážeme si to následujícím příkladě, kde je však kvůli bugu v prohlížeči kódů zdvojené slovo „right“ - správně má samozřejmě být .right{float:right}.
    .right{float:right}
    Pokud nyní chcete zarovnat prvek doprava, stačí mu přiřadit třídu „right“, která svým pojmenováním jasně vystihuje svoji podstatu.
       1. 
    Je vhodné použít nejméně tři generické třídy, a to:
    .clear{clear:both}
    .right{float:right}
    .left{float:left}

  5. Nevalidní HTML
    Pokud jste netušili, že nevalidní HTML kód může ovlivnit CSS, tak věřte, že může, a to dost dramaticky. Validaci stylu totiž můžete provést jen tehdy, pokud je validní i váš (x)html kód. Pokud máte pocit, že vaše styly nepracují tak, jak by měly, zkuste nejdříve zkontrolovat html. Neuzavřený div či sloupec tabulky může způsobit opravdovou paseku, je tedy třeba na to dávat pozor.

  6. Nevalidní CSS
    Nezapomeňte validovat vaše soubory se styly - v případě problému dostanete dost jasné upozornění, v čem je zakopaný pes. Pokud je vaše CSS validní, máte mnohem větší šanci na kompatibilitu v různých prohlížečích.

  7. Přehnaně velké obrázky na pozadí
    Hlavně začátečníci v oblasti webdesignu mají tendenci na pozadí „naplácnout“ nějakou velkou fotku, nejlépe ještě v bitmapovém formátu, a nestačí se potom divit, že se jim stránka načítá velmi, velmi pomalu. V mnoha případech lze tento problém vyřešit opakováním menšího obrázku pomocí vlastnosti background-repeat. Načteme tak mnohem méně dat, což urychlí načtení stránky. Někdy se samozřejmě velkým obrázkům na pozadí nevyhneme, musíme však počítat s vyšší prodlevou načtení stránky, než kdybychom použili malé obrázky či jednolitou barvu.

  8. Zbytečné CSS
    Často zapomínáme na jednu základní věc - CSS by nám mělo práci usnadnit a tedy i urychlit. Někdy je prostě jednodušší použít tabulku, než vymýšlet layout s plovoucími divy. Není vždy nutné používat pouze jednu technologii na úkor druhé, pokud nám druhá dokáže dát totéž a efektivněji.

  9. Inline CSS
    Inline zápis CSS je sice legální záležitost, avšak jeho použití je spíše nedoporučováno. Základní premisou CSS je udržovat odděleně html kód a styly, což si s inline zápisem navzájem odporuje. Pokud budete sdružovat styly do jednoho souboru, budete mít vždy všechny třídy pěkně po ruce a nebudete muset procházet html kód a následně z něj „dolovat“ inline zapsané CSS.

    Místo tohoto zápisu
       1. text
    proto raději použijte tento:
       1. text  

  10. Příliš mnoho souborů
    Viděli jste někdy design, který byl rozdělen na dvanáct CSS souborů? Editování byť malé změny v takovém kvantu souborů se velmi rychle může stát noční můrou, nemluvě o času, který prohlížeč potřebuje k jejich načtení. Optimální je používat jeden až dva soubory, s více soubory už můžete mít velké problémy.

Původním autorem tohoto článku je Glen Stansberry, jedná se o překlad.

Zdroj: http://nettuts.com/articles/web-roundups/are-you-making-these-10-css-mistakes/

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Michal KobelkaAutor se zajímá o webdesign, grafiku, rád kreslí, přečte si dobrou knihu nebo zajde do kina na dobrý film.
Web     Twitter    

Nové články

Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Reklama
Reklama
Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

Obrázek ke článku Cloud computing je využíván stále intenzivněji

Cloud computing je využíván stále intenzivněji

Využívání cloud computingu nabývá na intenzitě. Jen v letošním roce vzroste podle analytiků trh se službami veřejného cloudu o 18 %, přičemž o téměř 37 % vzrostou služby typu IaaS. Růst o více než pětinu pak čeká služby poskytování softwaru formou služby, tedy SaaS. Aktuálním trendům v oblasti využívání cloudu se bude věnovat konference Cloud computing v praxi, která se koná 23. března. 2017 v pražském Kongresovém centru Vavruška na Karlově náměstí 5.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý