Resetați stilurile folosind CSS Reset. Resetarea stilurilor CSS, exemple de soluții de lucru Stiluri CSS implicite pentru html 5

În mod implicit, browserul își setează propriile setări pentru unele proprietăți în css. Dar problema aici este că există multe browsere web și fiecare își poate stabili propriile reguli. Ce solutie? Aflați cum să resetați setările CSS implicite și să le suprascrieți cu ale dvs. Dar acest articol va fi dedicat modului în care se poate face acest lucru.

CSS Resetați sau resetați la setările implicite

CSS Reset este un set de stiluri care resetează unii parametri, instalat de browser Mod implicit. Fiecare dezvoltator web scrie acest fișier pentru el însuși, iar unii preiau soluție gata făcută. De aici îmi propun să încep. Există multe opțiuni bune pentru resetarea stilurilor, dar preferata mea este aceasta compilată de Eric Meyer:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Licență: niciuna (domeniu public)
*/
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, 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,
articol, deoparte, pânză, detalii, încorporare,
figură, figcaption, subsol, antet, hgroup,
meniu, navigare, ieșire, ruby, secțiune, rezumat,
timp, marcaj, audio, video (
marja: 0;
umplutură: 0;
chenar: 0;
dimensiunea fontului: 100%;
font: mostenire;
vertical-align: linia de bază;
}
/* Resetarea rolului de afișare HTML5 pentru browsere mai vechi */
articol, deoparte, detalii, figcaption, figură,
subsol, antet, hgroup, meniu, navigare, secțiune (
afisare: bloc;
}
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;
}
masa (
border-colaps: colaps;
distanță-limită: 0;
}

O sa comentez putin codul. În primul rând, aici sunt resetate marginile interioare și exterioare pentru toate elementele necesare. În al doilea rând, există suport pentru elemente HTML5. Au un set de reguli care le va permite să se afișeze corect în unele versiuni de browser. În al treilea rând, setările tipice pentru lucru confortabil cu tabele (spațiile dintre celule și marginile duble au fost eliminate). Au fost de asemenea resetate marcatoarele standard pentru liste și ghilimelele pentru citate. Aceste părți ale codului merită eliminate dacă doriți să utilizați stilul implicit.

Cum să resetați singur setările CSS

Dacă aveți o comandă mai mult sau mai puțin normală a CSS, puteți încerca să scrieți singur câteva reguli. De exemplu:

*{
marja: 0;
umplutură: 0;
}

Aceasta este poate cea mai simplă comandă. Asteriscul în acest caz reprezintă toți selectorii, astfel încât stilurile vor fi aplicate tuturor elementelor de pe pagina web, resetând umplutura și umplutura acestora. S-ar putea să fii surprins, dar aceste linii simple de cod pot fi suficiente pentru a oferi compatibilitate între browsere în multe browsere web. Toate celelalte reguli pot fi adăugate la propria discreție. Recomand să adăugați display: block pentru toate etichetele HTML5.

Unde să plasați regulile de resetare css

Ți-am oferit codul de mai sus, dar unde să-l introduc? Există două opțiuni aici:

• Introduceți-l chiar la începutul foii de stil principale de pe site-ul dvs
• Creați un nou fișier CSS pe server și salvați codul în el, apoi salvați-l și conectați-l la toate paginile INAINTE DE stilul tabelului principal.css .

Pentru mai multe informații despre conectarea unei foi de stil CSS la html, consultați

Dupa parerea mea, a doua varianta cel mai rau, care degradează performanța prin adăugarea unui fișier suplimentar la descărcare. Pe de altă parte, acest lucru vă va facilita gestionarea acestor reguli. Dar de dragul performanței, recomand să folosiți prima opțiune.

Resetarea setărilor este una dintre măsurile pentru a asigura compatibilitatea între browsere a site-ului, adică aceeași afișare în diferite browsere web. Desigur, acestea nu sunt toate măsurile care vor asigura același lucru aspect, despre restul voi scrie mai târziu pe acest blog. Abonați-vă dacă sunteți interesat.

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ă afișeze toate elementele în mod mai consecvent și în conformitate cu standarde moderne. Autorii săi au explorat diferențele dintre stiluri browsere diferite implicit pentru a ajusta doar acele stiluri care au nevoie de 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 activat 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 în partea de sus a fișierului style.css Teme WordPress(după rândurile despre paternitatea și titlul subiectului, adică după textul încadrat de o fracție și un asterisc /* ... */.

@import „reset.css”;

Dacă există o directivă @import în CSS, atunci ar trebui să fie chiar la începutul tabelului (înaintea tuturor regulilor). În caz contrar, browserul îl poate ignora.

Cu toate acestea, pentru a îmbunătăți performanța, foile de stil CSS, de regulă, sunt combinate într-un singur fișier. Prin urmare, nu ar trebui să utilizați @import decât dacă există o nevoie reală.

După cum puteți vedea, resetarea stilurilor în WordPress nu este nimic special.

Mulțumiri

Următoarele surse au fost folosite la scrierea acestui articol.

Prin definiție, dezvoltarea unui fișier de stil implică specificarea Proprietăți CSS noi valori. Fișierele de stil complexe cresc în cele din urmă până la punctul în care valorile CSS trebuie să fie eliminate complet, adică să fie resetate la valorile implicite. În unele cazuri, aceste valori implicite sunt bine cunoscute și ușor de reținut, dar acest lucru nu este valabil pentru toate proprietățile. Din fericire, funcțiile CSS moderne ne oferă o modalitate ușoară de a reseta valorile proprietăților.

Resetați

Să presupunem că ați setat imaginile să plutească spre stânga:

Imag (float: stânga;)

După aceea, imaginile din cazuri speciale, cum ar fi cele cu o clasă .recall, trebuie să fie setate să nu apară, dar nu vă puteți aminti exact cum este scrisă această proprietate.

Cu alte cuvinte, știți că valoarea implicită este „no float”, dar nu vă amintiți cum să setați niciun float. În loc să încercați să vă dați seama cum să scrieți acest lucru, puteți pur și simplu să adăugați următoarea linie în foaia de stil:

Img.recall ( float : initial; )

Există o concepție greșită comună că o valoare implicită resetează valoarea unei proprietăți la prima valoare care a fost setată pentru acea proprietate în fișierul de stil sau la valoarea implicită în Specificații CSS. Dar ambele opțiuni sunt greșite: aplicarea unei valori implicite resetează proprietatea la valoarea implicită pentru browserul utilizatorului.

În majoritatea cazurilor, valoarea implicită va fi aceeași sau similară pentru toate browserele. Această valoare este utilă în special în următoarele situații:

Exemple de utilizare

Valoarea implicită poate fi utilizată pentru a reseta setările de culoare. Culoarea implicită a textului în majoritatea browserelor este neagră, iar codul CSS de mai jos va reseta setările de culoare pentru elementele antetului:

Corp (culoare: hsl(333, 50 % , 25 % ); ) h1, h2, h3 (culoare: initial; )

Vă rugăm să rețineți că negrul nu va fi neapărat culoarea implicită, deoarece această valoare depinde de browsere și, în cele din urmă, de utilizatorii înșiși. La fel și următoarea intrare:

Deoparte (font-family: initial; )

va da rezultate diferite în browsere diferite, iar fontul de ieșire nu va fi neapărat Times New Roman, deoarece browsere diferite pot avea fonturi implicite diferite.

Există mai multe alte utilizări pentru valoarea implicită:

Resetarea valorii z-index a unui element la valoarea sa implicită.

Resetați umplutura și transformați valorile la valorile implicite.

Restricții de utilizare

Unul dintre principalele motive pentru utilizarea relativ rară a CSS implicit este lipsa completă de suport pentru acesta în motor de cautare Explorer, deși alte browsere îl acceptă de mulți ani. in orice caz Browser Edge acceptă această valoare, deci este probabil ca valoarea implicită să apară mai des în fișierele de stil în viitor.

Traducere – Cameră de serviciu

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 din 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 ale 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.

Î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 tă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 resetare rol de afișare pentru browsere mai vechi */ articol, deoparte, detalii, figcaption, figură, subsol, antet, hgroup, meniu, navigare, secțiune ( display: block; ) body ( line-height: 1; ) ol, ul ( listă) -style: none; margin:0; padding:0; ) blockquote, q ( ghilimele: niciunul; ) blockquote:fore, 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ă.