N modurile potrivite de a vă rupe css-ul

Larsat punct și virgulă
Regulile CSS constau în perechi de descrieri - proprietate-valoare, separate de punct și virgulă. În conformitate cu specificația CSS, ultima descriere nu trebuie să se încheie cu un punct și virgulă, deoarece Suportul curl și astfel separă toate regulile de restul ca un perete. De exemplu:







Singura problemă este că dacă decideți să adăugați o altă descriere regulii, puteți uita să puneți punct și virgulă în ultima descriere:

Ca urmare, descrierea font-familie nu va funcționa niciodată, deoarece parserul va trata "font-family" ca parte a valorii proprietatii de culoare. Am pus ultimul punct și virgulă întotdeauna - cumva adaugă o organizație la cod. Și câțiva octeți suplimentari în cantitatea de fișiere css nu joacă un rol important, mai ales când cachează browserul.


Lipsește colonul
De obicei, această eroare apare dacă oamenii sunt instruiți cu viteza de imprimare pe tastatură, mai degrabă decât să scrie CSS. Această eroare este foarte dificil de văzut, deoarece este în mijlocul liniei. Comparați aceste două linii:

După cum puteți vedea, chiar evidențierea codului nu a funcționat - parserul nu a înțeles eroarea.

Atunci când un browser care nu se întreabă, parsează această pereche de reguli:

el doar suflă. Două bretele curbate și o singură închidere: totul din #wrap (în acest exemplu) va fi ignorat. După cum puteți vedea, parserul evidențierii codului nu a reușit, de asemenea, să finalizeze sarcina.

A remedia o astfel de greșeală este foarte ușoară - verificați că înainte de fiecare nouă regulă a existat o bretonă de încheiere curată. Așa cum am menționat deja, în principiu, uitați să o puneți exact.

Misprints în titlurile css-titlu
În general vorbind, sunt o persoană competentă. Cu toate acestea, când sunt "în proces", scriu textul cât de repede îmi fac degetele cu această sarcină și, desigur, uneori greșesc. La erorile obișnuite de dialog nu sunt atât de importante - oamenii aproape întotdeauna pot defini exact ceea ce am vrut să spun. Din păcate, computerul este mai amabil.

Errata în sensuri
Misprints se găsesc nu numai în numele proprietăților. Uneori se întâmplă și când se scriu valori și poate fi mai greu să prindem:

După cum puteți vedea o tipografie în dimensiune - în loc de px există pz. Din această cauză regula nu funcționează.
Un parser care evidențiază codul este o problemă de a mânca - cel mai probabil nu verifică corectitudinea valorilor proprietății.







Misprints în nume de clase sau ID
Nu contează cât de des am creat div cu ID "navigare" - găsesc încă astfel de reguli în codul meu:

Ordine de valori greșite
Unele proprietăți CSS sunt complexe; puteți scrie valorile mai multor proprietăți cu un spațiu într-o singură linie. Din păcate, majoritatea acestor proprietăți sunt foarte exigente în ordinea importanței:

Prima regulă este corectă, iar textul tuturor divs va primi un anumit font și dimensiune. A doua regulă este incorectă, deoarece ordinea proprietăților nu este respectată.
Ordinea corectă a valorilor în astfel de proprietăți poate fi găsită în specificația CSS. Apropo, intotdeauna confunda aceasta ordine, prin urmare, de obicei, scriu proprietati cum ar fi copy-paste, adica de undeva pe care o copiez

Dimensiuni fără o unitate de măsură
Toate proprietățile măsurate trebuie să aibă valori, indicând unitatea de măsură:

Trei dintre ce? Ems? Inci? Pixeli?
În ceea ce privește unitățile de măsură, puteți consulta și specificația CSS.

Reguli de duplicare
În fișierele css mari există reguli complete ale acelorași elemente. Ultimul funcționează întotdeauna - nu fi surprins de ce linia nu este 2m, dar 10px;

Reguli concurente
O problemă similară poate apărea atunci când nu vă așteptați deloc. De exemplu, dacă există următorul XHTML:

Puteți să vă referiți la acest element prin numele clasei sau prin id. Problema apare dacă se face referință atât la clasă, cât și la id:

Ultima regulă adecvată funcționează, la fel ca în paragraful anterior.

Ne adresăm unei clase cu privire la identitatea (sau dimpotrivă)
Aceasta este probabil cea mai frecventă greșeală - de fiecare dată când mă deranjez - să pun un punct sau o latură 🙂:

Și nu se întâmplă nimic, pentru că elementul are id = navigație, nu clasa.

Utilizarea proprietăților inexistente
Nu toate proprietățile CSS sunt numite intuitiv clare. De exemplu:

Utilizarea valorilor inexistente
Eroare similară celei anterioare:

Pentru a evita astfel de erori, studiem cu atenție specificațiile.

Plată nevalidă între proprietate și valoare
Această definiție CSS poate părea corectă chiar și pentru ochiul antrenat:

Cu toate acestea, vedem că proprietatea corectă este atribuită incorect valoarea corectă.

Din mine voi adăuga:
Există, de asemenea, erori legate de lipsa de înțelegere a scrierii scurte a marjelor complexe, a proprietăților de umplere.
Iată câteva exemple de scriere corectă:

Deci - formatul general al valorilor acestei proprietăți este acesta:
margine: [sus] [dreapta] [jos] [stânga];
Dacă nu sunt specificate toate valorile, atunci se aplică următoarele reguli

și anume exemplul anterior este identic

Pentru a zero unitatea de măsură este opțională, este logic - nu este tot același lucru dacă unitățile zero de ce?

4 gânduri despre "N adevărate moduri de a vă rupe CSS"

Există doar un exemplu bun din viața mea - am făcut cursul în asamblare - am scris propriul sistem de operare multitasking și a fost sigilat. în loc de 16 tastat 6 - ați uitat unitatea. Știam că trebuie să scriu 16 - din cartea pe care am citit-o.
Am căutat TOTALIZAT PENTRU 4 LUNĂ ... în cele din urmă nu am obținut un număr legal de cinci ... deși profesorul a înțeles că m-am înscris. pentru că i-am mestecat fiecare linie și am stabilit-o (un țăran cu principii - dar corect - nu avea timp - să devină mai puțin, ceilalți la acel moment au primit deja doar 3)

Da, 4 luni ... simt)

Și totuși, acest lucru este adevărat. Nu mi-am putut imagina nici măcar că cele două linii pe care le-am scris din greșeală din carte pot duce o greșeală ... nu a fost o greșeală -







Trimiteți-le prietenilor: