Resetați umplutura CSS. Resetați stilurile folosind CSS Reset. Evitați declarațiile de proprietate redundante când utilizați resetarea CSS

💖 Îți place? Distribuie link-ul prietenilor tăi

Fiecare are propriile reguli prestabilite pentru proiectarea paginilor web și elementele de pe ele (foaia de stil user agent), care sunt conectate automat în mod implicit. Cu toate acestea, atunci când creează un nou proiect, majoritatea designerilor de layout îi adaugă un fișier special Reset CSS, care resetează complet stilurile CSS și le permite dezvoltatorilor să creeze de la zero. Voi explica de ce și cum se face toate acestea în articolul curent.

Dacă te uiți la imaginea de previzualizare a postării, vei vedea că o linie obișnuită este afișată în moduri complet diferite în Safari, Chrome și Firefox. Da, uneori regulile sunt aceleași, de exemplu, toată lumea ascunde eticheta head prin intermediul afișajului: opțiunea, dar în multe cazuri există diferențe serioase în modul în care sunt redate obiectele pe pagină! Bănuiesc că unora dintre clienții tăi ar putea să nu le placă atunci când aspectul final arată diferit de aspectul.

Prin urmare, dacă ești un dezvoltator web începător, publicația va fi cu siguranță utilă pentru dezvoltarea ta generală. Este o traducere a acestei note cu o privire de ansamblu asupra stării de lucruri în domeniul resetărilor CSS în 2018. Sunt sigur că în 2019 și mai târziu toate acestea vor fi în continuare relevante, pentru că... Acest subiect are deja mai mult de 10 ani (de la lansarea primei astfel de soluții).

De ce trebuie să resetați setările CSS?

După cum ați înțeles deja din introducere, acestea vă permit să eliminați diferențele dintre stilurile de bază ale browserelor web și să le aduceți într-o formă standardizată, plus sau minus. Ele sunt întotdeauna folosite la început înaintea dezvoltării altor utilizatori. Articolul lui Eric Meyer despre Resetarea CSS de acum zece ani menționează principalul motiv pentru această abordare, care este încă relevantă ani mai târziu:

Problema este că diferite browsere au propriile setări implicite și nu sunt toate la fel. Credem că codul nostru modifică designul inițial al paginii, dar acest lucru nu este în întregime adevărat, iar cu ajutorul fișierelor de resetare putem uniformiza această vizualizare standard a documentului pentru toate programele. Prin urmare, va trebui să petreceți mai puțin timp luptând cu setările implicite de bază ale Firefox, Chrome etc.

Dar acum situația în aspect este mai puțin controversată?

Da, într-adevăr, în zilele noastre mulți parametri din agentul utilizator au devenit mai asemănători. Aproape peste tot, titlului H1 primește o dimensiune a fontului de 2 em și o marjă orizontală de 0,67 em. Cu toate acestea, toate acestea sunt modificări relativ noi și, cel puțin, trebuie să luați în considerare suportul pentru versiunile mai vechi ale programelor în care nu există o astfel de consecvență.

În plus, în unele cazuri, în funcție de tipul de anulare CSS (mai multe despre asta mai jos), am avea totuși nevoie de această funcție, chiar dacă ne-am uita doar la browserele web moderne.

Dar ne aplicăm propriile stiluri, depășindu-le pe cele de bază?

Aceasta este una dintre principalele teze ale oponenților acestei abordări - în cele din urmă, totuși, anumiți parametri sunt înlocuiți cu propriul stil.css, așa că de ce să adăugați un alt fișier suplimentar și să reduceți? În ciuda faptului că această expresie are sens, utilizarea unei resetare este justificată de două puncte:

  • În primul rând, vă ajută să scrieți cod mai curat. Îl putem împărți în mai multe părți: separat pentru proiectarea proiectului web în sine și un set de reguli axate pe specificul browserelor specifice. Acest lucru vă va permite să nu aglomerați fișierul CSS principal cu tot felul de hack-uri IE etc.
  • În al doilea rând, toate resetările cântăresc foarte puțin, iar încărcarea lor nu necesită mult timp.

Tipuri de resetare CSS (puteți descărca din linkurile din articol)

Începând cu îndepărtatul 2004, când au apărut primele astfel de dezvoltări, există acum destul de multe metode care diferă în complexitate și specificitate. În esență, există 3 obiective pe care resetarea stilurilor CSS încearcă să le rezolve:

  1. Remedierea erorilor din foaia de stil a agentului utilizator.
  2. Eliminarea designului original non-standard din browserele de internet.
  3. Crearea unei baze de stil universal compatibile.

Există opțiuni care rezolvă toate cele trei probleme și cele care sunt adaptate doar unei probleme specifice.

Corectare/corectare erori

Să luăm în considerare primul dintre obiectivele menționate mai sus. După cum înțelegeți deja, eliminarea diferitelor deficiențe și blocaje ale browserelor este cea mai relevantă pentru a susține versiunile învechite. Un bun exemplu al acestei situații este atunci când, după apariția HTML5, același Internet Explorer 9 nu a aplicat tipul corect de afișare noilor obiecte.

Prin urmare, în soluții precum Normalize.css, toate erorile sunt luate în considerare și procesate:

/** * Adăugați afișarea corectă în IE. */ principal (afișare: bloc; )

/** * Adăugați afișarea corectă în IE. */ main ( display: block; )

Deoarece aceste acțiuni sunt necesare doar pentru software-ul mai vechi, este logic să utilizați un post-procesor PostCSS, cum ar fi PostCSS Normalize împreună cu Browserlist, pentru a le adăuga numai atunci când trebuie să acceptați anumite browsere.

Un alt exemplu de cod de la Pure CSS, care este potrivit și pentru programele web moderne, este corectarea elementelor de afișare și a atributului ascuns.

[ ascuns] ( afișare: niciunul ! important; // Unul dintre cele mai bune cazuri de utilizare a !important }

( afișare: niciun !important; // Unul dintre cele mai bune cazuri de utilizare a !important )

Eliminarea stilurilor de browser specifice

Acesta este al doilea motiv pentru resetarea setărilor CSS. În principiu, fiecare are propria părere cu privire la ce design din foaia de stil user-agent este considerat „peculiar”. Definiția autorului notei originale este destul de logică: acesta este un stil care nu este o versiune „naked” a afișajului elementului. De exemplu, adăugarea de umplutură 2em pentru titluri (așa cum fac mulți) nu este o idee rea, dar de ce 2em și nu 3em sau 4em. În acest caz, opțiunea de bază ar fi absența oricărei indentări, adică marja zero.

Cea mai simplă abordare universală care elimină umplutura/marginile din etichete este:

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

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

Această metodă este prea radicală, deoarece se aplică tuturor obiectelor, chiar și celor la care nu vă așteptați (în aceeași intrare). Ca alternativă, este mai des folosit Eric Meyer Reset CSS, care elimină parametrii de marjă/padding, chenarele și dimensiunea fontului (la 0 sau niciunul) acolo unde este justificat logic:

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ă; )

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ă; )

Stiluri de suprascriere

Spre deosebire de secțiunea anterioară, aici sarcina principală nu este de a reseta CSS-ul anumitor obiecte, ci de a le redefini cu propriile valori reale.

De exemplu, în loc să setați toate fonturile la dimensiunea 1em și marginile = 0, Sanitize.css este setat la alte valori:

/** * Corectați dimensiunea fontului și marginea elementelor „h1” din contextele „secțiune” și * „articol” în Chrome, Firefox și Safari. */ h1 (dimensiunea fontului: 2em; marja: 0, 67em 0; )

/** * Corectați dimensiunea fontului și marginea elementelor „h1” din contextele „secțiune” și * „articol” în Chrome, Firefox și Safari. */ h1 ( dimensiunea fontului: 2em; marja: 0.67em 0; )

În Bootstrap's Reboot veți găsi o altă ilustrare a sarcinii curente. Dezvoltatorii au mers puțin mai departe și au specificat fonturile și culoarea de fundal pentru corp.

// Corp // // 1. Eliminați marginea din toate browserele. // 2. Ca cea mai bună practică, aplicați o „culoare de fundal” implicită. // 3. Setați o valoare inițială explicită de aliniere a textului, astfel încât să putem folosi mai târziu // valoarea `moștenire` pe lucruri precum ` `elementele. body ( margine: 0 ; // 1 font- familie: $font - familie- bază; font- size: $font - dimensiune-bază; font-greutate: $font - greutate- bază; linie-înălțime: $line - înălțime - culoare de bază: $corp - culoarea text- align: stânga // 3 culoare de fundal: $corp - bg;

// Corp // // 1. Eliminați marginea din toate browserele. // 2. Ca cea mai bună practică, aplicați o „culoare de fundal” implicită. // 3. Setați o valoare inițială explicită de aliniere a textului, astfel încât să putem folosi ulterior // valoarea „moștenire” pentru lucruri precum „ `elementele. body ( marja: 0; // 1 familie de fonturi: $font-family-base; dimensiunea fontului: $font-size-base; greutatea fontului: $font-weight-base; line-height: $line-height -culoare de bază: $corp-culoare: stânga // 3 culoare de fundal;

Total. Ce să alegi

Nota originală conține rezultatul unui sondaj corespunzător de la

Resetați CSS(resetarea stilului) este o resetare folosind CSS, niște parametri ai elementelor HTML pe care browserele îi stabilesc implicit. De exemplu, astfel de elemente includ paragrafe (tag), care au inițial câmpuri verticale diferite de zero (CSS), liste cu marcatori (tag), care au deja nu numai câmpuri, ci și markeri de un anumit tip (CSS) și așa mai departe.

Acum să ne gândim la ce este această resetare CSS, ce ne poate oferi? Ei bine, imaginați-vă că ați aranjat paginile site-ului dvs. și nu ați modificat marjele de paragraf pe care browserele le ofereau în mod implicit, deoarece dimensiunea lor ți se potrivea destul de bine. Dar spuneți-mi, vă rog, de ce ați decis că toate browserele din lume care există deja și vor apărea vor crea câmpuri de aceeași dimensiune? Mai mult, de ce crezi că browserele în care ți-ai testat aspectul nu vor schimba dimensiunea acestor câmpuri în următoarele versiuni sau le vor elimina cu totul? Simți cum miroase?

Deci, prin resetarea CSS, designerii de layout pur și simplu se protejează de astfel de neînțelegeri, adică mai întâi resetează toate valorile „critice” ale proprietăților CSS pentru elemente și apoi, după cum este necesar, le adaugă înapoi, dar cu propriile dimensiuni. În acest fel, poți fi sigur că site-ul va arăta la fel în toate browserele. Puteți, desigur, să nu resetați stilurile, ci pur și simplu să setați parametrii necesari elementelor pe măsură ce aspectul progresează, dar există riscul ca ceva să fie ratat undeva și la un moment dat totul va „pluti”.

Pe baza celor de mai sus, una dintre caracteristicile resetării CSS este că, după aplicarea acestuia, multe elemente HTML își pierd aspectul obișnuit. Și dacă pierderea marjelor pentru paragrafe este ceva așteptat pentru începători, atunci, de exemplu, faptul că butoanele create folosind etichete au devenit brusc similare în exterior cu textul obișnuit este o surpriză completă. Dar acest lucru nu ar trebui să vă încurce, deoarece stilurile sunt resetate în acest scop, astfel încât designerul de layout să nu uite să le specifice din nou mai târziu.

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

Specificați întotdeauna stilurile de resetare CSS chiar la începutul codului, altfel unele dintre opțiuni pot să nu funcționeze din cauza priorități de stil, care sunt setate de browsere atunci când procesează codul HTML și CSS al paginii.

Resetarea CSS cu un selector universal

* ( font-family: inherit; /* toate elementele moștenesc fontul fontului de la părintele lor */ font-style: inherit; /* moștenește stilul */ font-weight: moștenește; /* moștenește caracterul îndrăzneț */ vertical-align : linia de bază /* aliniere verticală la linia de bază */ dimensiunea fontului: 100% */ fundal: transparent */ marginea: 0; / outline: 0 /* remove outlines */ margin: 0 /* remove margins */ padding: 0;

Descrierea exemplului

În acest exemplu, folosind selector universal stilurile specificate sunt resetate imediat pentru toate elementele HTML care vor fi prezente pe pagină. După cum puteți vedea, majoritatea proprietăților sunt specificate doar pentru a fi în siguranță, deoarece valorile lor corespund deja cu cele pe care browserele ar trebui să le stabilească în mod implicit conform specificației CSS. Dar, după cum știți deja, în practică toate acestea sunt complet greșite și dacă proprietatea este într-adevăr moștenită de elementele părinților săi în toate browserele de top, atunci aceleași marje externe specificate de proprietatea CSS nu sunt întotdeauna inițial egale cu zero.

Dar dimensiunile cadrelor (CSS) și contururilor (CSS) nu sunt egale cu zero în mod implicit, ci conform specificației. Cu toate acestea, grosimea lor a fost, de asemenea, resetată la zero, astfel încât designerul de layout să nu uite să o indice în mod explicit acolo unde este necesar.

Resetați CSS de la Yahoo!

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td (marja: 0; padding: 0 ) fieldset,img,abbr,acronym (border: 0; ) address,caption,cite,code,dfn,em,strong,th,var (font-style: normal; font-weight: normal; ) tabel ( border-collapse: collapse; /* margini comune pentru celulele tabelului */ border-spacing: 0; /* resetați distanța dintre celule */ ) caption,th ( text-align: left; /* aliniați textul la stânga * / ) ol,ul (list-style: none; /* eliminați marcatorii listei */ ) h1,h2,h3,h4,h5,h6 (dimensiunea fontului: 100%; greutatea fontului: normal; ) q:înainte, q :după (conținut: ""; /* eliminați ghilimelele din eticheta Q */ )

Descrierea exemplului

La un moment dat, compania Yahoo și-a dezvoltat propria versiune de resetare a stilurilor. Aici proprietățile elementelor specifice sunt deja modificate, ceea ce permite o mai mare flexibilitate în controlul aspectului lor. De exemplu, aici marcatoarele au fost eliminate din liste, iar ghilimele au fost eliminate din etichete folosind proprietatea CSS. Avantajele acestei abordări sunt evidente, dar dezavantajele includ cod mai voluminos și uneori redundant. Dar nimeni nu te împiedică să schimbi orice resetare CSS pentru a se potrivi nevoilor tale. Să presupunem că puteți elimina unele de care nu aveți nevoie selectoare de etichete sau nu doar elimina ghilimele, ci da-le imediat aspectul necesar.

Resetarea CSS de către Eric Meyer

html,body,div,span,applet,obiect,iframe,h1,h2,h3,h4,h5,h6,p, blockquote,pre,a,abbr,acronim,adresă,big,cite,code,del,dfn, em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var, b,u,i,center,dl,dt,dd,ol,ul,li,fieldset, formular,etichetă,legendă,tabel,legendă,corp,tfoot,thead,tr,th,td,articol,deoparte,pânză,detalii,incorporare,figura,figcaption,footer,header,hgroup,meniu,nav, output,ruby, secțiune, rezumat, timp, marcaj, audio, video ( marjă: 0; umplutură: 0; chenar: 0; dimensiunea fontului: 100%; font: moștenire; aliniere verticală: linie de bază; ) articol, deoparte, detalii, figcaption, figură, subsol, antet, grup h, meniu, navigare, secțiune ( afișare: bloc; /* bloc de elemente (pentru browsere mai vechi) */ ) corp ( înălțimea liniilor: 1; /* spațierea textului de pe pagină */ ) ol ,ul (list-style: none; ) blockquote:before,blockquote:after, q:before,q:after (conținut: ""; /* Eliminați ghilimele din Q și BLOCKQUOTE */ conținut: niciunul; /* adăugați pentru măsură bună */ ) blockquote,q ( ghilimele: niciunul; /* un alt mod de a elimina ghilimele */ ) tabel ( border-collapse: collapse; distanță-limită: 0; )

Descrierea exemplului

O altă metodă de resetare CSS a fost propusă de Eric Meyer, un dezvoltator web cunoscut în anumite cercuri. Aici a adăugat deja o resetare a stilurilor pentru etichete din HTML 5, care, apropo, la momentul scrierii acestui articol sunt încă foarte slab suportate de browserele moderne. Dar trebuie să te uiți mereu în viitor, nu?

De fapt, acest articol ar putea fi continuat la nesfârșit, deoarece, repet încă o dată, la un moment dat fiecare designer de layout vine la propria sa opțiune de resetare sau nu o folosește deloc, bazându-se pe propria sa atenție.

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

  1. 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, nu am fost nicidecum 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 fel, îl puteți folosi în diferite proiecte fără a fi nevoie să depuneți 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 pentru aceasta.

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:
  1. culoare de fundal: #cccccc;
  2. culoare: #996633;
  3. 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”.

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

  1. 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, nu am fost nicidecum 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 fel, îl puteți folosi în diferite proiecte fără a fi nevoie să depuneți 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 pentru aceasta.

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:
  1. culoare de fundal: #cccccc;
  2. culoare: #996633;
  3. 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 umplutura 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.