De multe ori am fost întrebat care e cea mai bună metodă de a reseta toate elementele CSS. Dacă în urmă cu doi-trei ani foloseam *{ margin:0; padding:0;}, de la o vreme am început să folosesc CSS Reset-ul lui Eric Meyer. Apoi am început să mai adaug câteva chestiuțe:
- Clearfix
- Resetarea font-size-ului la 10px. Astfel, 1em = 10px, ceea ce face totul mult mai ușor de calculat (mai ales dacă faci layout-uri flexibile)
- Centrarea verticală a input-urilor radio și checkbox. Pe browserele adevărate va merge fără nimic altceva. Pe IE6 va trebui să adaugi
class="radio"fiecărui element
Folosesc acest reset de ceva timp și n-am avut nicio problemă, prin urmare… recomand
/* resetting some default styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
:focus {outline: 0;}
a:focus {outline:1px dotted #999;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
html { font-size:100.01%; }
body { font-size:0.625em; }
textarea {overflow:auto}
button {cursor:pointer}
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;
}
a {text-decoration:none}
a:hover {text-decoration:underline}
/* -----------------------------------
a better and smarter way to clear floats
--------------------------------------*/
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}
- Posted in:
- CSS

Nu suport clearfix-urile, prefer left floating atit pentru parent cit si pentru blocul curent.
da, dar la un moment dat trebuie să te oprești cu float-urile
Și decât să am zeci de nested floats care se pot strica relativ ușor, prefer un extra class complet non semantic
Ceva de genu folosesc si eu.
Dar … Resetarea font-size-ului la 10px. Astfel, 1em = 1px … esti sigur?
Typo
1em=10px
Asa ! :*
Nicolae Vartolomei: ai multe situatii in care ai nevoie de claerfix – altfel probabil n-ar fi fost inventat
Nice CSS reset ! congrats. Ba ! clearfix-ul e sfant ok ?!
AMIN!
Faza cu resetarea la 10px a fontului este foarte foarte buna, astfel se pot calcula f usor em-urile (punctu meu de vedere)
Clearfix-ul iara, nu stiu altii, dar eu cel putin am ajuns la faze in care nu prea am avut alta varianta.
Faza insa cu alinierea radio-urilor, sincer, nu am stiut-o, desi as fi dorit sa o stiu
P.S. Fain blog dom’le, demult cautam un blog de developer mai calumea, ma bucur ca am gasit chiar unul romanesc! Felicitari!
cred ca e cazul sa zic mersi frumos
l-am folosit si vad ca e ok
Arata foarte bine . Thx Man