×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Technologický web Mateja Lednára
Spoznávajte svet technológií

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%;
}
Príklad: Zápis do elementu <body>.
1
2
<input value="" placeholder="Insert text">
<input class="full-width" value="" placeholder="Insert text">
Obrázok: Zobrazenie v jadre WebKit (Chrome, Opera, Safari).
Zobrazenie v jadre WebKit (Chrome, Opera, Safari).
Obrázok: Box model v Google Chrome.
Box model v Google Chrome.
Obrázok: Zobrazenie v Internet Exploreri a vo Firefoxe.
Zobrazenie v Internet Exploreri a vo Firefoxe.
Obrázok: Box model vo Firefixe.
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í.
CSS,HTML5,HTML,input
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších