CSS Reset

Možda bi ovaj post trebao biti prvi među prvima, jer govori o tome kako pokrenuti CSS. Pa opet, trebali biste biti u stanju da shvatite šta tačno radite, tako da sa ovim ne kasnim previše.

**Resetovanje u kodu predstavlja kratki skup pravila koji resetuje stil svih elemenata na doslednu osnovnu liniju. Potrebno je jer stil nije konzistentan u svim pregledačima. Ne želite nešto poput predstilinga ili npr. element tabele, da se zeza sa vama.
**

Vežba

Kada sam počinjao sa CSS-om, rečeno mi je da na početku uvek treba da napišete:

 *{
    margin:0;
    padding:0;
 }

Ovo je bilo osnovno CSS Resetovanje.

Neki od najčešćih elemenata koji su različito stilizovani među različitim pregledačima su hiperveze (<a>), slike (<img>), headings (<h1> do <h6>) i margine date različitim elementima. Dobro je poznata činjenica da pregledači gotovo svakom dodaju određenu količinu dodataka.

Primer različitog stila checkout dugmeta između pregledača:

Primer različitog stilizovanja različitih elemenata (naslov, veza, raspon, kod, blok citat):

Svaki pregledač ima podrazumevano HTML formatiranje i možete ga videti pod „user agent stylesheet“ u režimu provere. Ako se za određeni element doda stil, prepisuje se njegovo podrazumevano formatiranje pregledača.

Reset skripte

Moja omiljena CSS reste skripta je sa http://html5doctor.com:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,  pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
     margin:0;
     padding:0;
     border:0;
     outline:0;
     font-size:100%;
     vertical-align:baseline;
     background:transparent;
 }
 
 body {
     line-height:1;
 }
 
 article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{ 
     display:block;
 }
 
 nav ul {
    list-style:none;
 }
 
 blockquote, q {
    quotes:none;
 }
 
 blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
 }
 
 a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
 }
 
 /* change colors to suit your needs */
 ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
 }
 
 /* change colors to suit your needs */
 mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
 }
 
 del {
    text-decoration: line-through;
 }
 
 abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
 }
 
 table {
    border-collapse:collapse;
    border-spacing:0;
 }
 
 /* change border color to suit your needs */
 hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
 }
 
 input, select {
    vertical-align:middle;
 }

Neki od definisanih stilova su prilično standardni (oni za <a> i za <ul>), neki su dodati da bi se poboljšala dostupnost (oni za <abbr> i <dfn>), a neki su dodati ekstra (<hr>).

Postoji lista dodatnih skripti za resetovanje koje možete koristiti:

meyerweb,
carrer web,
yui library,
Simon Harte HTML5-Reset.

Umesto resetovanja CSS-a, neki programeri koriste normalizaciju CSS-a (a neki ga nazivaju „novim resetovanjem“). Iako se resetovanje koristi za brisanje svega i pravljenje vašeg projekta „tabula rasa“, normalizacija zadržava dobre prakse dok neutrališe nedoslednost stila među pregledačima. Sigurno ću pisati o normalizaciji CSS-a u budućnosti. Do tada proverite ovaj post.

Zaključak

Nije potrebno resetovati CSS, ali treba imati u vidu prethodno oblikovanje pregledača i postojanje resetovanja CSS-a.

Pretplatite se na naš bilten ako se želite kretati nakon toga šta treba učiniti nakon dodavanja Resetovanja u CSS.