Nedávno sme si ukázali esenciálne css tipy a triky, teda veci, ktoré potrebujete vedieť. Dnes si ukážeme užitočné css tipy a triky, teda veci, ktoré je fajn vedieť.

CSS reset

Čo: CSS reset je CSSko obsahujúce nastavenia, ktoré pomáhajú zabezpečiť kompatibilitu prehliadačov.

Prečo: veci, ktorým presne neurčíte ako majú vyzerať, prehliadač vykreslí podľa vlastného uváženia. A každý z nich môže uvažovať inak. Medzery medzi <p> môžu byť rôzne, veľkosti písma v <h1>...<h6> môžu byť rôzne, niektoré prehliadače môžu okolo obrázkov zobrazovať border atď. Použitím CSS resetu vytvoríte pre všetky prehliadače rovnakú štartovaciu pozíciu.

<p> v <div>, firefox má odsadenie, IE nie... zdroj obrázku

Ako: toto Eric Meyer's Reset (prípadne upravenú verziu) hodíte do svojho HTML pred ostatné CSSká, prípadne stačí skopírovať kód na začiatok svojho CSS súboru.

Čo dodať: Existujú aj resety od iných autorov, tento je však zrejme najpoužívanejší. Je to obyčajné CSS a je teda dobrý nápad si ho upraviť podľa vlastnej potreby. Nie vždy budete používať všetky elementy, ktorých štýly sú "resetované", takže ich môžete kľudne z resetu odstrániť a vo všeobecnosti si to upraviť ako len chcete.

Môžno si práve hovoríte "Toto je všetko pekné a fajn, ale..." a ja to plne chápem. Možno vám vyhovuje spôsob, akým prehliadače vykresľujú veci. Možno vám nevadí, že niektoré veci vyzerajú v IE trochu ináč. Možno máte dojem, že je to plno zbytočného kódu a že ak vám aj niečo bude prekážať, upravíte si to sami. A to je v poriadku. Je však dobré vedieť, že možnosť ako CSS reset existuje.

CSS shorthands / CSS skratky

Čo: skratky v CSS kóde - mnohé z nich používate a ani o tom možno neviete. Mnohé z nich nepoužívate, pretože neviete, že existujú.. napravíme.

Prečo: šetrí to kód, šetrí to čas, šetrí to prsty, ľahšie sa to upravuje a tak vôbec ;)

Ako: veci ako margin: 15px 20px; zrejme poznáte. Pridá to margin: 15px zhora a zdola, 20px zľava a sprava. Samé o sebe je to skratka skratky margin: 15px 20px 15px 20px; čo je skratka pre margin-top/right/bottom/left;

Zrejme tiež používate background: #e3e3e3; alebo background: #fff url('back.png') top left repeat-x; namiesto.. no nechce sa mi to vypisovať, je toho veľa :)

Ale poznáte toto?

1, 2, 3, 4?

Prvý príklad s marginom tam hore používa 2 hodnoty, druhý 4 hodnoty. Dá sa však použiť aj 1 hodnota aj 3 hodnoty. Funguje to asi takto:

jedna: všetky strany majú rovnaký margin
dve: hore dole, vpravo vľavo
tri: hore, vpravo vľavo, dole
štyri: hore, vpravo, dole, vľavo

Toto isté funguje pre padding, border-color a vôbec na veci, ktoré majú 4 strany.

border: [border-width] [border-style] [border-color]

Zápis border: 1px solid #ccc je zrejme tiež súčasťou vášho arzenálu. Neviem ako vy, ale ja ak som nechcel aby všetky hrany mali farbu #ccc, musel som definovať border pre každú stranu zvlášť... kým som sa nenaučil toto:

/* lame - pre každú stranu zvlášť */
div {
  border: 1px solid #ccc;
  border-right: 1px solid #d3d3d3;
  border-left: 1px solid #afafaf;
}

/* less lame - farba pre každú stranu */
div {
  border: 1px solid #ccc;
  border-color: #ccc #d3d3d3 #ccc #afafaf;
}

Border je mimochodom vcelku šikovný, preštudujte si čo všetko zvládne. Napríklad vie border: 1px inset color; ..inset, ako poznáte z photoshopu :)

font: [style] [variant] [weight] [size]/[line-height] [family]

Skratky pre font nie sú moc používané a pritom kum sem:

div {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  line-height: 22px;
}

Toto sa dá napísať takto:

div {
  font: italic bold 16px/22px Verdana, sans-serif;
}

Huh, jeden riadok? Yep, jeden riadok. Samozrejme, rovnako ako pri všetkých týchto skratkách, nemusíte nastavovať vždy všetky hodnoty. Ja som tu napríklad vynechal font-variant, ktorý vie spraviť z textu malé kapitálky, takto font-variant: small-caps.

A keď už sme pri tom, s textom sa dá robiť aj takéto:

div {
  text-transform: lowercase;   /* malé písmo */
  text-transform: uppercase;   /* VEĽKÉ PÍSMO */
  text-transform: capitalize;  /* Prvé Písmená Sú Veľké */
}

color

Pro tip: namiesto color: #FFFFFF zrejme píšete color: #FFF, že? A myslíte si, že sú to prvé 3 znaky z celého zápisu, že? Nuž, v skutočnosti sa jedná o prvý znak z každej dvojice, čiže #990066 sa dá napísať ako #906. True story.

CSS selektory

Čo: #header je selektor, odchytí element s id="header" a dovolí upravovať výzor. Rovnako .post je selektor pre class="post". Tiež typ elementu ul, a atď... Tieto vyberú všetky elementy príslušného typu. Dá sa však vyberať aj špecifickejšie.

Prečo: pretože nie vždy chceme vyberať a upravovať všetky elementy, niekedy chceme len isté podmnožiny.

Ako: selektorov je kopa, v moderných prehliadačoch dve kopy a ak vás to zaujíma, net.tutsplus ich tu má 30. My si ukážeme tie užitočnejšie / používanejšie z nich.

header li a { /* header je html5 element, mimochodom */
  color: #fff;
}

Vyberie všetky <a>, ktoré spadajú pod <li> v <header>. Pozor však na to, či skutočne potrebujete pristupovať takto presne. Dosť možno by stačilo header a.

Pozor: nasledovné selektory nefungujú v IE6.

.post > p {
  color: red;
}

Vyberie len tie <p>, ktoré sú priamym potomkom elementu s class="post". Čiže ak by sme mali v class="post" <li> a v ňom <p>, na tie by to už neplatilo, pretože tieto nie sú priamy potomok.

.post + p {
  font-style: italic;
}

Vyberie len tie <p>, ktoré nasledujú priamo po class="post".

.post ~ p {
  font-weight: bold;
}

Vyberie všetky <p>, ktoré nasledujú po class="post", čize nie iba prvý, ako v predošlom príklade.

Pri linkoch sa dá používať takéto:

a:hover { color: white; } /* keď som myšou nad linkom */
a:link { color: purple; } /* ešte nenavštívené linky */
a:visted { color: pink; } /* navštívené linky */

:hover funguje aj v IE6, ale iba na <a>, ostatné prehliadače to zvládnu bárskde.

A aj takéto srandy existujú:

input[type=text] { background: #f3f3f3; } /* pre type="text" */
input[type=submit] { font-weight: bold; } /* pre type="submit" */

Funguje to aj pre iné atribúty, ale type je najpoužívanejší.

Váha CSS selektorov a !important

Čo: máte v CSS niečo takéto...

#header #logo { 
  color: blue; 
}
#logo { 
  color: red; 
}

...a čudujete sa: "Prečo je to modré, veď som mu jasne povedal, že #logo má byť červené!"

Prečo: pretože štýly sa neaplikujú podľa toho, ktorý prišiel posledný, ale podľa váhy. A selektor zaváži ;)

Ako: ok, najprv si ich obodujme podľa váhy.

Váha selektorov

element: 1 bod
pseudo-element (:before, :after): 1 bod
class: 10 bodov
pseudo-class (:hover,...): 10 bodov
attribute ([type=text]): 10 bodov
id: 100 bodov
inline style (style="color: red;"): 1000 bodov

Taký #formular .button input[type=submit] by mal 100 + 10 + 1 + 10 = 121 bodov. V prvom príklade #logo má 100, #header #logo má 200. Na poradie v kóde by sa prihliadalo, ak by mali rovnakú váhu.

!important

#header #logo { 
  color: blue; 
}
#logo { 
  color: red !important; 
}

V tomto prípade bude text červený, pretože !important prebije ostatné deklarácie. Dalo by sa to považovať za hack, aj keď oficiálne to hack nie je... každopádne, keď poznáte koncept váhy selektorov, mali by dokázať fungovať aj bez !important.

Firebug je aj tu dobrá pomôcka, pekne ukazuje, ktoré štýly boli prepísané inými, s vyššou váhou. Niečo podobné zvládnu aj developer tools dodávané k ostatným prehliadačom.

IE7.js

Čo: mega-turbo pomôcka, ktorá nám skrz JavaScript pomáha zbaviť sa IE špecifických odžubov. A tie selektory čo som spomínal, že nejdú v IE6? Heh.. heh he... ehm no, vďaka tomuto fungovať budú ;)

Prečo: lebo Internet Explorer.

Ako:

<!--[if lt IE 9]>
  <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Ľuďom s IE staršími ako 9 sa pridá do dokumentu skript, ktorý opraví čo sa dá. Všetky IE staršie ako 9 získajú schopnosti 9ny - čo sa CSS týka. Nefixne to však vždy všetko a ľuďom s IE sa stránka bude načítavať o kúsok dlhšie, ale určite lepšie ako nič.

Existujú aj iné verzie skriptu (s IE7 a IE8 funkcionalitou) a je ním dokonca možné opraviť problém s transparentnými pngčkami v IE6 (yep, IE6 nevie transparentné png). Takže kuk sem http://code.google.com/p/ie7-js/.

::selection

Na záver taká oddychovka. Skúste označiť tento text:

označ ma označ ma označ ma označ ma označ ma označ ma

::selection { background: #906; color: #fff; }

Neat, right? Farba pozadia označeného textu za normálnych okolností závisí od nastavenia operačného systému. Vďaka ::selection je text (nielen jeho pozadie) pod vašou kontrolou. Funguje v moderných prehliadačoch.

Pozor: Firefox vyžaduje svoju -moz- predponu a podporuje to od verzie 3.6, takže:

::selection {
  background: #906; 
  color: #fff;
}
::-moz-selection {
  background: #906; 
  color: #fff;
}

Maličkosť, ktorá poteší :) ::selection je prvá ochutnávka CSS3 awesomeness, ktorému sa budeme bližšie venovať nabudúce.

---

Check out ostatné články z našej CSS turbo-série:

• Esenciálne CSS tipy a triky
• Praktické CSS3 praktiky