Resetarea stilurilor CSS3. Resetarea stilurilor CSS, exemple de soluții de lucru. Resetarea CSS de către Eric Meyer

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 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ă ; ) /* Resetare rol 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 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 detectare CSS YUI */ #yui3-css-stamp.cssreset ( afișare: niciuna; )

Resetarea stilurilor normalize.css

Normalize.css este un fișier CSS personalizat care permite browserelor să afișeze toate elementele în mod mai consecvent ș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 î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 ( culoare de fundal: transparent; /* 1 */ -webkit-text-decoration-skip: obiecte; /* 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 preaplinul î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, 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 /* ... */.

Traducere

Acest articol este primul dintr-o serie pe tema îmblânzirii CSS-ului. Astăzi ne vom uita la tehnologie Resetare CSS.

De ce este necesar acest lucru?

Fiecare browser își setează propriile valori implicite de stil pentru diferite elemente HTML. Folosind CSS Reset putem nivela această diferență pentru a asigura compatibilitatea între browsere a stilurilor.

De exemplu, utilizați elementul Aîn documentul dvs. Majoritatea browserelor, cum ar fi Internet Explorer și Firefox, adaugă un link Culoarea albastrăȘi subliniere. Totuși, imaginați-vă că peste cinci ani cineva decide să creeze un nou browser (să-i spunem UltraBrowser). Dezvoltatorii browserului nu le-a plăcut culoarea albastră și au fost enervați de sublinierea, așa că au decis să evidențieze link-urile in rosuȘi îndrăzneţ. Se bazează pe aceasta că dacă setați valoarea stilului de bază pentru un element A, atunci este garantat că va fi așa cum doriți să fie și nu așa cum preferă dezvoltatorii UltraBrowser să-l afișeze.

Dar acum nu avem deloc liniuțe, inclusiv între paragrafele individuale! Ce să fac? Nu minți și nu-ți fie teamă: sub resetarea noastră vom descrie regula de care avem nevoie. Acest lucru se poate face în diferite moduri: specificați indentarea din partea de jos sau de sus a paragrafului, specificați-o în procente, pixeli sau em.

Cel mai important, browserul joacă acum după regulile noastre, iar noi nu după regulile sale. M-am hotarat sa fac asa:

* ( marja: 0; umplutură: 0; ) p ( marja: 5px 0 10px 0; )

Ca rezultat, am obținut ceea ce se poate vedea în al treilea exemplu.

Puteți crea propriile stiluri de resetare dacă rezolvați o problemă specifică în proiectul dvs. În ciuda acestui fapt, nu există un ghid pas cu pas pentru a vă crea propria resetare CSS. Bazează-te pe propriile principii și pe propriul tău stil.

Pentru a vă ajuta să faceți alegerea corectă, iată mai multe link-uri:

Mai puțin este mai mult - alegerea mea de Resetare CSS (Ed Elliott).

2. Resetarea CSS este primul lucru pe care ar trebui să-l vadă browserul

Resetarea stilurilor după setarea propriilor stiluri pentru elemente este o abordare greșită. În acest caz, nu trebuie să vă așteptați la nimic bun de la afișarea browserului. Amintiți-vă că ar trebui să includeți întotdeauna CSS Reset mai întâi și apoi toate celelalte stiluri.

Da, înțeleg că a sunat amuzant, dar aceasta este una dintre principalele greșeli ale dezvoltatorilor, tineri și bătrâni. Mulți oameni pur și simplu uită de asta.

Unii ar putea pune o întrebare logică: de ce se întâmplă asta? Răspunsul este simplu: regulile scrise mai jos în textul fișierului CSS (și chiar mai jos în ordinea lor în document) suprascriu regulile declarate mai devreme.

Să nu depărtăm prea mult de subiect și să continuăm. Să aplicăm stilurile lui Eric Meyer exemplului nostru, dar după descrieri ale proprietăților noastre, așa cum se arată în exemplul 4. Matematicienii ar spune următoarele: „Asta trebuie să dovedim”.

3. Utilizați un document CSS separat pentru resetarea CSS

Trebuie (nu, în niciun caz nu am fost forțat) să menționez acest sfat. Utilizarea unui fișier separat pentru resetarea CSS este o practică comună susținută de un număr mare de dezvoltatori.

De fapt iau poziția de creație un fișier CSS mare datorită performanţelor mai mari ale acestei abordări. Dar cu privire la această problemă sunt înclinat să fiu de acord cu majoritatea: CSS Reset ar trebui să fie plasat într-un fișier separat (denumit de obicei reset.css). În acest caz, îl puteți folosi în diferite proiecte fără a depune niciun efort pentru a-l separa de alte reguli CSS.

4. Încercați să evitați utilizarea unui selector universal

Deși acest concept funcționează, utilizarea sa nu este adesea de dorit din cauza incompatibilității cu unele browsere (de exemplu, acest selector nu este procesat corect în Internet Explorer). Ar trebui să utilizați această tehnică doar pentru pagini simple, mici, statice și previzibile (dacă ar trebui să faceți asta).

Acest sfat este deosebit de important atunci când dezvoltați soluții precum teme CMS. Nu puteți prezice dinainte cum va fi folosit sau cum va fi modificat. Este mai bine să descrii regulile CSS fundamentale pentru toate elementele decât să folosești mecanismul imprevizibil (deși mai mic) al selectoarelor universale în acest scop.

5. Evitați descrierile de proprietăți redundante când utilizați Resetare CSS

Un alt motiv pentru care nu îmi place un fișier separat pentru CSS Reset este potențiala redundanță a declarațiilor de proprietate CSS ulterioare. Repetarea stilurilor tale individuale în întregul set de fișiere CSS este o manieră proastă și ar trebui evitată. Bineînțeles, uneori suntem prea leneși să trecem cu minuțiozitate printr-un set de stiluri și să combinăm unele dintre ele, dar ar trebui măcar să încercăm!

Să revenim la Resetarea CSS a lui Eric. Setează valorile implicite pentru înălțimea liniei, culoarea și fundalul elementului corp in felul urmator:

corp (înălțimea liniei: 1; culoare: negru; fundal: alb; )

Să presupunem că știți deja cum va arăta elementul corp:

culoare de fundal: #cccccc;
culoare: #996633;
Doriți să repetați o anumită imagine de fundal pe orizontală.

În acest caz, nu este nevoie să creați un nou selector pentru a vă descrie proprietățile - le puteți include pur și simplu în CSS Reset. Hai să o facem:

corp (înălțimea liniei: 1; culoare: #996633; fundal:#ccc url(tiled-image.gif) repetare-x stânga sus; )

Nu vă fie teamă să modificați resetarea CSS în sine. Adaptează-l la tine, fă-l să funcționeze pentru tine. Schimbați, rearanjați, eliminați și adăugați după cum este necesar în cazul dvs. specific.

Eric Meyer a spus următoarele despre aceasta: „Acesta nu este un caz în care toată lumea ar trebui să folosească CSS Reset fără modificări”.

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ă resetarea 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.

Traducere