Resetarea stilurilor CSS, exemple de soluții de lucru. Ar trebui să folosesc CSS Resetare? Resetați fișierul CSS

Mulți designeri de layout folosesc așa-numitul Resetare CSS, care servește la eliminarea particularităților diferitelor browsere. De fapt, acest fișier de stil resetează toate proprietățile CSS la valorile implicite. În acest articol, voi demonstra codul acestui fișier și vă voi spune cum Ar trebui să folosesc sau nu CSS Reset?.

Am văzut multe diferite Resetare CSS, toate sunt cam la fel. Puteți folosi acesta:

Html, body, div, span, applet, obiect, iframe,
h1, h2, h3, h4, h5, h6, p, citat bloc, pre,
a, prescurtare, acronim, adresa, mare, cita, cod,
del, dfn, em, font, img, ins, kbd, q, s, samp,
mic, grevă, puternic, sub, sup, tt, var,
b, u, i, centru,
dl, dt, dd, ol, ul, li,
set de câmpuri, formular, etichetă, legendă,
masa, legenda, tbody, tfoot, thead, tr, th, td (
fundal: transparent;
chenar: 0;
dimensiunea fontului: 100%;
marja: 0;
contur: 0;
umplutură: 0;
vertical-align: linia de bază;
}
corp (
înălțimea liniei: 1;
}
ol, ul (
stil-listă: niciunul;
}
citat bloc,q(
ghilimele: niciunul;
}
blockquote:înainte, blockquote:după,
q:inainte, q:dupa (
continut: "";
continut: nici unul;
}
:focus (
contur: 0;
}
masa (
border-colaps: colaps;
distanță-limită: 0;
}

Cred că motivele utilizării sale sunt deja clare, dar de ce, de exemplu, nu îl folosesc, ca mulți alți designeri de layout, merită să vorbim. În primul rând, aceasta fișier suplimentar, în al doilea rând, timp suplimentar pentru procesare, dar cel mai important, îmi plac proprietățile implicite. De exemplu, aceleași câmpuri din tabel. La urma urmei, toate proprietățile implicite au fost făcute dintr-un motiv, dar ca opțiune cea mai optimă pentru afișarea diferitelor elemente. Vă asigur, după resetare căptușeală pentru celulele tabelului, cel mai probabil îl veți returna în fișierul principal. Și este departe de a fi un fapt că valoarea va diferi de ceea ce a fost implicit. Deci, se dovedește că mai întâi îl scoatem, apoi îl returnăm. Și împreună cu primele dezavantaje (un fișier suplimentar și un cod suplimentar), mulți designeri de layout nu folosesc Resetare CSS.

Oricum, folosirea stilului de resetare nu este un lucru rău, astfel încât să îl puteți utiliza în siguranță dacă credeți că simplificarea adaptării site-ului la diferite browsere vă va simplifica într-adevăr aspectul în ansamblu.

De la autor: Construirea site-ului web pe Internet poate fi ca și cum a construi pe nisipuri mișcătoare. Browserele fac același lucru, dar din când în când fac diferențe enervant de imprevizibile. De exemplu, toate browserele au „foi de stil pentru agent de utilizator” - un set implicit de stiluri CSS pentru a face antetul să arate ca un antet etc., chiar înainte de a atribui stiluri paginii1. Desigur, fiecare motor de browser folosește seturi implicite ușor diferite.

Un exemplu au fost stilurile implicite de listă, în care foile de stil implicite ale browserului Internet Explorer și Opera aveau inițial umplutură de listă margin-left: 30pt;, în timp ce Firefox și KHTML au venit cu padding-left: 40px;. Dacă doriți să schimbați umplutura implicită prin definirea ul (padding-left: 0;), aceasta ar produce rezultate foarte diferite în browsere.

RESETĂRI CSS

Pentru a obține puțină stabilitate, unii dezvoltatori resetează toate marginile și umplutura folosind un selector universal:

* (marja: 0; umplutură: 0;)

Definind indentarea listei și pornind foaia de stil acolo, veți obține ceea ce vă așteptați. Cu toate acestea, folosirea * a însemnat că marja implicită și umplutura s-au prăbușit pentru toate elementele și, de îndată ce ați adăugat un element de formular, lucrurile s-au prost.

Scopul unei resetari este de a reseta tot ce puteți... [și] servi ca punct de plecare pentru propriile stiluri de bază- Eric Meyer

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, tabel, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, rubin, secțiune, rezumat, timp, marcaj, audio, video ( marjă: 0; umplutură: 0; chenar: 0; dimensiunea fontului: 100%; font: moștenire; aliniere verticală: linie de bază; )

Resetează unele proprietăți ale multor elemente (dar nu ale tuturor) la echivalentul text simplu. Deoarece numai elementele care se potrivesc sunt resetate, acest lucru evită unele probleme * (marja: 0; umplutură: 0;). Putem defini apoi stiluri pentru aceste proprietăți „nestilizate” eliminate, încrezători că ne construim pe o bază stabilă între browsere. Această atribuire de stil acționează și ca un semnal pentru necesitatea de a seta în mod conștient stiluri adecvate pentru aceste elemente.

PROBLEME DE RESETAREA SETĂRILOR CSS

Resetările CSS au fost o salvare, dar acum, mai ales odată cu creșterea wireframe-urilor, acestea sunt adesea folosite așa cum sunt. De exemplu, Eric a presupus că alți dezvoltatori vor începe să construiască site-uri în jurul stilurilor de resetare propuse, înlocuindu-le în consecință, iar prima versiune a Meyer Reset a inclus temporar această regulă:

/* nu uitați să definiți stilurile de focalizare! */ :focus (contur: 0; )

Din păcate, nu toată lumea a definit stilurile de focalizare, iar Eric a eliminat-o din a doua versiune.

Folosirea resetărilor te face să te simți un pic pervers. Resetarea stilurilor implicite ale browserului vă obligă să vă gândiți la modul în care ar trebui să fie afișat fiecare element, ajutând să vă asigurați că elementele sunt aplicate pe baza semanticii și nu a stilurilor implicite. Dar pentru elemente precum i și em există aproape întotdeauna un stil implicit de browser. Alte stiluri implicite de browser, cum ar fi dimensiunea textului antetului cândva ridicol de mare, s-au schimbat și sunt acum destul de tolerabile în mod implicit. Problemele încep atunci când cineva dorește să posteze un element HTML resetat doar cu stilurile de resetare „nestilizate” atribuite.

Pentru mine, cea mai mare problemă cu resetările este moștenirea, care duce la spam în instrumentele browserului. Când încercați să găsiți o problemă CSS cu un element profund imbricat în codul altcuiva, acest lucru nu va ajuta:

Regulile de resetare CSS au fost repetate din cauza moștenirii

NORMALIZE.CSS

Nicholas Gallagher și Jonathan Neal au adoptat o abordare diferită cu Normalize.css, „un fișier CSS mic care asigură o mai bună consistență între browsere în stilul implicit al elementelor HTML”. Ca și în cazul resetărilor CSS, ne oferă un punct de plecare puternic pentru cross-browser - motivul principal pentru utilizarea unei resetări în primul rând - dar cele două abordări sunt diferite din punct de vedere filozofic.

Resetările CSS suprascriu stilurile de agent de utilizator și readuc multe elemente la starea lor „nestilată”, un teren uniform pe care să se construiască în siguranță. Cu toate acestea, trebuie să stilăm majoritatea elementelor înainte de a putea construi cu ele. În schimb, Normalize.css abordează doar inconsecvențele în stilul agentului utilizator, alegând cele mai potrivite setări implicite pentru a face diferența. Și aici obținem o bază sigură pentru cross-browser, dar una care include stiluri de agenți de utilizator normalizate ca blocuri de bază gata de utilizat. Practic este ceva de genul unei versiuni idealizate pentru cross-browser a foii de stil CSS 2.1 implicite. În ambele cazuri, trebuie apoi să adăugăm propriile noastre stiluri dominante pentru a crea imaginea, dar deoarece setările implicite ale browserului în Normalize.css rămân, există mai puține stiluri de adăugat în general.

Deoarece modificările din Normalize.css sunt mai direcționate, nu există o cascadă de moștenire a regulilor rescrise în instrumentele de dezvoltare a browserului. Iată un simplu ul:, destyleat cu Meyer Reset și Normalize.css versiunile 1 și 2:

Element „nestilat” al unei liste neordonate

Se aplică Meyer Reset

Aplicați Normalize.css v1

Aplicarea Normalize.css v2

Există o diferență clară în filozofie atunci când exemplul Meyer Reset apare ca câteva rânduri de text simplu, fără margini, indentații sau marcatori, în timp ce exemplele Normalize.css arată ca stiluri implicite. Diferența dintre stilurile aplicate acestui ul este, de asemenea, ușor de observat.

Cu toate acestea, acestea nu sunt toate stilurile aplicate ul. Pentru comparație, iată aceeași captură de ecran „nestilată”, dar cu stiluri vizibile de agent de utilizator, în Firefox 21 și Opera Next 15.

Toate elementele paginii HTML au propriile valori implicite. Și, din păcate, ele nu sunt interpretate în mod egal de diferite browsere. Ca urmare, designul site-ului are de suferit; designul acestuia se modifică la schimbarea browserului (browser de internet). Scopul procedurii de resetare a stilului este de a reduce inconsecvența browserului în lucruri precum înălțimea liniilor, marginile, dimensiunile fontului antetului etc.

Exemple de scripturi de resetare în stil CSS

Există o părere că fiecare webmaster care se respectă ar trebui să scrie propriul cod de resetare CSS. Dar sunt susținătorul unei abordări diferite: luați o soluție gata făcută, înțelegeți-o și ajustați-o dacă este necesar.

Eric Meyer CSS Resetare

Scriptul de resetare de la Eric Meyer, potrivit autorului însuși, este intenționat foarte general. De exemplu, elementul body nu are un set implicit de culori de fundal. Prin urmare, trebuie să fie modificat, editat, extins și altfel personalizat pentru a se potrivi nevoilor dumneavoastră. Adăugați culorile dorite pentru pagini, linkuri și așa mai departe.

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licență: niciuna (domeniu public) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, mare, cita, cod, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, masă, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, ruby, secțiune, rezumat, timp, marcaj, audio, video (margine: 0; umplutură: 0; chenar: 0; dimensiune font: 100%; font: moștenire; aliniere verticală: linie de bază ; ) /* Resetarea rolului de afișare HTML5 pentru browsere mai vechi */ articol, deoparte, detalii, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( ghilimele: niciunul; ) blockquote:fore, blockquote:after, q:fore, q:after (conținut: ""; conținut: none; ) tabel (border- colaps: colaps; distanță-limită: 0; )

Yahoo! (YUI 3) Resetați CSS

CSS Reset YUI 3 atenuează stilul inconsecvent al elementelor HTML de către browsere, la fel ca orice alt script de resetare CSS, pentru a crea o bază solidă pentru construirea de site-uri web și aplicații web.

/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. Toate drepturile rezervate. Licențiat conform licenței BSD. http://yuilibrary.com/license/ */ /* TODO va trebui să eliminăm setările pe HTML, deoarece nu putem să-l spațiu de nume. TODO cu prefixul, ar trebui să grupez după selector sau proprietate pentru a reduce greutatea? */ html( color:#000; background:#FFF; ) /* TODO elimina setările de pe BODY, deoarece nu putem să-l spațiu de nume. */ /* TODO test punând o clasă pe HEAD. - Eșuează pe FF. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td ( margin: 0; padding: 0; ) table ( border-collapse: collapse; border-spacing: 0; ) fieldset, img ( border: 0; ) /* TODO Gândiți-vă la gestionarea moștenirii în mod diferit, poate lăsând IE6 să eșueze puțin ... */ adresa, legenda, citarea, codul, dfn, em, strong, th, var ( font-style:normal; font-weight:normal; ) ol, ul (list-style:none; ) caption, th ( text-align:left; ) h1, h2, h3, h4, h5, h6 (dimensiunea fontului:100%; greutatea fontului:normal; ) q:inainte, q:dupa (conținut:""; ) prescurtat, acronim ( border:0; font-variant:normal; ) /* pentru a păstra înălțimea liniei și aspectul selectorului */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) input, textarea , selectați ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*pentru a activa redimensionarea pentru IE*/ ) /*deoarece legenda nu moștenește în IE * / legendă ( culoare:#000; ) /* ștampilă de detecție CSS YUI */ #yui3-css-stamp.cssreset ( afișare: niciunul; )

Resetarea stilurilor normalize.css

Normalize.css este un fișier CSS personalizat care permite browserelor să redeze toate elementele mai consistent și în conformitate cu standardele moderne. Autorii săi au examinat diferențele dintre stilurile implicite ale diferitelor browsere pentru a ajusta doar acele stiluri care necesitau normalizare.

/*! normalize.css v6.0.0 | Licență MIT | github.com/necolas/normalize.css */ /* Document ===================================== = ======================================= */ /** * 1. Corectează linia înălțime în toate browserele. * 2. Preveniți ajustările dimensiunii fontului după schimbările de orientare în * IE pe Windows Phone și în iOS. */ html ( înălțimea liniei: 1,15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Secțiuni ================================================= =========================== */ /** * Adăugați afișarea corectă în IE 9-. */ articol, deoparte, subsol, antet, navigare, secțiune ( afișare: bloc; ) /** * Corectați dimensiunea fontului și marginea elementelor „h1” din contextele „secțiune” și * „articol” în Chrome, Firefox și Safari. */ h1 ( font-size: 2em; margine: 0.67em 0; ) /* Gruparea conținutului ============================ = ==================================================== ========= */ /** *Adăugați afișarea corectă în IE 9-. * 1. Adăugați afișajul corect în IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Adăugați marja corectă în IE 8. */ figure ( margin: 1em 40px; ) /** * 1. Adăugați caseta corectă dimensionarea în Firefox. * 2. Afișați overflow-ul în Edge și IE. */ h ( box-sizing: content-box; /* 1 */ înălțime: 0; /* 1 */ overflow: vizibil; /* 2 */ ) /** * 1. Corectați moștenirea și scalarea dimensiunii fontului în toate browserele. * 2. Corectați dimensiunea ciudată a fontului `em` în toate browserele. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Semantică la nivel de text =============== ==================================================== === ========= */ /** * 1. Eliminați fundalul gri de pe linkurile active în IE 10. * 2. Eliminați golurile subliniate în linkurile în iOS 8+ și Safari 8+. */ a ( culoarea fundalului: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Eliminați chenarul de jos în Chrome 57- și Firefox 39- . * 2. Adăugați decorarea textului corect în Chrome, Edge, IE, Opera și Safari. */ abbr ( border-bottom: none; /* 1 */ text-decoration: subliniat; /* 2 */ text-decoration: subliniat punctat; /* 2 */ ) /** * Preveniți aplicarea duplicată a `bolder ` după următoarea regulă din Safari 6. */ b, puternic ( font-weight: inherit; ) /** * Adăugați greutatea corectă a fontului în Chrome, Edge și Safari. */ b, puternic ( font-weight: bolder; ) /** * 1. Corectați moștenirea și scalarea dimensiunii fontului în toate browserele. * 2. Corectați dimensiunea ciudată a fontului `em` în toate browserele. */ cod, kbd, samp (familie font: monospace, monospace; /* 1 */ dimensiune font: 1em; /* 2 */ ) /** * Adăugați stilul corect de font în Android 4.3-. */ dfn ( font-style: italic; ) /** * Adăugați fundalul și culoarea corecte în IE 9-. */ marca (culoare de fundal: #ff0; culoare: #000; ) /** * Adăugați dimensiunea corectă a fontului în toate browserele. */ small ( font-size: 80%; ) /** * Preveniți elementele `sub` și `sup` să afecteze înălțimea liniei în * toate browserele. */ sub, sup ( dimensiunea fontului: 75%; înălțimea liniei: 0; poziție: relativă; alinierea verticală: linia de bază; ) sub ( jos: -0.25em; ) sup ( sus: -0.5em; ) /* Conținut încorporat ================================================= ================ =========================== */ /** * Adăugați afișare corectă în IE 9-. */ audio, video ( display: inline-block; ) /** * Adăugați afișajul corect în iOS 4-7. */ audio:not() (afișare: niciunul; înălțime: 0; ) /** * Eliminați chenarul imaginilor din interiorul linkurilor în IE 10-. */ img (border-style: none; ) /** * Ascunde overflow-ul în IE. */ svg:not(:root) ( overflow: ascuns; ) /* Forms ================================ = =================================================== ====== */ /** * Eliminați marja în Firefox și Safari. */ buton, intrare, optgroup, select, textzona ( margine: 0; ) /** * Afișează overflow în IE. * 1. Afișați depășirea în Edge. Butonul */, introducere ( /* 1 */ overflow: vizibil; ) /** * Eliminați moștenirea transformării textului în Edge, Firefox și IE. * 1. Eliminați moștenirea transformării textului în Firefox. Butonul */, selectați ( /* 1 */ text-transform: none; ) /** * 1. Preveniți o eroare WebKit în care (2) distruge controalele native `audio` și `video` * în Android 4. * 2. Corectați dizabilitatea pentru a stila tipurile pe care se poate face clic în iOS și Safari. */ buton, html , /* 1 */ , ( -webkit-appearance: buton; /* 2 */ ) /** * Eliminați chenarul interior și umplutura în Firefox. */ Buton::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner (stil chenar: niciunul; umplutură: 0; ) /** * Restabiliți stilurile de focalizare nesetate de regula anterioară. */ buton:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring (contur: 1px ButtonText punctat; ) /** * 1. Corectați împachetarea textului în Edge și IE. * 2. Corectați moștenirea culorilor din elementele `fieldset` în IE. * 3. Îndepărtați padding-ul astfel încât dezvoltatorii să nu fie surprinși atunci când eliberează * elemente `fieldset` în toate browserele. */ legendă ( dimensiunea casetei: border-box; /* 1 */ culoare: moștenire; /* 2 */ afișare: tabel; /* 1 */ lățime maximă: 100%; /* 1 */ padding: 0 ; /* 3 */ spatiu alb: normal; /* 1 */ ) /** * 1. Adăugați afișajul corect în IE 9-. * 2. Adăugați alinierea verticală corectă în Chrome, Firefox și Opera. */ progres ( display: inline-block; /* 1 */ vertical-align: baza; /* 2 */ ) /** * Eliminați bara de defilare verticală implicită în IE. */ textarea ( overflow: auto; ) /** * 1. Adăugați dimensiunea corectă a casetei în IE 10-. * 2. Îndepărtați căptușeala în IE 10-. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Corectați stilul cursorului al butoanelor de creștere și decrementare în Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( înălțime: automat; ) /** * 1. Corectați aspectul ciudat în Chrome și Safari. * 2. Corectați stilul conturului în Safari. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Eliminați butoanele interioare și anulați în Chrome și Safari pe macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Corectați incapacitatea de a stila tipurile pe care se poate face clic în iOS și Safari. * 2. Schimbați proprietățile fontului în „moștenire” în Safari. */ ::-webkit-file-upload-button ( -webkit-appearance: buton; /* 1 */ font: inherit; /* 2 */ ) /* Interactiv ============ ==================================================== === ============ */ /* * Adăugați afișarea corectă în IE 9-. * 1. Adăugați afișajul corect în Edge, IE și Firefox. */ detalii, /* 1 */ meniu ( display: block; ) /* * Adăugați afișarea corectă în toate browserele. */ rezumat (afișare: element-listă; ) /* Scripting ==================================== = ======================================= */ /** * Adăugați afișarea corectă în IE 9-. */ canvas ( display: inline-block; ) /** * Adăugați afișarea corectă în IE. */ șablon ( afișare: niciunul; ) /* Ascuns ======================================= ====================================== */ /** * Adăugați afișajul corect în IE 10 - . */ (afisare: nici unul; )

Resetare prin selector universal * (asterisc)

La prima vedere, aceasta poate părea cea mai simplă și de succes soluție; de ​​ce să descrieți toate elementele HTML și să le atribuiți valori atunci când puteți utiliza selectorul *, deoarece efectul său se aplică tuturor elementelor HTML.

* ( marja: 0; umplutură: 0; )

Dar, din păcate, aceasta nu este o practică bună. Este foarte dificil (care consumă mult timp în comparație cu alte proceduri de resetare CSS) pentru browser să aplice reguli fiecărui element din document, în special pe paginile web mari și, de asemenea, poate strica o mulțime de stiluri implicite bune.

Resetarea stilurilor și WordPress

Dacă doriți să utilizați una dintre metodele descrise mai sus pentru a reseta stilurile CSS pentru un site WordPress, atunci acest lucru se poate face în două moduri.

Primul este că trebuie să copiați codul de resetare la începutul fișierului style.css al temei dvs. WordPress (după rândurile despre autor și numele temei, adică după textul înconjurat de o fracțiune și un asterisc /* ... */.

În acest articol vom vorbi despre resetarea stilurilor și vom privi un exemplu de creare a unui astfel de fișier reset.css.

Ideea de a arunca stiluri a apărut acum aproximativ 10 ani. Care a constat de fapt în a face pagina să arate la fel în toate browserele folosind un set mic de stiluri CSS. Desigur, acest lucru nu funcționează întotdeauna, dar unele lucruri pot fi corectate - de exemplu, granița nu este clară de unde provine în unele versiuni de IE. Sau un contur albastru (contur) lângă câmpuri.

Nu este un secret pentru niciun dezvoltator front-end că browserele sunt foarte pretențioase și fiecare procesează elemente HTML în felul său, adăugând propriile stiluri standard.

Deoarece această idee există de mult timp, nu este surprinzător că există deja fișiere de resetare gata făcute, numite de obicei reset.css și conectate la toate proiectele.

De ce într-un fișier separat? Da, pur și simplu pentru că este mai convenabil să le transferați de la proiect la proiect.

Iată un exemplu reset.css din 2007:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licență: niciuna (domeniu public) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, mare, cita, cod, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, masă, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, ruby, secțiune, rezumat, timp, marcaj, audio, video (margine: 0; umplutură: 0; chenar: 0; dimensiune font: 100%; font: moștenire; aliniere verticală: linie de bază ; ) /* Resetarea rolului de afișare HTML5 pentru browsere mai vechi */ articol, deoparte, detalii, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( ghilimele: niciunul; ) blockquote:fore, blockquote:after, q:fore, q:after (conținut: ""; conținut: none; ) tabel (border- colaps: colaps; distanță-limită: 0; )

Acesta este doar un standard pentru acest fișier adoptat de un anumit cerc de dezvoltatori web.

Vă sfătuiesc, fie că sunteți un programator cu experiență sau abia la început, să vă dezvoltați propriul fișier de resetare. Puteți să luați standardul descris mai sus ca bază, să îl completați cu propriile dvs. selectoare sau să le schimbați pe cele existente. Iată un exemplu de astfel de fișier pe care l-am dezvoltat pentru mine:

input, textarea,a , button, select(outline:none) img (border:none;) hr ( clear:both; border:none; background:none; ) * ( background-repeat:no-repeat; ) /* HTML5 resetarea rolului de afișare pentru browsere mai vechi */ articol, deoparte, detalii, figcaption, figură, subsol, antet, hgroup, meniu, navigare, secțiune ( afișare: bloc; ) corp ( înălțime linie: 1; ) ol, ul ( listă -style: none; margin:0; padding:0; ) blockquote, q ( ghilimele: niciunul; ) blockquote:before, blockquote:după, q:before, q:after (conținut: ""; conținut: niciunul; ) tabel ( border-collapse: colaps; margine-spațiere: 0; )

Puteți copia oricare dintre codurile de mai sus pentru uz personal, dar dacă îl utilizați în articolele dvs., vă rugăm să furnizați un link către sursă.

Excluzând familiile IE și Opera Mini.

Deoarece lipsa suportului IE poate cauza problema, iată câteva dintre modalitățile de a reseta unele proprietăți CSS la valorile lor inițiale:

Reset-this ( animație: niciuna; animație-întârziere: 0; animație-direcție: normal; animație-durată: 0; animation-fill-mode: niciunul; animation-iterate-count: 1; animation-name: none; animation- stare de redare: rulare; funcția de sincronizare a animației: ușurință; vizibilitate față de spate: vizibil; fundal: 0; atașament de fundal: derulare; clip de fundal: casetă de margine; culoare de fundal: transparent; imagine de fundal: niciuna; Origine fundal: casetă de umplutură; poziție fundal: 0 0; poziția fundal-x: 0; poziția fundal-y: 0; repetare fundal: repetare; dimensiune fundal: automat automat; chenar: 0; chenar- stil: niciunul; lățime-chenar: mediu; culoare-chenar: moștenire; chenar-jos: 0; chenar-jos-culoare: moștenire; chenar-jos-stânga-rază: 0; chenar-jos-dreapta-rază: 0; border-bottom-style: niciunul; border-bottom-width: mediu; border-collapse: separat; border-image: niciunul; border-left-color: chenar-left-color: moștenire; border-left-style: niciunul; border-left-width: mediu;border-radius: 0; chenar-dreapta: 0; border-right-color: mostenire; border-right-style: niciunul; chenar-dreapta-latime: mediu; distanță-limită: 0; chenar-sus: 0; border-top-color: mostenire; raza-chenar-sus-stânga: 0; raza-chenar-sus-dreapta: 0; border-top-style: niciunul; chenar-sus-latime: mediu; jos: auto; caseta-umbra: niciuna; box-sizing: content-box; caption-side: sus; clar: niciunul; clip:auto; culoare: mostenire; coloane: auto; număr-coloană: auto; coloană-umplere: echilibru; coloane-decalaj: normal; regulă-coloană: mediu nici unul curentColor; coloană-regula-culoare: currentColor; coloană-regulă-stil: niciunul; lățime-coloană-regula: niciuna; coloana-span: 1; lățimea coloanei: auto; continut: normal; contra-increment: niciunul; contraresetare: niciuna; cursor: auto; direcție: ltr; display: inline; celule goale: arată; plutire: nici unul; font: normal; font-family: mostenire; dimensiunea fontului: mediu; stil font: normal; font-variant: normal; greutatea fontului: normal; inaltime: auto; cratime: niciuna; stânga: auto; spațiere între litere: normal; înălțimea liniei: normală; stil-listă: niciunul; list-style-image: niciuna; list-style-position: exterior; list-style-type: disc; marja: 0; margine-jos: 0; margine-stânga: 0; margine-dreapta: 0; margine-top: 0; înălțime maximă: niciuna; lățime maximă: niciuna; înălțime minimă: 0; lățime min: 0; opacitate: 1; orfani: 0; contur: 0; culoare-contur: inversat; stil de contur: niciunul; lățime contur: medie; preaplin: vizibil; overflow-x: vizibil; overflow-y: vizibil; umplutură: 0; căptușeală-partea inferioară: 0; umplutură-stânga: 0; umplutură-dreapta: 0; padding-top: 0; întrerupere de pagină după: auto; pagina-break-before: auto; pagina-break-inside: auto; perspectiva: niciuna; perspectiva-origine: 50% 50%; poziție: static; /* Poate fi nevoie să modifice ghilimele pentru diferite locații (de ex. fr) */ ghilimele: "\201C" "\201D" "\2018" "\2019"; dreapta: auto; dimensiunea filelor: 8; table-layout: auto; text-align: moștenire; text-align-last: auto; text-decor: niciuna; text-decor-culoare: mostenesc; text-decor-line: niciuna; text-decor-stil: solid; text-indent: 0; text-shadow: niciunul; text-transform: nici unul; sus:auto; transforma: nici unul; stil de transformare: plat; tranziție: niciuna; tranziție-întârziere: 0s; tranziție-durată: 0s; proprietate de tranziție: niciuna; tranziție-funcție de sincronizare: ușurință; unicode-bidi: normal; vertical-align: linia de bază; vizibilitate: vizibil; spatiu alb: normal; văduve: 0; latime: auto; spațierea cuvintelor: normal; z-index: auto; /* patch modern de bază */ all: initial; toate: dezactivate; ) /* patch modern de bază */ #reset-this-root ( all: initial; * ( all: unset; ) )

• Repoziție github relevantă din decembrie 2017, o listă mai convingătoare

După cum s-a menționat într-un comentariu de către @user566245:

Acest lucru este adevărat în principiu, dar kilometrajul individual poate varia. De exemplu, unele elemente precum zona de text implicită au un chenar, aplicarea acestei resetari va reduce marginile zonei de text.

Achiziționat pentru a deveni norma modernă de către utilizatorul Joost

#resetare-acest-părinte ( all: initial; * ( all: unset; ) )

EXEMPLU DIN W3

Acest lucru poate fi util pentru un element „widget” rădăcină inclus într-o pagină care nu dorește să moștenească stilurile paginii externe. Rețineți, totuși, că orice stil „implicit” aplicat acelui element (de exemplu: afișare:bloc din foaia de stil UA pe elementele bloc, de exemplu) va fi de asemenea eliminat.

S-a gândit cineva la altceva decât css pentru a reseta css-ul? Da?

Există o astfel de utilitate de urgență:

getElementsByTagName("*") va returna toate elementele din DOM. Apoi puteți seta stiluri pentru fiecare element din colecție:

Var allElements = document.getElementsByTagName("*"); pentru (var i = 0, len = allElements.length; i< len; i++) { var element = allElements[i]; // element.style.border = ... }

Cu toate acestea spuse; Nu cred că resetarea css este ceva fezabil decât dacă ajungem cu un singur browser web. Dacă la sfârșit „browser” este setat la „implicit”.

Pentru comparație, iată o listă cu valorile Firefox 40.0 pentru

unde font-style: oblic începe operația DOM.

Aliniere-conținut: nesetat; align-items: unset; align-self: unset; animație: nesetat; aspect: neasezat; spate-vizibilitate: neasezat; modul de amestecare de fundal: dezactivat; fundal: neasezat; legare: neasezat; dimensiune bloc: nesetat; border-block-end: unset; border-block-start: unset; border-colaps: neasezat; border-inline-end: unset; border-inline-start: unset; border-radius: neasezat; margine-spațiere: nesetat; chenar: neasezat; jos: neasezat; box-align: unset; cutie-decor-pauza: neasezat; direcția casetei: dezactivat; box-flex: dezactivat; caseta-ordinal-grup: nesetat; box-orient: unset; box-pack: dezinstalat; box-shadow: neasezat; dimensionare cutie: nesetat; caption-side: nesetat; clar: neasezat; clip-path: nesetat; clip-regula: unset; clip: dezinstalat; reglaj de culoare: nesetat; filtre-interpolare-culori: nesetat; culoare-interpolare: nesetat; culoare: nesetat; umplere-coloană: nesetat; coloane-gap: nesetat; regulă-coloană: nesetat; coloane: nesetate; continut: nesetat; control-personaj-vizibilitate: nesetat; contra-increment: dezactivat; contraresetare: dezactivat; cursor: dezactivat; afișaj: dezactivat; dominant-bază: nesetat; celule goale: nesetate; umplere-opacitate: nesetat; regulă de umplere: nesetat; umple: neasezat; filtru: dezactivat; flex-flow: nesetat; flex: dezinstalat; float-edge: neasezat; plutire: dezactivat; flood-color: neasezat; flood-opacity: nesetat; font-family: nesetat; font-feature-settings: unset; kerning font: nesetat; font-language-override: unset; font-size-adjust: unset; dimensiunea fontului: nesetat; font-stretch: nesetat; font-style:oblic; font-sinteza: nesetat; font-variant: unset; font-weight: nesetat; font: ; pictogramă-imagine-ruptă-forță: nesetat; inaltime: neasezat; cratime: nesetat; orientarea imaginii: nesetat; imagine-regiune: nesetat; redarea imaginii: nesetat; ime-mode: dezactivat; inline-size: nesetat; izolare: neasezat; justificare-conținut: nesetat; justify-items: unset; justify-self: neasezat; stânga: neasezat; spațiere între litere: nesetat; iluminare-culoare: nesetat; înălțimea liniei: nesetat; list-style: unset; margin-block-end: unset; margin-block-start: unset; margin-inline-end: unset; margin-inline-start: unset; margine: nesetat; marker-offset: nesetat; marker: nesetat; tip masca: nesetat; masca: neasezat; max-block-size: nesetat; înălțime maximă: nesetat; max-inline-size: nesetat; lățime maximă: nesetat; min-block-size: nesetat; inaltime min: neasezat; min-inline-size: nesetat; min-lățime: nesetat; mix-blend-mode: dezactivat; obiect-potrivire: nesetat; pozitie-obiect: neasezat; offset-block-end: unset; offset-block-start: dezactivat; offset-inline-end: unset; offset-inline-start: dezactivat; opacitate: nesetat; ordine: dezactivat; orienta: neasezat; outline-offset: nesetat; raza-contur: nesetat; contur: neasezat; preaplin: dezactivat; padding-block-end: unset; padding-block-start: dezactivat; padding-inline-end: unset; padding-inline-start: unset; captuseala: neasezat; întrerupere de pagină după: nesetat; pagina-break-before: unset; pagina-break-inside: nesetat; vopsea-comanda: nesetat; perspectiva-origine: neasezat; perspectiva: neasezat; pointer-evenimente: unset; poziție: dezactivat; ghilimele: nesetat; redimensionare: unset; dreapta: dezactivat; ruby-align: unset; rubin-poziție: neasezat; scroll-comportament: nesetat; scroll-snap-coordonate: dezactivat; scroll-snap-destination: dezactivat; scroll-snap-points-x: dezactivat; scroll-snap-points-y: dezactivat; scroll-snap-type: dezactivat; redarea formei: nesetat; stive-dimensionare: nesetat; stop-color: nesetat; stop-opacity: nesetat; stroke-dasharray: neasezat; stroke-dashoffset: unset; stroke-linecap: nesetat; stroke-linejoin: unset; stroke-miterlimit: nesetat; stroke-opacity: nesetat; lățimea cursei: nesetat; stroke: neasezat; tab-size: nesetat; table-layout: nesetat; text-align-last: unset; text-align: unset; text-ancoră: dezactivat; text-combină-în verticală: dezactivat; text-decor: neasezat; text-accentuare-poziție: nesetat; text-accent: nesetat; text-indent: unset; orientare text: nesetat; text-overflow: dezactivat; redarea textului: nesetat; text-shadow: nesetat; text-size-adjust: unset; text-transform: nesetat; sus: dezinstalat; transform-origine: nesetat; transform-style: unset; transforma: dezactivat; tranziție: nesetat; focalizare pe utilizator: dezactivat; user-input: dezactivat; user-modify: unset; user-select: dezactivat; vector-efect: nesetat; vertical-align: unset; vizibilitate: neasezat; spatiu alb: nesetat; latime: neasezat; va-schimbare: neasezat; tragerea ferestrei: dezactivat; ruptura de cuvinte: neasezat; spațierea cuvintelor: nesetat; word-wrap: dezactivat; modul de scriere: dezactivat; z-index: nesetat;