• Transfer

Acest articol este primul ciclu de pe tema Taming CSS. Astăzi ne vom uita la tehnologie Resetare css..

Pentru ce ai nevoie?

Fiecare browser stabilește stilurile implicite pentru diferite elemente HTML. Cu ajutorul resetării CSS, putem nimici această diferență pentru a asigura browserul de stiluri.

De exemplu, utilizați un element a. În documentul dvs. Cele mai multe browsere ca. Internet Explorer. și Firefox Adaugă link culoarea albastră și c. Cu toate acestea, imaginați-vă că în cinci ani cineva a decis să creeze nou browser. (Să numim Ultrabrowser). Dezvoltatorii de browser nu au plăcut un accent albastru și supărat, așa că au decis să aloce linkuri roșu și bold font.. Se bazează pe acest lucru dacă setați valoarea de bază a stilurilor pentru element a., va fi garantat ca fiind așa cum doriți să îl vedeți și nu la fel de preferat să afișați dezvoltatorii de Ultrabrowser.

Dar acum nu avem niciun liniuță, inclusiv între paragrafe individuale! Ce să fac? Nu mințiți și nu vă fie frică: sub descărcarea noastră descriu regula de care avem nevoie. Face ca acesta să se facă căi diferite: Specificați o liniuță de jos sau deasupra paragrafului, specificați-o în procente, pixeli sau în em.

Cel mai important lucru, browserul joacă acum în conformitate cu regulile noastre, și nu în conformitate cu aceasta. Am decis să fac în acest fel:

* (Marja: 0; Padding: 0;) P (margine: 5px 0 10px 0;)

Ca rezultat, am avut ceea ce ar putea fi văzut în al treilea exemplu.

Puteți crea propriile stiluri pentru resetare, dacă rezolvați o anumită sarcină în proiectul dvs. În ciuda acestui fapt, nu există pas cu pas leadership Prin crearea propriei resetare CSS. Recomandă-ți propriile principii și stil propriu.

Pentru a vă ajuta să faceți o alegere, voi da mai multe linkuri:

1. Mai puțin este mai mult - alegerea mea de resetare CSS (Ed Elliot).

2. Resetarea CSS este primul lucru pentru a vedea browserul

Resetați stilurile după instalarea propriilor stiluri pentru elementele este o abordare incorectă. În acest caz, nimic bun să așteptați afișarea browserului. Amintiți-vă că ați conectat întotdeauna resetarea CSS și apoi toate celelalte stiluri.

Da, înțeleg că a fost ridicol, dar aceasta este una dintre greșelile majore ale dezvoltatorilor de la Mala la Mare. Mulți uită doar de asta.

Unii pot pune o întrebare logică: de ce se întâmplă? Răspunsul este simplu: regulile înregistrate sub textul fișierului CSS (și chiar mai mic prin conexiunea lor în document), suprascrie regulile declarate mai devreme.

Să nu ne mișcăm foarte mult din subiect și să continuăm. Aplicați stilurile Eric Meyer în exemplul nostru, dar după Descrierea proprietăților noastre, așa cum se arată în 4 exemple. Matematica ar spune următoarele: "Ceea ce trebuia să dovedească".

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

Trebuie să (nu, nu m-au forțat) să menționez acest sfat. Utilizarea unui fișier separat pentru resetarea CSS este o practică obișnuită pe care un număr mare de dezvoltatori de sprijin.

De fapt, eu aderă la poziția creației un fișier CSS mare Datorită performanței mai mari a acestei abordări. Dar B. această problemă Tind să fiu de acord cu majoritatea: resetarea CSS ar trebui să fie luată într-un fișier separat (numit de obicei RESET.CSS). În acest caz, îl puteți utiliza în diverse proiecte fără a face nici un efort de a ramura din alte reguli CSS.

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

În ciuda faptului că acest concept funcționează, cererea sa nu este de dorit din cauza incompatibilității cu unele browsere (de exemplu, acest selector este procesat în mod incorect în Internet Explorer). Ar trebui să utilizați această tehnică numai pentru pagini simple, mici, statice și previzibile (dacă ați fi avut deja acest lucru).

Acest sfat este deosebit de important atunci când dezvoltați soluții, cum ar fi teme CMS. Nu puteți prezice în avans cum va fi folosit și cum va fi modificat. Este mai bine să descrieți regulile CSS fundamentale pentru toate elementele decât utilizarea pentru acest mecanism imprevizibil (chiar și un volum mai mic) al selectoarelor universale.

5. Evitați proprietățile redundante atunci când utilizați resetarea CSS

Un alt motiv pentru care nu-mi place un fișier separat pentru resetarea CSS este redundanța potențială a declarațiilor ulterioare ale proprietăților CSS. Repetarea indivizilor din stilurile dvs. printre întregul set de fișiere CSS este o moietonă și ar trebui evitată. Desigur, uneori suntem prea leneși să ținem pasul cu stilul stilurilor și să combinăm unele dintre ele, dar cel puțin încercați!

Să revenim la resetarea CSS de la Eric. Acesta stabilește valorile implicite pentru elementul de înălțime, culor și fundal corp. În felul următor:

Corp (înălțime de linie: 1; Culoare: negru; fundal: alb;)

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

1. culoare de fundal: #CCCCCC;
2. culoare: # 996633;
3. Doriți să repetați orizontal o imagine de fundal specifică.

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

Corp (înălțime de linie: 1; Culoare: # 996633; fundal: #CCC URL (Teles-imagine.gif) Repetați-X sus stânga;)

Nu vă fie frică să modificați resetarea CSS în sine. Stabiliți-o pentru dvs., faceți-o să funcționeze asupra dvs. Schimbați, reconstruiți, eliminați și adăugați-l după cum aveți nevoie în cazul dvs. particular.

Eric Meyer a spus despre acest lucru: "Acesta nu este cazul când toată lumea ar trebui să utilizeze resetarea CSS fără modificări".

Resetați CSS. (Stiluri de resetare) este zero cu CSS, unii dintre parametrii elementelor HTML pe care browserele sunt instalate în mod implicit. De exemplu, aceste elemente includ paragrafe (eticheta), care inițial prezintă câmpuri verticale nonzero (CSS), liste marcate (Etichetă) care nu au nici un câmp, ci și un anumit tip de markeri (CSS) și așa mai departe.

Acum, să ne gândim la ceea ce aveți nevoie de această resetare CSS, ce ne poate da? Ei bine, imaginați-vă că glorificați paginile site-ului dvs. și, în același timp, nu ați modificat câmpurile de paragrafe pe care browserele le-au oferit în mod implicit, deoarece dimensiunea lor a fost aranjată complet. Dar spune-mi, te rog, și unde ați decis că toate browserele lumii, care există deja și apar tot, vor crea câmpuri de aceeași dimensiune? Mai mult, de ce credeți că browserele în care ați testat aspectul dvs. nu se vor schimba în ei următoarele versiuni Dimensiunea acestor câmpuri nu este complet eliminată deloc? Simțiți ce miroase?

Deci, aruncarea CSS, versurile sunt pur și simplu limitate de la astfel de neînțelegeri, adică, ele resetează mai întâi toate valorile "critice" ale proprietăților CSS și apoi îl adaugă înapoi, dar cu dimensiunile proprii. Astfel, puteți fi siguri că în toate browserele site-ul va arăta în mod egal. Cu siguranță nu puteți reseta stilurile, ci pur și simplu pentru a seta aspectul parametrii necesari Elemente, dar există un risc ca undeva ceva să fie ratat și la un anumit punct tot ceea ce "înotă".

Pe baza celor de mai sus, una dintre caracteristicile scutirii CSS este că, după utilizare, multe elemente HTML își pierd aspectul obișnuit. Și dacă pierderea câmpurilor din paragrafe este pentru începători, ceva așteptat pentru începători, atunci, de exemplu, faptul că butoanele create folosind etichete sau au devenit dintr-o dată similare cu textul obișnuit - este o surpriză completă. Dar acest lucru nu ar trebui să fie jenat, deoarece pentru acele stiluri și sunt resetate, astfel încât pedigreerul nu a uitat să le specifice într-unul nou.

Există o mulțime de modalități de a reseta stilurile și cum alegeți - depinde numai de dvs., dar vă pot spune una - cea mai bună resetare este cea pe care ați creat-o, pe baza experienței și obiceiurilor dvs. Dacă nu aveți încă o astfel de experiență, puteți utiliza una dintre opțiunile propuse mai jos.

Specificați întotdeauna stilurile pentru a reseta CSS la începutul codului, altfel unii dintre parametrii nu pot funcționa deoarece priorități în stilcare sunt instalate browsere atunci când procesează pagina HTML și codul CSS.

Resetați CSS cu un selector universal

* (Font-Familia: moștenire; / * toate elementele moștenesc din setul cu cască al fontului părinte * / stil de font: moștenire; / * moșteniți designul * / font-greutate: moștenire; / * moșteniți grasitatea * / vertical-alinign: linia de bază; / * aliniere verticală de bază * / font-dimensiune: 100%; / * dimensiune font 100% * / fundal: transparent; / * fundal al tuturor elemente transparente * / margine: 0; / * Scoateți cadrul * / contur: 0; / * Eliminați contururi * / Margine: 0; / * Scoateți câmpurile * / padding: 0; / * Eliminați linii * /)

Descrierea exemplului

În acest exemplu cu selector universal Stilurile specificate sunt resetate imediat la toate elementele HTML care vor fi prezente pe pagină. După cum puteți vedea, majoritatea proprietăților sunt specificate tocmai pentru plata de siguranță, ca valori și astfel încât browserele să înlocuiască implicit în conformitate cu specificația CSS. Dar, după cum știți deja, în practică, toate acestea sunt complet diferite și dacă proprietatea este într-adevăr moștenită de elemente de la părinții săi în toate browserele de vârf, aceleași câmpuri externe specificate de proprietatea CSS nu sunt întotdeauna inițial egale cu zero.

Dar dimensiunile cadrului (CSS) și contururile (CSS) nu sunt zero în mod implicit, ci deja în conformitate cu specificațiile. Cu toate acestea, grosimea lor a fost resetată, astfel încât ecartamentul să nu uite să o specifice în mod clar unde ar fi necesar.

Resetați CSS de la Yahoo!

Corp, DL, DL, DT, DD, UL, OL, Li, H5, H2, H3, H4, H5, H6, PRE, Formă, set, intrare, textarea, p, blockquote, TH, TD (marginea: 0; Padding: 0;) Fieldset, IMG, ABBR, acronim (frontiera: 0;), caption, cite, cod, dfn, em, puternic, th, var (stil de font: normal, greutate font: normal;) (Colaps de frontieră: colaps; / * frontiere comune pentru tabelele de tabele * / distanța de frontieră: 0; / * distanța zeroasă între celule * /) caption, TH (textul aliniere: stânga; / * alinierea textului la marginea din stânga * /) OL, UL (stil de listă: Nici unul; / * Eliminați markerii listelor * /) H1, H2, H3, H4, H5, H6 (dimensiune font: 100%; greutate font: normal;) Q: Înainte, Q: După (conținut: ""; / * Anulăm citatele de la eticheta Q * /)

Descrierea exemplului

Yahu la un moment dat și-a dezvoltat propria versiune de resetare a ochilor. Aici, proprietățile elementelor specifice se schimbă deja, ceea ce face posibilă obținerea unei mai mari flexibilitate în controlul acestora. specii externe. De exemplu, markerii sunt eliminați din liste, iar eticheta este ghilită utilizând proprietatea CSS. Avantajele acestei abordări sunt evidente, dar minusurile includ un cod mai voluminos și uneori redundant. Dar nimeni nu vă deranjează să schimbați orice resetare CSS la nevoile dvs. Să presupunem că puteți șterge unele inutile pentru dvs. tag selectoare. Sau nu doar eliminați citate, ci le întrebați imediat aspectul necesar.

Resetați CSS de la Eric Meyer

HTML, corp, div, span, applet, obiect, iframe, H1, H2, H3, H4, H5, H6, P, Blockquote, Pre, A, abbr, acronim, adresa, mare, cita, cod, Del, DFN, Em, img, ins, kbd, q, s, sov, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, Li, Fieldset, Formă, etichetă, legendă, masă, caption, tbody, tfoot, tad, tr, th, td, articol, de afară, panza, detalii, încorporate, figura, figura, subsol, antet, hgroup, meniu, nav, ieșire, rubin, Secțiune, Rezumat, Timp, Marcare, Audio, Video (Marja: 0; Frontding: 0; Border: 0; font-dimensiune: 100%; font: moștenire; vertical-alinign: linia de bază;) articol, deoparte, detalii, figuri, Figura, subsol, antet, hgroup, meniu, NAV, secțiune (afișaj: / * Facem obiecte bloc (pentru browsere vechi) * /) corp (linia-înălțime: 1; / * spațierea liniei Text pe pagina * /) OL, UL (List-Style: Nici unul;) Blockquote: înainte, blockquote: după, Q: înainte, Q: după (conținut: ""; / * eliminați citate la Q și Blockquote * / Conținut: Nici unul; / * Adaugă pentru loialitate * /) Blockquote, Q (Quotes: Nici unul; / * altă modalitate de a elimina citate * /) tabel (colaps de frontieră: colaps, spațiere de frontieră: 0;)

Descrierea exemplului

Următorul mod de resetare a CSS a sugerat Eric Meyer (Eric Meyer) - un dezvoltator web cunoscut în anumite cercuri. Aici a adăugat deja o resetare a stilurilor pentru etichete de la HTML 5, care, apropo, la momentul scrierii acestui articol și ei înșiși sunt încă foarte slab susținuți browsere moderne. Dar întotdeauna trebuie să te uiți în perspectivă, nu?

De fapt, acest articol ar putea continua până la infinit, deoarece repet încă o dată, la un moment dat, fiecare ecartament vine la versiunea sa de descărcare sau nu o folosește deloc, bazându-se pe atenția ei.

Multe vertere sunt folosite așa-numitele Resetare css.servind pentru a elimina caracteristicile diferitelor browsere. De fapt, acest fișier Stilurile resetează toate proprietățile implicite CSS. În acest articol, voi demonstra codul acestui dosar și voi spune merită să utilizați resetarea CSS sau nu.

Am văzut multe diferite Resetare css.Toate acestea sunt cam la fel. Puteți utiliza acest lucru:

HTML, corp, div, span, applet, obiect, iframe,
H1, H2, H3, H4, H5, H6, P, BLOCQUOTE, Pre,
A, abbr, acronim, adresa, mare, cite, cod,
Del, DFN, EM, Font, IMG, INS, KBD, Q, S, Samp,
Mici, grevă, puternică, sub, sup, tt, var,
B, U, I, Centrul,
DL, DT, DD, OL, UL, Li,
Fieldset, formular, etichetă, legendă,
Tabel, Caption, Tbody, Tfoot, Tead, Tr, Th, TD (
Context: transparent;
Frontieră: 0;
Font-dimensiune: 100%;
Marja: 0;
Schiță: 0;
Padding: 0;
Aliniere verticală: linia de bază;
}
Corp (
Linie-înălțime: 1;
}
Ol, ul (
Lista de stil: Nici unul;
}
Blockquote, q (
Citate: Nici unul;
}
Blockquote: înainte, blockquote: după,
Î: Înainte, Q: După (
Conținut: "";
Conținut: Nici unul;
}
: Focus (
Schiță: 0;
}
Masa (
Colapsul de frontieră: colaps;
Spațierea frontierei: 0;
}

Cred că utilizarea sa se datorează și atât de ușor de înțeles, dar de ce, de exemplu, nu folosesc, ca mulți alți vertichiri, merită să spunem despre asta. În primul rând, este un fișier suplimentar, În al doilea rând, Înţelegere Pentru procesare, dar cel mai important - îmi place proprietățile implicite. De exemplu, aceleași câmpuri la masă. La urma urmei, toate proprietățile implicite nu le-au plăcut, ci ca cele mai multe optiune optimă Afișarea diferitelor elemente. Vă asigur, resetați padding. Celulele mesei, cel mai probabil, îl veți returna în fișierul principal. Și departe de faptul că valoarea va fi diferită de cea implicită. Deci se pare că o curățăm mai întâi și apoi aceeași revenire. Și împreună cu primele deficiențe (un fișier suplimentar și un cod suplimentar), multe verteri nu sunt folosite deloc. Resetare css..

Oricum, utilizarea descărcării de styling nu este rea, astfel încât să îl puteți folosi în siguranță dacă credeți că simplificarea adaptării site-ului în diferite browsere vă va simplifica cu adevărat în ansamblu.

Toată lumea are regulile lor preinstalate pentru proiectarea paginilor web și a elementelor pe ele (stylesheet de agent de utilizator) conectate automat în mod automat. Cu toate acestea, majoritatea vestorilor atunci când creați un nou proiect adaugă un special resetarea fișierelor. CSS, care face o resetare completă a stilurilor CSS și permite dezvoltatorilor să creeze cu "foaie pură". De ce și cum se face totul - sita în articolul curent.

Dacă vă uitați la imaginea-previzualizarea postului, veți vedea că linia obișnuită din Safari, Chrome și Firefox este afișată absolut. în diverse feluri. Da, uneori regulile din ele coincid, de exemplu, toată lumea ascunde eticheta capului prin afișare: nici una opțiune, însă, în multe cazuri există diferențe grave la redarea obiectelor de pe pagină. Bănuiesc că unii dintre clienții dvs. nu vă pot dori atunci când versiunea finală a aspectului nu arată ca pe aspect.

Prin urmare, dacă sunteți un dezvoltator Web Novice, publicația va fi neechivoc utilă pentru dezvoltarea generală. Este o traducere a acestei note cu o prezentare generală a condițiilor CSS resetate în 2018. Sunt sigur că în 2019 și mai târziu toate acestea vor fi în continuare relevante, pentru că Acest subiect a fost deja mai mare de 10 ani (din momentul eliberării primei soluții similare).

De ce aveți nevoie de o resetare a setărilor CSS

După cum ați înțeles deja din aderare, vă permit să eliminați extensia dintre stilurile de bază ale browserelor web și să le conduceți la o minte standardizată plus minus. Aplicați întotdeauna la început la alte evoluții personalizate. În articolul Erik Meyer despre resetarea CSS timp de zece ani în urmă, este menționat motivul principal al acestei abordări, care ani încă relevante:

Problema constă în faptul că diferite browsere au setările implicite, iar toate acestea nu sunt aceleași. Credem că codul nostru schimbă designul inițial al paginii, dar acest lucru nu este în întregime astfel, iar cu ajutorul fișierelor de resetare putem face acest tip standard de documente mai multe monasse pentru toate programele. Prin urmare, va exista mai puțin timp să cheltuiți pentru combaterea de bază instalații Firefox., Crom etc., în mod implicit.

Dar acum situația este mai puțin contrară aspectului?

Da, într-adevăr, în timpul nostru, mulți parametri din agentul utilizator au devenit mai asemănători. Aproape oriunde, antetul H1 stabilește dimensiunea fontului 2EM și liniuța orizontală 0,67EM. Cu toate acestea, acestea sunt toate modificările relativ noi, iar la minimum, trebuie să țineți cont de sprijinul versiunilor vechi ale programelor, în care nu există o astfel de coerență.

În plus, în unele cazuri, în funcție de tipul de Zeroing CSS (despre acest lucru de mai jos), acest cip este încă util pentru noi chiar dacă au fost luate în considerare doar browserele web moderne.

Dar aplicăm stilurile noastre, depășind baza de bază?

Această abordare este una dintre principalele rezumate ale adversarilor acestei abordări - în cele din urmă, oricum, acei sau alți parametri sunt înlocuiți cu propriul stil.Css, deci de ce să adăugați un alt fișier suplimentar și să reduceți? În ciuda faptului că, în această expresie, este logic, utilizarea resetării este justificată de două momente:

• În primul rând, ajută la scrierea unui cod mai curat. Vom putea să o împărțim în mai multe părți: separat pentru proiectarea proiectului web și un set de reguli orientate sub specificul unor browsere specifice. Acest lucru nu este să urcați fișierul CSS principal cu tot felul de iepure, etc.
• În al doilea rând, toate resetarea cântăresc foarte puțin, iar descărcarea lor nu necesită un numar mare timp.

Tipuri CSS RESET (puteți descărca link-uri în articol)

Pornind de la îndepărtat 2004, când a apărut primele astfel de evoluții, acum există destule metode care diferă în dificultate și specificitatea acestora. De fapt, există 3 goluri care încearcă să rezolve resetarea stilurilor CSS:

1. Fixați eroarea în stilul de agent de utilizator.
2. Anularea designului original non-standard în browserele de internet.
3. Crearea unei baze de stil compatibile universale.

Există opțiuni care decid toate cele trei sarcini și cele care sunt ascuțite doar sub o anumită problemă.

Corecția corecției / erorilor

Luați în considerare primul dintre obiectivele exprimate mai sus. După cum ați înțeles deja, eliminarea diferitelor deficiențe și a puțurilor de browsere este cel mai relevant pentru a sprijini versiunile învechite. Unul dintre exemplele bune ale unei astfel de situații - atunci când după apariția HTML5, același Internet Explorer 9 nu a aplicat tipul corect de afișaj la obiecte noi.

Prin urmare, în soluții după tipul de normalizare.CSS, toate erorile sunt luate în considerare și prelucrate:

/ ** * Adăugați afișajul corect în IE. * / Principal (afișaj: bloc;)

/ ** * Adăugați afișajul corect în IE. * / Main (afișaj: bloc;)

Deoarece aceste acțiuni sunt necesare numai pentru vechiul software, este logic să se utilizeze postprocesor postcs, cum ar fi PostCSS normalizați împreună cu browserlistul pentru a le adăuga numai atunci când trebuie să implementați suportul anumitor browsere.

Un alt exemplu de cod de la CSS PURE, care este potrivit, incluzând programe web moderne - fixați elementele de afișare și atributul ascuns.

[Ascuns] (Afișaj: Nici unul! Important; // unul dintre cazurile bune de utilizare de! Important }

(Afișaj: Nici unul! Important; // unul dintre cazurile bune de utilizare de! IMPORTANT)

Scoateți stilurile ciudate ale browserelor

Acesta este al doilea motiv pentru resetarea setărilor CSS. În principiu, fiecare dintre opiniile lor cu privire la executarea în stilul de agent de utilizator este considerată "specifică". Definiția autorului a nota inițială este destul de logică: acesta este un stil care nu este o versiune "goală" a afișajului elementului.. De exemplu, adăugarea de linii pentru titluri în 2em (câte o fac), ideea nu este rea, dar de ce este 2EM, și nu 3EM sau nu 4em. În acest caz, opțiunea de bază ar fi absența oricărei incidență, adică marjă zero.

Mai simplu abordare universalăEliminarea indicatoarelor / câmpului de câmp:

* (Marja: 0; Hadding: 0;)

* (Marja: 0; Hadding: 0;)

Această metodă este prea radicală, deoarece Se aplică tuturor obiectelor, chiar și în cazul în care nu vă așteptați (în aceeași intrare). În mod alternativ, se utilizează adesea CSS Eric Meyer, care îndepărtează parametrii marginii / umpluturilor, marginilor și dimensiunii fontului (în 0 sau nici unul) în care este justificată logic:

HTML, corp, div, span, applet, obiect, iframe, H1, H2, H3, H4, H5, H6, P, Blockquote, Pre, A, abbr, acronim, adresa, mare, cita, cod, Del, DFN, Em, img, ins, kbd, q, s, sov, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, Li, Fieldset, Formă, etichetă, legendă, masă, caption, tbody, tfoot, tad, tr, th, td, articol, de afară, panza, detalii, încorporate, figura, figura, subsol, antet, hgroup, meniu, nav, ieșire, rubin, Secțiune, Rezumat, Timp, Marcare, Audio, Video (margine: 0; Padding: 0; Border: 0; Font - Dimensiune: 100%; Font: moștenire; vertical-alinign: linia de bază;)

hTML, corp, div, span, applet, obiect, iframe, H1, H2, H3, H4, H5, H6, P, Blockquote, Pre, A, abbr, acronim, adresa, mare, cita, cod, Del, DFN, Em, img, ins, kbd, q, s, sov, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, Li, Fieldset, Formă, etichetă, legendă, masă, caption, tbody, tfoot, tad, tr, th, td, articol, de afară, panza, detalii, încorporate, figura, figura, subsol, antet, hgroup, meniu, nav, ieșire, rubin, Secțiune, Rezumat, Timp, Marcare, Audio, Video (Marginea: 0; Padding: 0; Border: 0; Font-Dimensiune: 100%; Font: moștenire; vertical-align: linia de bază;)

Stiluri de suprascriere

Spre deosebire de secțiunea anterioară, aici, sarcina principală nu este de a reseta CSS de la anumite obiecte, ci să le suprascrie cu propriile valori curente.

De exemplu, în loc de a seta dimensiunea de 1em și marginile \u003d 0 în Sanitize.Css, alte valori sunt setate:

/ ** * Corectați dimensiunea fontului și marginea elementelor H1 "în contextele" secțiunii "și a articolului" în Chrome, Firefox și Safari. * / H1 (font-dimensiune: 2EM; margine: 0. 67EM 0;)

/ ** * Corectați dimensiunea fontului și marginea elementelor H1 "în contextele" secțiunii "și a articolului" în crom, Firefox și Safari. * / H1 (font-dimensiune: 2em; margine: 0.67EM 0;)

Reboot-ul lui Bootstrap va găsi o altă ilustrare a sarcinii actuale. Dezvoltatorii au mers puțin și au prescris fonturi și culori de fundal pentru corp.

// Corp // // 1. Scoateți marginea în toate browserele. // 2. Ca cea mai bună practică, aplicați o valoare implicită "fundal-culoare" // 3. Setați o valoare inițială de modificare a textului explicit, astfel încât să putem folosi ulterior // valoarea "moștenită a lucrurilor ca"	`Elemente. Corp (marja: 0; // 1 Font-Familie: $ font - bază de familie; font-dimensiune: $ font - bază - bază; font-greutate: $ font - greutate-bază; Linie-înălțime: $ linia - înălțime - bază; culoare: $ corp - culoare; text-alinign: stânga; // 3 fundal - culoare: $ corp - bg; / 2)

// corp //// 1. Scoateți marginea în toate browserele. // 2. Ca cea mai bună practică, aplicați o valoare implicită "fundal-culoare" // 3. Setați o valoare inițială de aliniere a textului explicit, astfel încât să putem folosi mai târziu valoarea / "moștenirea" asupra lucrurilor ca ` `Elemente. Corp (margine: 0; // 1 Font-Family: $ font-fata-bază; font-dimensiune: $ font-size-bază; font-greutate: $ font-greutate-bază; linia-înălțime: $ înălțime -Bază; Culoare: $ Culoare-culoare; Text-align: stânga; // 3 fundal-culoare: $ body-bg; // 2)

TOTAL. Ce să alegeți

În nota originală există rezultatul sondajului corespunzător de la

În acest articol vom vorbi despre resetarea stilurilor și luați în considerare un exemplu de creare a unui astfel de fișier de resetare.CSS.

Ideea de a arunca stiluri a apărut acum 10 ani. Care au ajuns la concluzia că, cu ajutorul unui set mic de stiluri CSS, a adus vederea paginii în toate browserele la aceleași. Bineînțeles că nu funcționează întotdeauna, dar unele momente pot fi corectate - de exemplu, granița nu înțelege unde se desfășoară în unele versiuni. Sau accident vascular cerebral albastru (contur) în câmpuri.

Nu pentru un dezvoltator front-end nu este un secret că browserele sunt foarte pretențioase și fiecare procese elemente HTML. În felul său, adăugând stilurile standard.

Din moment ce aceste idei au luat foc pentru o lungă perioadă de timp, nu este surprinzător faptul că există deja fișiere gata Resetați, de obicei numit resetare.css și conectați la toate proiectele.

De ce In. fișier separat.? Da, doar 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 (Domeniul Public) * / HTML, corp, div, span, apple, obiect, iframe, H5, H2, H3, H4, H5, H6, P, Blockquote, Pre, A, Abbr, Acronim, Adresa, Mare, cite, cod, del, dfn, em, img, ins, kbd, q, s, sov, mic, grevă, puternic, sub, sup, tt, var, b, u, i, tt, var, b, U, I, Center, DL, DT, DD, OL, UL, Li, set, Formă, Etichetă, Legendă, Tabelă, Tation, Tbod, Tfoot, Tead, Tr, Th, Td, Articol, deoparte, Canvas, detalii, Embed, Figura, Figuri, Footer, Header, HGroup, Meniu, Nav, Ieșire, Ruby, Secțiune, Rezumat, Timp, Marcare, Audio, Video (margine: 0; Hadding: 0; Border: 0; Font-dimensiune: 100% ; font: moștenire; vertical-align: linia de bază;) / * resetarea rolului de afișare HTML5 pentru browserele mai vechi * / articol, deoparte, detalii, figuri, figuri, subsol, antet, hgroup, meniu, nav, secțiune (afișaj: bloc; ) Corpul (înălțimea liniei: 1;) OL, UL (List-Style: Nici unul;) Blockquote, Q (Quotes: Nici unul;) Blockquote: înainte, Blockquote: Afterter, Q: Înainte, Q: După (Conținut: ""; Conținut: Nici unul;) Tabel (colaps de frontieră: C. Ollapse; Spațierea frontierei: 0; )

Acesta este doar standardul acestui fișier luat de un anumit cerc de dezvoltatori web.

Vă sfătuiesc, indiferent dacă sunteți un programator experimentat sau începători pentru a vă dezvolta fișierul de resetare. Ca bază, puteți lua standardul descris mai sus, completați-l cu selectorii sau schimbați cele existente. Iată un exemplu al unui astfel de dosar pe care l-am dezvoltat pentru mine:

intrare, textarea, butonul A, selectați (contur: none) img (graniță: nici unul;) HR (clar: ambele; margine: nici unul; fundal: nici unul;) * (fundal-repetare: fără repetare;) / * html5 Resetarea rolului de afișare pentru browserele mai vechi * / articol, deoparte, detalii, figura, figura, subsol, antet, hgroup, meniu, nav, secțiune (afișaj: bloc;) corp (linia-înălțime: 1;) OL, UL (listă -Style: none; margine: 0; (Prăbușirea frontierei: colaps, spațierea frontierei: 0;)

Puteți face kip oricare dintre codurile de mai sus pentru uz personal, dar dacă îl utilizați în articolele dvs. - puneți un link la sursă.