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


<br />
/* resetting some default styles */</p>
<p>html, body, div, span, applet, object, iframe,<br />
h1, h2, h3, h4, h5, h6, p, blockquote, pre,<br />
a, abbr, acronym, address, big, cite, code,<br />
del, dfn, em, font, img, ins, kbd, q, s, samp,<br />
small, strike, strong, sub, sup, tt, var,<br />
b, u, i, center,<br />
dl, dt, dd, ol, ul, li,<br />
fieldset, form, label, legend,<br />
table, caption, tbody, tfoot, thead, tr, th, td {<br />
	margin: 0;<br />
	padding: 0;<br />
	border: 0;<br />
	outline: 0;<br />
	font-size: 100%;<br />
	vertical-align: baseline;<br />
	background: transparent;<br />
}<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;}<br />
:focus {outline: 0;}<br />
a:focus {outline:1px dotted #999;}<br />
ins {text-decoration: none;}<br />
del {text-decoration: line-through;}<br />
table {border-collapse: collapse;border-spacing: 0;}</p>
<p>html { font-size:100.01%; }<br />
body { font-size:0.625em; }</p>
<p>textarea {overflow:auto}<br />
button {cursor:pointer}<br />
input[type="checkbox"],<br />
input[type="radio"],<br />
input.radio,<br />
input.checkbox {<br />
	vertical-align:text-top;<br />
	width:13px;<br />
	height:13px;<br />
	padding:0;<br />
	margin:0;<br />
	position:relative;<br />
	overflow:hidden;<br />
	top:2px;<br />
}<br />
a {text-decoration:none}<br />
a:hover {text-decoration:underline}<br />
/*  -----------------------------------<br />
	a better and smarter way to clear floats<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}<br />

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