Prečo resetovať nastavenia CSS

Pri práci na projektoch, kde sa vyžaduje jednotné zobrazovanie, je vhodné aplikovať resetovaciu šablónu. Veľkou výhodou takejto šablóny je eliminácia stavov, kedy layout v prehliadači pre vývoj je odlišný od layoutu v ostatných podporovaných prehliadačoch. Formátovanie dokumentu sa totiž začína od "nuly", takže nútené formátovanie bude rovnako aplikované aj na ostatné internetové prehliadače. V opačnom prípade sú použité východiskové hodnoty prehliadačov, ktoré sa môžu líšiť a výsledkom sú reklamácie zákazníka na tieto odlišnosti.

Nejednotné zobrazovanie elementov v dokumente je možné demonštrovať na nasledujúcom jednoduchom príklade s elementom <input>.

Príklad: Zápis do elementu <style>.

1
2
3
.full-width {
  width : 100%;
  }
.full-width {
  width : 100%;
  }

Príklad: Zápis do elementu <body>.

1
2
<input value="" placeholder="Insert text">
<input class="full-width" value="" placeholder="Insert text">        
<input value="" placeholder="Insert text">
<input class="full-width" value="" placeholder="Insert text">        
 

Obrázok: Zobrazenie v jadre WebKit (Chrome, Opera, Safari).

Obrázok: Box model v Google Chrome.

Obrázok: Zobrazenie v Internet Exploreri a vo Firefoxe.

Obrázok: Box model vo Firefixe.

Na príklade vidieť, že okrem rôzneho odsadenia elementov je rozdielny aj výsledný rozmer elementu. V Chrome je to rozmer 153 x 22 pixlov a vo Firefoxe 142 x 22 pixlov. Zaujímavosťou v jadre WebKit je odsadenie elementu <input> zľava, ktoré je pri aplikovaní width : 100%; odstránené. To spôsobuje nútené zarovnávanie elementov <input> ak je použitá kombinácia štandardnej šírky a šírky s width : 100%;.

Záver

Vďaka resetovaniu vlastností jazyka CSS je možné zamedziť neustálej kontrole nových prvkov v dokumente prostredníctvom internetových prehliadačov. Postupné formátovanie prvkov je jednotné pre všetky prehliadače a až na niektoré výnimky to zároveň urýchľuje vývoj webových aplikácií.

Prečo resetovať nastavenia CSS

Záver

Komentáre

Pridať komentár