Reset CSS
In articolul anterior va aratam cum poate fi “hack-uit” css-ul pentru Internet Explorer (6 si 7); astazi va voi arata cam ce trebuie facut pentru a nu ajunge in situatia de a folosi astfel de artificii tehnice.
Diversele browsere folosite azi de navigatori pe internet (Mozilla, IE, Chrome, Safari, etc.) interpreteaza si afiseaza unele proprietati html sau css in mod diferit. Pentru a le aduce la un numitor comun avem nevoie de o bucata de cod css numita reset css.
Acest reset css se va insera in fisierul .css pe care il folositi pentru siteurile voastre, de preferat chiar la inceputul lui, si va fi ceva de forma:
/* reset CSS */
*{margin:0; padding:0; font-family: Tahoma, Arial, Verdana, sans-serif; font-style:normal !important;}
body{line-height: 1; background: url(../images/home/background.jpg) repeat;}
img{border:0 !important;}
a {text-decoration:none; color:#000000;}
:focus {outline:none;}
textarea {overflow:auto}
ol,ul {list-style:none;}
input{margin:0;}
Acum sa va explic cam ce face codul de mai sus:
- prima linie incepe cu semnul *, ceea ce in css inseamna ca se adreseaza tuturor tagurilor html din script; aceasta linie reseteaza la zero propietati ca margin si padding, propietati ce sunt puse automat in unele browsere. De asemenea, aici se specifica si familia de fonturi ce va fi folosita in site, si stilul acestuia.
- a doua linie face referire la tagul ‘body’ , caruia i se da proprietatea line-height: 1; aceasta proprietate este foarte utila in cazul divurilor goale, care in IE (6) iau default line-height: 10px;
- a treia linie de cod se refera strict la cazul in care avem link pe o poza si browserul ne pune un border albastru de jur imprejurul acesteia.
- a patra linie formateaza toate linkurile din site;
- a cincea linie elimina acel border punctat ce apare (mai ales in Mozilla) cand apasam un buton/link;
- a sasea linie reseteaza campurile ‘textarea’, dandu-le posibilitatea de a pune scroll atunci can continutul “da pe-afara”;
- a saptea linie reseteaza listele, scotand acele bullet-uri default care de cele mai multe ori ne incurca la design;
- a opta linie se refera la toate formele de inputuri, carora le reseteaza margin-ul la zero. Puteti completa aceasta linie si cu un reset de padding (chiar daca a mai fost resetat mai sus). Cele mai dificil de formatat inputuri sunt cele de tip ‘checkbox’ si ‘radio’, pe care le putem pacali declarandu-le un width si un height (de obicei de 12px amandoua);
Odata resetul inserat in fisierul css, va trebui sa tinem cont de el, in sensul ca, de exemplu, pentru IE (6 si 7) va trebui sa declaram “line-height” de fiecare data cand avem de a face cu texte.
Acest reset il puteti modifica si adapta stilului vostru de lucru (va puteti crea mai multe variante), in functie de ceea ce doriti sa faceti intr-un site.
Spor la treaba si la web design!