CSS Reset

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}

12 Comentarii to “CSS Reset”

  1. Nu suport clearfix-urile, prefer left floating atit pentru parent cit si pentru blocul curent.

  2. Staicu Ionuț-Bogdan

    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 :D

  3. Ceva de genu folosesc si eu. :D Dar … Resetarea font-size-ului la 10px. Astfel, 1em = 1px … esti sigur?

  4. Staicu Ionuț-Bogdan

    Typo :D 1em=10px

  5. Nicolae Vartolomei: ai multe situatii in care ai nevoie de claerfix – altfel probabil n-ar fi fost inventat

  6. Nice CSS reset ! congrats. Ba ! clearfix-ul e sfant ok ?!

  7. Staicu Ionuț-Bogdan

    Ba ! clearfix-ul e sfant ok ?!

    AMIN! :D

  8. 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!

  9. cred ca e cazul sa zic mersi frumos :)
    l-am folosit si vad ca e ok :)

  10. Arata foarte bine . Thx Man

Show trackbacks
  1. […] Written on July 19th, 2012 by Staicu Ionuț-Bogdan Chiar dacă unii sunt împotriva clasei clearfix, eu obișnuiesc să o folosesc ca modalitate rapidă de a „curăța mizeria” lăsată în urmă […]

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter