Esenciálne CSS tipy a triky

napísal , 8 Nov 2010

CSS je slušný bordel. Nie že by sa s ním nedalo pracovať, avšak aby ho dizajnér donútil vypľuť zo seba ako-tak-modernú stránku, potrebuje poznať riadnu dávku trikov, odžubov a čiernej mágie.

V tomto článku predstavíme problémy, s ktorými sa web-človek bežne stretáva, ukážeme si riešenia a nakoniec možno prihodíme pár užitočných tipov a možno aj trikov. Ak budete poslúchať. ;)

Predtým ale odporúčam mrknúť na HTML inline a block elementy. Článok tiež predpokladá aspoň základnú znalosť CSS. Ak také nemáte, nevadí, zastavíte sa neskôr :) Ok? Let's go.

Horizontálne centrovanie

Na zarovnanie textu na stred máme text-align: center; ale pre block elementy (ako <div>) nič podobné neexistuje. Čo je problém v dobe, kedy je väčšina stránok na stred obrazovky.

Riešenie: nastaviť centrovanému elementu pevnú šírku a margin: 0px auto;

centrovanie cez margin

V tomto prípade bude #box2 zhora a zdola odsadený o 15px a zo strán o "auto", čo prehliadač chápe tak, že ho má hodiť na stred rodiča - čiže do stredu divu #container.

Ako vypnúť rozťahovanie obrazu na ATI a Win7

napísal , 4 Nov 2010

Ak máte grafickú kartu od ATI/AMD a skúšali ste na nej niekedy použiť iné ako natívne rozlíšenie displaya, či už pri hrách alebo pri pripájaní na HDTV, určite ste mali tú česť zistiť, že miera idiocie ovládačov týchto kariet je vskutku kolosálna. Problém je dokonca už len nainštalovať najnovšiu verziu Catalystov na notebook a za "dobre odvedenú" prácu musím ATI uznať, že boli odjakživa špecialisti na hádzanie klackov pod nohy.

Dúfajúc, že ušetrím pár ľudí od hodín strávených hľadaním ako ojekabátiť zákerné ovládače, píšem tento post, kde sa dozviete ako prinútiť kartu, aby obraz vždy zostal v pomere strán, aby na HDTV nebol zmenšený a aby ste ich vôbec nainštalovali. :)

Rozťahovanie obrazu a overscan s ATI ovládačmi

All fixed!

Upload progressbar s PHP a jQuery

napísal , 1 Nov 2010

upload progressbar

Pri uploadovaní cez HTML formulár, hlavne ak sa jedná o veľké súbory, môže byť problém, že používateľ nevie aká časť zo súboru sa uploadla, či sa súbor vôbec uploaduje a prinajhoršom si myslí, že sa vôbec nič nedeje a nervózne kliká na submit. Ešte horšie ako zvýšená záťaž na server, ktorú generuje, je riziko, že sa na celú stránku vyserie, lebo si myslí, že nefunguje. :)

V tomto tutoriale si povieme ako za pomoci PHPčka a jQuery jednoducho vytvoriť progress bar, ktorý sa priebežne obnovuje podľa množstva prenesených dát z uploadovaných súborov a snáď pomôže predísť úniku netrpezlivých používateľov zo stránky.

Aby ste vedeli o čom je reč, tu si môžete pozrieť demo.

HTML inline a block elementy

napísal , 31 Oct 2010

Rozdiel medzi inline a block elementami patrí medzi základné koncepty, ktoré treba pri web-stránkach pochopiť. Hlavne keď neskôr príde na CSS. Nebojte, skúsim sa vyhnúť zbytočným poučkám a prebehnem to najdôležitejšie.

Block HTML elementy

  • napr.: <div> <p> <h1>...<h6> <table> <form> <ul> <li> <pre> <blockquote>...
  • zaberajú plnú šírku svojho rodiča ak mám <div id="rodic"> široký 300px a v ňom <p id="decko">, tak #decko sa automaticky natiahne na 300px bez ohľadu na to, koľko textu a inej hávede v sebe má
  • okupujú samostatný riadok zjednodušene to funguje ako keby ste pred a za element dali <br>
  • môžu obsahovať iné inline/block elementy používajú sa ako také "obaľovače" pre ostatné elementy

Inline HTML elementy

  • napr.: <span> <a> <img> <strong> <em> <br> <input>...
  • zaberajú len koľko potrebujú
  • zobrazia sa v tom istom riadku, zarovno s textom
  • môžu obsahovať len inline elementy: ako <img> v <a> často sa jedná o elementy s "dekoračnými" účelmi, ktoré zmenia text na tučný, zalomia riadok alebo vytvoria link

Čítajte ďalej a odhaľte silu CSS a display: inline-block;...

Validácia HTML kódu je tu pre dobrý pocit

napísal , 29 Oct 2010

Sú ľudia, ktorí považujú w3c štandardy za slovo božie a stránky, ktoré neprejdú validáciou za menejcenné. Sú ľudia ako Douglass Crockford, ktorí tvrdia, že w3c konzorcium nevie, ako Internet funguje.

Osobne validáciou považujem za ekvivalent achievementov vo videohrách. Som rád, keď vidím krásne zelenú hlášku "This document was successfully checked.." a niekedy sa o to aktívne snažím. Pre dobrý pocit.

Avšak rovnako ako pre dokončenie hry nepotrebujete pozbierať všetky achievementy, pre dokončenie stránky rozhodne nepotrebujete spĺňať všetky podmienky validácie. Mnohé sú užitočné (validátor je taktiež dobrá pomôcka pri odhaľovaní preklepov či zle uzatvorených tagov), ale priznajme si, kopa z nich je ridikulózna.

Ak musím niečo obaľovať do nadbytočných elementov, kašlem na to. <tfoot> v tabuľke nedám pod <thead>, ale pekne dole pod <tbody>. Lebo postupnosť hlava-telo-päta je logická, ostatné sú nezmysel. Viem, má to praktický význam, ale možno tak pri tabuľkách s miliónmi údajov.

A prehľadný kód > validný kód.

Štandardy sa snažím dodržovať, pokiaľ to nie je súboj ústiaci vo frustráciu.

Som však za to, aby sa tagy používali na to, na čo sú určené. Nechcem sa veľmi oháňať frázami ako "sémantický web", skôr mi ide o to, že na pekne štruktúrovaný a bohatý html sa dobre pozerá, je prehľadný a jednotlivé elementy sa dajú jednoducho cieliť v CSS-kách a JavaScriptoch. Kolujú dokonca chýry, že na pekne štruktúrovaný kód sa dobre pozerá aj Googlu, ktorý ho za to patrične odmení ;)

Keď už sme pri tom... čo sa týka CSS validácie - ignorujte ju a ignorujte každého, kto tvrdí, že na nej záleží. Nezáleží. CSS je rozbitý štandard, každý browser implementuje inú podmnožinu iným spôsobom a človek aj bez toho potrebuje často stvárať absurdné ninja kúsky k tomu, aby dosiahol čo potrebuje. A to aj keď neberieme v úvahu staré IEčka. CSS hacky, prefixy, čokoľvek potrebujete - všetko s absolútnym kľudom používajte.

Nechcem byť advokátom zlého kódu. Ľudia by nemali písať stránky "ako sa podarí" a nechať na browser, nech si s tým poradí. Nemali by to ale ani zbytočne preháňať s validáciou. Všetko pekne v rámci oného :)

Preload obrázkov v JavaScripte

napísal , 23 Oct 2010
<script>
  new Image().src = '/images/masivne_gule.png';
</script>

je všetko, čo treba k tomu, aby ste načítali obrázok ešte predtým ako sa zobrazí.

Pri rýchlostiach dnešných pripojení to možno nemá až take opodstatnenie, ale existujú prípady, kedy vás to vytrhne z biedy - ak robíte nejakú prudko kickass galériu obrázkov alebo pokiaľ by ste vo Firefoxe chceli zobraziť niektoré obrázky až PO submitnutí multipart formulára (napríklad progress bar uploadu). Tiež nezaškodí už dopredu načítať ajax-loading-obrázky.

Generovanie pekných URL

napísal , 20 Oct 2010

Pre SEO sú veľmi dôležité vhodne formátované URL adresy. Taká dobrá URL by mala obsahovať viac menej len text úzko súvisiaci s obsahom, avšak bez diakritiky a podobnej chamrade, aby nevznikali problémy pri kopírovaní linkov a parsovaní adries vyhľadávačmi.

Chamraď sa dá buď nahradiť URL entitami (%20 je napríklad medzera), čo môže byť pri niektorých znakoch stále nespoľahlivé alebo sa z nej dá odstrániť diakritika a zvyšok nahradiť pomlčkami.

Druhý spôsob sa nám najviac osvedčil a používame naň túto funkciu:

function seo_url($str)
{
  $str = remove_accents($str);
  $str = preg_replace('/[^a-zA-Z0-9-]/', '-', $str);	
  return strtolower(trim(preg_replace('/-+/', '-', $str), "-"));
}

V prvom riadku sa odstáni z písmen diakritika:
Bŕm™ džžž DrÍST ブレイド!   ->   Brm™ dzzz DrIST ブレイド!

v druhom riadku sa nahradia všetky znaky okrem písmen a číslic pomlčkami:
Brm--dzzz-DrIST------

a v treťom sa všetky susediace pomlčky spakujú do jednej, odstránia sa pomlčky z krajov a všetky písmená sa premenia na malé:
Brm-dzzz-DrIST-   ->   Brm-dzzz-DrIST   ->   brm-dzzz-drist

Funkcia remove_accents() potom vyzerá nasledovne:

function remove_accents($str)
{
  return str_replace (
  array(
    'à','á','â','ã','ä','å','æ','ç','ć','č','ď','đ','ð','è','é','ê','ë','ę','ě','ì','í','î','ï','ĺ','ľ','ł','ň','ñ','ò','ó','ô','õ','ö','ő','ø','ŕ','ř','ś','š','ß','ť','þ','ù','ú','û','ü','ű','ů','ý','ÿ','ž',
    'À','Á','Â','Ã','Ä','Å','Æ','Ç','Ć','Č','Ď','Ð','È','É','Ê','Ë','Ę','Ě','Ì','Í','Î','Ï','Ĺ','Ľ','Ł','Ň','Ñ','Ò','Ó','Ô','Õ','Ö','Ő','Ø','Ŕ','Ř','Ś','Š','Ť','Þ','Ù','Ú','Û','Ü','Ű','Ů','Ý','Ÿ','Ž'
  ),
  array(
    'a','a','a','a','a','a','ae','c','c','c','d','d','d','e','e','e','e','e','e','i','i','i','i','l','l','l','n','n','o','o','o','o','o','o','o','r','r','s','s','ss','t','th','u','u','u','u','u','u','y','y','z',
    'A','A','A','A','A','A','AE','C','C','C','D','D','E','E','E','E','E','E','I','I','I','I','L','L','L','N','N','O','O','O','O','O','O','O','R','R','S','S','T','TH','U','U','U','U','U','U','Y','Y','Z'
  ), $str );
}

Takýto "brute force" spôsob je momentálne jediný spoľahlivý a obdobná funkcia by oficiálne mala byť až v PHP 6. Konkrétne táto funkcia je využiteľná viac menej vo všetkých krajinách používajúcich latinku okrem Vietnamu a možno pár inch krajín, ktoré majú fakt divoké znaky a nechcelo sa mi nimi zapodievať ^^. Ak by aj náhodou neodstránila diakritiku, jediné čo sa stane je, že z URL vypadne daný znak.

ǚ
evil u is evil