4 tehnici simple pentru a depana rapid și repara codul CSS în aproape orice browser

4 tehnici simple pentru a depana rapid și repara codul CSS în aproape orice browser

ați proiectat aspectul perfect pentru site-ul dvs. noi și viitoare. Dar acum conversia tot ce frumos Photoshop PSD fișier stratificat într-un cod perfect pixel este partea provocatoare. Nu este o provocare pentru că nu știi cum să Cod, dar mai provocatoare, deoarece diferite browsere face codul în mod diferit, chiar și atunci când utilizați un cod CSS complet valid pentru a afișa că codul HTML5 semantic minunat le-ați scris. Acest lucru este și mai frustrant atunci când remedierea unei erori într-un browser devine acum o nouă eroare într-un alt browser. Chiar dacă acest lucru nu este o provocare, acum imaginați-vă că sunteți desemnat să remediați codul altcuiva care este peste tot. Adesea, acest ultim caz este cel care te face să-ți tragi părul și să spui numeroase WTFs înainte de a înțelege complet ce se întâmplă în codul lor, pentru că probabil îți cunoști întreaga foaie de stil pe de rost și acest nou cod nu este aproape de orice convenție de codificare. Cu toate acestea, momentul de a obține în jos și murdar cu depanare că codul CSS este mult mai simplu și mai puțin frustrant decât înainte, datorită acestor instrumente și tehnici foarte simple.

1) Inspectați instrumentul Element

inspectați elementul de departe este cel mai bun instrument pentru a începe depanarea orice CSS. Dacă dezvoltați site-uri web, atunci aveți nevoie de setul potrivit de instrumente de dezvoltare web. Și, din fericire, Inspect Element este acum integrat nativ cu toate browserele web moderne ca parte a instrumentelor lor de dezvoltare. Acest instrument vă permite să selectați elementul specific din pagina pe care doriți să o remediați și să vedeți imediat ce reguli CSS sunt aplicate acelui element care determină afișarea elementului selectat în acest fel. Tot ce trebuie să faceți este să faceți clic dreapta și să selectați „inspectați elementul” din meniul contextual.

acum aveți acces vizual complet la toate regulile care sunt calculate pentru acel element. Dacă nu ați selectat elementul potrivit, puteți pur și simplu să faceți clic pe sursă și să indicați exact elementul pe care doriți să îl diagnosticați. După cum vedeți în captura de ecran de mai sus, acum Puteți modifica regulile CSS. Folosind caseta de selectare din partea stângă a fiecărei proprietăți CSS, puteți comuta acea proprietate sau chiar Faceți clic pe proprietate și modificați valoarea acesteia sau chiar apăsați tasta enter și adăugați noi reguli pentru elementul dvs. Chiar și cel mai uimitor este cât de ușor este posibil să depanați o stare de hover a unui element prin simpla deschidere a meniului derulant de lângă elementul selectat și alegeți :hover state. După cum puteți vedea în panoul din dreapta, acest instrument uimitor vă arată chiar fișierul foii de stil și numărul liniei regulii CSS care se execută în această pagină. Mai mult decât atât, este mai ușor de înțeles pentru a înțelege de ce elementul nostru are o umplutură de sus și de jos 10px în loc de 5px, deoarece regula de la linia 1026 de stil.css al interogării noastre media CSS suprascrie vechea regulă pe linia 916 a aceluiași fișier. Este chiar posibil să vedeți modelul cutiei elementului selectat cu dimensiunile sale actuale fără a utiliza o riglă terță parte sau un instrument de măsurare. Având această bogăție de informații acum face treaba noastră de depanare mult mai ușor. Să presupunem că câmpul formularului de e-mail al foii de stil nu este similar cu alte elemente de intrare și vă întrebați cum ați putea rezolva acest lucru. Inspectați acel element și aflați că, deoarece utilizați noile tipuri de câmpuri de intrare HTML5, designerul dvs. de teme nu a inclus reguli CSS pentru input, astfel încât să adăugați acest selector la foaia de stil.

input,input{ border: 1px solid #ccc;}

Google Chrome are, de asemenea, instrumente similare pentru dezvoltatori care permit aceleași caracteristici. Este chiar posibil să vă schimbați modul de depanare la rezoluția ecranului unui dispozitiv pe care doriți să-l testați aspectul și să aflați cum se comportă CSS-ul interogărilor media în aceste condiții.

aceste instrumente pentru dezvoltatori au capacități foarte puternice chiar și dincolo de dezvoltarea CSS, cum ar fi inspecția DOM, profilarea JavaScript, consola JavaScript, instrumentele de monitorizare a resurselor și întregul alt set de caracteristici care au nevoie de propria secțiune tutorial dincolo de acest articol. După cum ați putut vedea în imaginea de mai sus, în Chrome developer tools, este chiar posibil să emulați un agent de utilizator diferit al browserului sau chiar să emulați evenimente tactile, cum ar fi glisarea. Cu aceste instrumente nici nu trebuie să depanați activ CSS-ul în browserul mobil al smartphone-ului dvs., cel puțin într-o oarecare măsură.

ce instrumente de dezvoltare a browserului sunt cele mai bune este o întrebare pe care o veți afla experimentând. La sfârșitul zilei, totul depinde de ceea ce încercați să realizați și dacă setul de instrumente vă permite să ajungeți la obiectivul final. Eu personal folosesc toate aceste instrumente în avantajul meu. Fiecare are ceva care îmi place și mi se pare util atunci când vreau să-mi depan codul. De exemplu, mi se pare că reprezentarea mică a culorilor pătrate a culorilor hexagonale de lângă proprietățile culorii CSS este oarecum utilă, chiar dacă pot procesa culoarea RGB în capul meu și pot obține o vizualizare aproximativă a Palatului de culoare, aceste mici diferențe mă fac să alternez între aceste instrumente pentru dezvoltatori.

Firebug

Firebug a fost unul dintre primele instrumente care au furnizat funcția inspector. Este unul dintre cele mai populare instrumente de dezvoltare web, cu aproape 3 milioane de utilizatori zilnici medii. Începând cu această scriere, instrumentele de depanare Firefox CSS sunt suficient de adecvate pentru a nu folosi Firebug, totuși pentru depanarea JavaScript în Firefox încă folosesc Firebug.

ti-e frica de IE7? Nu mai fi

s-ar putea să fiți surprins, dar Internet Explorer are chiar funcția inspectați elementul (Ctrl+B) în instrumentele lor de dezvoltare (F12). Deși nu este la fel de prietenos ca instrumentele de dezvoltare ale altor browsere, totuși această caracteristică încorporată în Internet Explorer 9 este foarte utilă pentru testarea machetelor dvs. în modul emulat IE7 și IE8. În zilele în care niciunul dintre aceste instrumente pentru dezvoltatori nu era disponibil pentru depanarea browserelor IE vechi, această a doua tehnică era de obicei foarte utilă.

2) depanare în stil

la fel de bun ca inspecta Element este, uneori, fie nu aveți acces la acest instrument, cum ar fi browsere mobile, sau doriți să ajustați stilul de câteva elemente în pagina în loc de doar unul specific. Îmi place să știu limitele elementului sunt styling, așa că știu dacă există orice overflows, sau probleme plutitoare, sau etc… din acest motiv, am adăuga o culoare de fundal luminos și vizibil la elementul activ sunt styling și să ia culoarea de fundal o dată stilul se face. Uneori, mă duc înainte și înapoi ajustarea acestor elemente, așa că am muta doar codul de depanare la sfârșitul foaia mea de stil și comentați-l, și decomentați-l o dată am nevoie de ea din nou. În acest fel, pot comuta rapid modul de depanare și pot vedea cum este poziționat fiecare element pe ecran.

care rezultă în …

pentru acest exemplu am adăugat doar codul de depanare la elementele principale bloc structura în pagina mea. Acum pot spune unde începe fiecare postare și cât de mult decalaj există între fiecare postare sau element widget din bara laterală și, dacă vreau să adaug un decalaj între bara laterală și conținutul principal, îl pot vedea vizual în culori strălucitoare.

opusul acestui lucru este de asemenea posibil, prin definirea unei serii de reguli de depanare și adăugarea acelei clase la orice element dorim să vedem. De exemplu, mai sus am definit o nouă clasă numită debug cu următorul cod.

.debug{ border:1px solid red; }

și ori de câte ori vreau să depan orice element, pur și simplu adaug clasa de depanare la acel element.

<div class="foo debug">Div element with foo and debug classes</div>

3) Debug CSS folosind JavaScript

aceasta tehnica este foarte mult similar cu mai sus, cu toate acestea, uneori, pentru unele motive ciudate se întâmplă că situația de mai sus nu este fezabilă. Aceasta este o bucată de cod jQuery care vine în ajutorul nostru prin aplicarea clasei de depanare la elementul foo sau chiar adăugarea CSS direct la elementul bar în acest caz.

$(document).ready(function(){ $('.foo').addClass('debug'); $('.bar').css('border' : '1px solid blue'); });

această situație s-ar putea întâmpla foarte rar, dar știu că am folosit această tehnică în trecut, deci este bine de știut.

4) cunoașteți Cascada

unele probleme CSS sunt atât de frecvente, cum ar fi flotoarele de compensare, încât veți cădea în acea capcană o dată, iar data viitoare când întâlniți ceva similar, știți ce a cauzat problema și cum să o remediați. În general, majoritatea problemelor CSS sunt ușor de rezolvat dacă știți cum regulile CSS se suprascriu reciproc. De exemplu, selectoare mai specifice va suprascrie cele mai generale, sau ID selector suprascrie selector de clasă, sau !important declarație are prioritate față de o declarație normală. Cunoașterea cascadei vă va ajuta să rezolvați mai rapid Codul foilor de stil în cascadă.

Iată un exemplu direct din specificațiile W3C despre modul în care funcționează specificitatea selectorului.

câteva exemple:

<HEAD><STYLE type="text/css"> #x97z { color: red }</STYLE></HEAD><BODY><P ID=x97z style="color: green"></BODY>

în exemplul de mai sus, culoarea elementului P ar fi verde. Declarația din atributul” stil ” o va înlocui pe cea din elementul stil din cauza regulii 3 în cascadă, deoarece are o specificitate mai mare. Dacă credeți că acest exemplu este greu de înțeles verifica acest articol pe CSS ordinea de prioritate.

note finale

obținerea de rezultate perfecte pixel este greu din cauza randări diferite de browsere diferite. Unele browsere vechi nu acceptă complet CSS3 sau HTML5, deci verificați HTML5Please proiect comunitar pentru a vedea dacă sintaxa pe care încercați să utilizați este susținută de majoritatea browserelor. Cu toate acestea, puteți utiliza opțional fallbacks sau polyfills pentru a oferi caracteristici lipsă pentru browserele care nu acceptă implementarea completă CSS3 sau HTML5.

Lasă un răspuns

Adresa ta de email nu va fi publicată.