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:

/* @group ntz css reset */

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, u, i, 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}

strong, b {font-weight:700}
em, i {font-style:italic}

ins {text-decoration:none}
del {text-decoration:line-through}
table {border-collapse:collapse;border-spacing:0}
caption, th, td {text-align:left;font-weight:100}

textarea {overflow:auto}
button {cursor:pointer;padding:0}
*:first-child+html button {width:1;overflow:visible}
* html button {width:1;overflow:visible}
button::-moz-focus-inner { border: 0; }

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; color:#4f81bd}
a:hover {text-decoration:underline}

:focus {outline:0}
a:focus {outline:1px dotted #999}

/*  -----------------------------------
	smart and dirty
--------------------------------------*/

.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}

/* @end */

Ce s-a schimbat?

  1. Am reformatat un pic codul și am eliminat chestii inutile (tag-uri obsolete, spații aiurea, punct și virgulă la utlimele definiții etc);
  2. Pentru strong nu exista definit font-weight și aparent firefox îl afișa boldat, IE nu (ca să vezi…);
  3. Am adăugat font-weight:700 și font-style:italic pentru b respectiv i (pentru situațiile în care ai și utilizatori de modă veche :)
  4. 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)
  5. IE<8 și tag-ul button nu se împacă bine by default. Am introdus un mic hack: width:1;overflow:visible. Evident, doar pentru IE;
  6. 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. :)

21 Comentarii to “CSS Reset – V 1.2”

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

    PS: Congrats

  2. O da arata mult mai clean decat v1.1, o sa-l folosesc si pe asta. Good job!

  3. Staicu Ionuț-Bogdan

    Aici ai mai putea sa adaugi si formatarea pentru .clear, ca tot ai dirty things prin el

    Explică te rog, că n-am înțeles :|

  4. Ptfff, n-am vazut ca e deja. Scuze, oboseala :)

  5. de ce ai folosit font-weight:700 in loc de font-weight:bold ?!

  6. Staicu Ionuț-Bogdan

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

  7. daca se rezuma pana la bytes iti recomand sa scapi de unele spatii inutile ;)

  8. Staicu Ionuț-Bogdan

    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:

  9. ol, ul {list-style: none}
    blockquote, q {quotes: none}

    ce-i cu spatile alea inainte de “none”?! capisci ce vreau sa zic? :P

  10. Staicu Ionuț-Bogdan

    ce-i cu spatile alea inainte de “none”?!

    Oups, alea mi-au scăpat. My bad :D

  11. 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. :D (kidding around)

  12. Staicu Ionuț-Bogdan

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

    10x pentru tip. Probabil va fi în CSS Reset 1.3 sau 1.2.1 :))

  13. 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.

  14. Dar un CSS Reset pentru Smart Phones unde pot gasi?

  15. uite reset pentru toate
    * {

    margin: 0;
    outline: 0 none;
    padding: 0; }

  16. La punctul 1 (“eliminat … punct și virgulă la utlimele definiții etc); ” )

    Exista vreun avantaj daca faci chestia asta?

  17. Staicu Ionuț-Bogdan

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

Show trackbacks
  1. […] dată când începeam un proiect nou, dădeam un extract strategic la arhivă. Timpul a trecut, CSS Reset-ul s-a îmbunătățit, au apărut alte versiuni de jQuery etc. Prin urmare… back to square […]

  2. […] pe seama reset-urilor CSS. Dar… Este un articol bun, pentru cei ce nu vor să folosească reset-ul modificat de mine (sau baseproject) […]

Ț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