CSS Reset – V 1.2
Presupunând că versiunea lui Eric Meyer a fost versiunea 1 iar resetul postat în urmă cu aproape jumătate de an în urmă a fost versiunea 1.1, îți prezit acum versiunea 1.2, cu mici adăugiri:
<br />
/* @group ntz css reset */</p>
<p>html, body, div, span, object, iframe,<br />
h1, h2, h3, h4, h5, h6, p, blockquote, pre,<br />
a, abbr, acronym, address, big, cite, code,<br />
del, dfn, em, img, ins, kbd, q, samp,<br />
small, strike, strong, sub, sup, tt, var,<br />
b, u, i, dl, dt, dd, ol, ul, li,<br />
fieldset, form, label, legend,<br />
table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}<br />
body {line-height: 1}<br />
ol, ul {list-style:none}<br />
blockquote, q {quotes:none}<br />
blockquote:before, blockquote:after,<br />
q:before, q:after {content:'';content:none}</p>
<p>strong, b {font-weight:700}<br />
em, i {font-style:italic}</p>
<p>ins {text-decoration:none}<br />
del {text-decoration:line-through}<br />
table {border-collapse:collapse;border-spacing:0}<br />
caption, th, td {text-align:left;font-weight:100}</p>
<p>textarea {overflow:auto}<br />
button {cursor:pointer;padding:0}<br />
*:first-child+html button {width:1;overflow:visible}<br />
* html button {width:1;overflow:visible}<br />
button::-moz-focus-inner { border: 0; }</p>
<p>input[type="checkbox"], input[type="radio"], input.radio, input.checkbox {vertical-align:text-top;width:13px;height:13px;padding:0;margin:0;position:relative;overflow:hidden;top:2px}</p>
<p>a {text-decoration:none; color:#4f81bd}<br />
a:hover {text-decoration:underline}</p>
<p>:focus {outline:0}<br />
a:focus {outline:1px dotted #999}</p>
<p>/* -----------------------------------<br />
smart and dirty<br />
--------------------------------------*/</p>
<p>.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}<br />
.clearfix {display:inline-block}<br />
/* Hide from IE Mac \*/<br />
.clearfix {display:block}<br />
/* End hide from IE Mac */<br />
* html .clearfix {height:1px}</p>
<p>/* @end */<br />
Ce s-a schimbat?
- Am reformatat un pic codul și am eliminat chestii inutile (tag-uri obsolete, spații aiurea, punct și virgulă la utlimele definiții etc);
- Pentru
strongnu exista definitfont-weightși aparent firefox îl afișa boldat, IE nu (ca să vezi…); - Am adăugat
font-weight:700șifont-style:italicpentrubrespectivi(pentru situațiile în care ai și utilizatori de modă veche
- Am definit o culoare default pentru link-uri. Cum albastrul din IE8 mi se părea mult mai ok decât #00f, l-am folosit cu încredere (
#4f81bd) - IE<8 și tag-ul
buttonnu se împacă bine by default. Am introdus un mic hack:width:1;overflow:visible. Evident, doar pentru IE; - Pentru utilizatorii E-texteditor/Textmate/Coda am adăugat @group pentru a reduce scroll-ul inutil.
Editare târzie
Unii sunt destul de porniți împotriva CSS resetului.
- Posted in:
- CSS,
- Tips & Tricks
Eu am inceput sa-l folosesc pe cel de la yahoo, embeded, insa cu siguranta am sa renunt la el. Aici ai mai putea sa adaugi si formatarea pentru .clear, ca tot ai dirty things prin el
PS: Congrats
O da arata mult mai clean decat v1.1, o sa-l folosesc si pe asta. Good job!
Explică te rog, că n-am înțeles
Ptfff, n-am vazut ca e deja. Scuze, oboseala
de ce ai folosit font-weight:700 in loc de font-weight:bold ?!
1byte mai puțin.
Iar în loc de font-weight:normal folosesc font-weight:100. 3bytes mai puțin
daca se rezuma pana la bytes iti recomand sa scapi de unele spatii inutile
Păi trebuie să păstrăm și o oarecare „citibilitate” (readability), nu?
Oricum, așa m-am obișnuit. Probabil este și un pic mai… criptic pentru noobi :twisted:
ol, ul {list-style: none}
blockquote, q {quotes: none}
ce-i cu spatile alea inainte de “none”?! capisci ce vreau sa zic?
Oups, alea mi-au scăpat. My bad
Css reset-ul propriu este aproximativ la fel, doar ca link-urile mi le-am colorat #CC3300. De asemenea mai folosesc input::-moz-focus-inner { border:0; padding:0} (metoda luata de pe stackoverflow … god i love that site) cu ajutorul caruia pot repara inaltimea textului din interiorul input type=”submit” la firefox, care stii ca se duce in jos daca stilizezi cumva butonul, asta fiindca firefox are un bug care aliniaza text-ul din elemente de formular in bottom prin metode obscure (sau ceva de genu, nu m-am interesat de bug foarte mult).
Eventual daca lumea o sa foloseasca css reset-ul tau pune si input::-moz-focus-inner { border:0; padding:0} in el, si sai dai CREDIT! (ca tu asa zici) … ceva gen: imi dai credit mie ca l-am gasit pe stackoverflow unde era scris de un tip ca solutie la problema dar gasit in alta parte etc.
(kidding around)
Folosesc <button type=”submit”>text</button>
în loc de <input type=”submit” value=”text” /> din două motive:
1) este mai aproape de adevăr (semantic vorbind)
2) permite mai multe artificii de customizare
Într-adevăr, și ăsta are buba cu padding-ul aiurea. Eu obișnuiam să rezolv printr-un padding-bottom:3px
10x pentru tip. Probabil va fi în CSS Reset 1.3 sau 1.2.1
Da, dpdv semantic e mai ok, si poti sa il selectezi fara un artificiu in css, dar eu m-am obisnuit cu input type=”submit”.
N-ai pentru ce :D.
Dar un CSS Reset pentru Smart Phones unde pot gasi?
@Pilat Horia-Stefan Pentru inceput: http://perishablepress.com/press/2009/08/02/the-5-minute-css-mobile-makeover/
uite reset pentru toate
* {
margin: 0;
outline: 0 none;
padding: 0; }
La punctul 1 (“eliminat … punct și virgulă la utlimele definiții etc); ” )
Exista vreun avantaj daca faci chestia asta?
@Luke: salvezi câțiva bytes. Și dacă faci asta la tot fișierul CSS, poți avea un fișier chiar și cu un kb mai mic.
Da, știu, nu e foarte mult, dar când ești pus în situația să optimizezi tot… Contează chiar și asta