Aloita sivujesi tyylittely CSS-resetillä
Lisätty:
Monesti sivun tarkimpia yksityiskohtia vääntäessä tulee törmättyä siihen, että kaikki selaimet eivät näytä yksityiskohtia aivan samalla tavalla. Tämä voi aiheuttaa hämmennystä ja venyttää tyylitiedostoasi turhaan päälekkäisillä muotoiluilla.
Kun lähdet rakentamaan sivujasi ja ennen kuin olet kirjoittanut riviäkään CSS:ää selaimet lisäävät sivuillesi omat oletustyylinsä. Esimerkiksi body-tagilla on jo heti valmiina hieman sisennystä ja eri tason otsikot ovat eri kokoisia. Yleensä oletustyylien erot eivät ole kovinkaan suuria eri selaimien välillä, mutta varsinkin pikselin tarkkoja yksityiskohtia vääntäessä ongelmia voi alkaa syntymään.
Erittäin suosittu tapa harmonisoida selainten perustyylit on käyttää CSS-resettiä. Resetti on aivan normaalia CSS:ää, joka ladataan ennen sivun varsinaisia tyylejä joko omasta tiedostostaan tai sitten se on lisätty varsinaisen tyylitiedoston alkuun.
CSS-resettejä on lukuisia erilaisia ja ylivoimasesti yksinkertaisin kuuluu seuraavasti:
* {
padding: 0;
margin: 0;
}
Tässä jokaiselta mahdolliselta HTML-elementiltä oteaan pois kaikki sisennykset ja marginaalit. Edellistä esimerkkiä näkee monesti käytettävän, mutta valitettavasti tämä ratkaisu ei ole täysin ongelmaton. Esimerkiksi jos sivulla käytetään kaavake elementtejä, voivat näiden muotoilut hajota pahemman kerran.
Itse käytän sivuja tehdessäni hieman muokattua versiota Eric Meyerin CSS-resetistä:
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strike, strong, sub, sup, tt, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure,
footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
article, aside, dialog, figure, footer, header, hgroup, menu,
nav, section, time, mark, audio, video {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
cite {font-style: normal;}
a:active {outline:none;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need cellspacing="0" in the markup
table {
border-collapse: collapse;
border-spacing: 0;
}*/
Tämä resetti nollaa kaikki oletusasetukset turvallisesti hajottamatta kaavakkeita ja luo hyvän pohjan varsinaisten ulkoasun rakentamiselle.
Muutama sana muutoksista
Pääkohdin tämä itse käyttämäni resetti seurailee Hra. Meyerin alkuperäisiä määrittelyjä, mutta muutamia muutoksia on tullut tehtyä:
article, aside, dialog, figure, footer, header, hgroup, menu,
nav, section, time, mark, audio, video {display: block;}
Meyerin resetti on tammikuulta 2008, jolloin ei vielä kauheasti kohkattu HTML5:sta. Näin ollen se ei siten sisällä vitosen mukana tulleita uusia HTML-elementtejä. Ainutkaan selain ei taida vielä osata näyttää näitä uusia elementtejä block-tason elementteinä, kuten suosituksen mukaan kuuluisi, joten tässä selaimet käsketään näyttämään ne niin. Uudet elementit on lisätty myös alun määrittelyiden joukkoon, perinteisten HTML-elementtien perään.
a:active {outline:none;}
Firefox näyttää klikatun linkin ympärillä normaalisti harmaan pisteviivoituksen. Meyerin :focus {outline: 0;} poistaa tämän harmaan raamin, jolloin tabulaattorilla linkkejä selatessa käyttäjä ei saa minkäänlaista visuaalista vihjettä siittä, minkä linkin kohdalla hän sivuilla on. a:active {outline:none;} korjaa tämän ongelman.
Tietenkin jos vain muistat määritellä oman :focus-tyylin, mitään ongelmia ei tule, mutta ainakin itse tämä tuli unohdettua lähes joka kerta.
Toivottavasti tästä vinkistä oli apua sinulle. Jos CSS-resetit ovat sinulle jo ennestään tuttuja, kuulisin mieluusti minkälaista ratkaisua sinä käytät.