Experiență în depanarea CSS la mine, deși iau departe. Codul străin și al meu. Datele mobile și browserele desktop. Totul, pornind de la versiunile mai vechi ale Internet Explorer până la cele mai recente notite WebKit. Lucrand cu oamenii, mi-am dat seama ca nu toata lumea are un proces de depanare pentru CSS.
Mi-am dat seama că, odată cu abordarea sistemului de rezolvare a problemei, lupta cu bug-urile durează mai puțin.
Și aici este propria mea abordare.
Nu spun că aceasta este singura modalitate de depanare a CSS-ului. Dar este extrem de eficient pentru mine. Dacă CSS nu este limba dvs. principală, atunci depanarea poate părea ceva misterios; cu următoarele îndrumări, este posibil să luptați și să scăpați de bug-uri mult mai eficient.
În general, împărtășesc procesul de depanare în trei etape:
- Evaluare și soluții rapide
- Localizarea și redarea
- Motive și corecții
Să aruncăm o privire la fiecare pas și după o scurtă privire la o problemă CSS pentru un exemplu.
Evaluare și soluții rapide
Multe bug-uri pot fi corectate cu ușurință dacă știți și înțelegeți CSS (de exemplu, deoarece lucrați constant cu acesta). În caz contrar, vor exista decizii mai puțin rapide în arsenalul dumneavoastră.
Iată câteva dintre capcanele obișnuite care sunt cu siguranță cunoscute oricărui dezvoltator CSS cu experiență:
- un spațiu ciudat în jurul imaginii? Setați-l să afișeze: Blocare (imaginea implicită este mică, astfel încât spațiile sunt luate în considerare).
- face elementul să se comporte incorect în flux? Probabil, undeva este setat să plutească.
- un element absolut poziționat nu apare sau se află în locul greșit sau în spatele altui element? Cel mai probabil, ați uitat să setați poziția la elementul părinte sau ați creat accidental contextul suprapus din indexul z folosind transformarea sau opacitatea.
- nu apare pseudo-elementul? Probabil doriți să adăugați orice valoare proprietății conținutului.
Există o mulțime de astfel de "bug-uri". Dar acestea nu sunt bug-uri reale, doar dezvoltatorii nu înțeleg pe deplin ce face browserul. Mai precis: ceea ce codul dvs. CSS spune browser-ului să facă.
Dezvoltatorii mai experimentați știu deja ce probleme pot fi așteptate de la aceste caracteristici CSS și, prin urmare, pentru ei sunt "bug-uri" care pot fi tratate rapid. Recunosc instantaneu bug-ul, spre deosebire de dezvoltatorii cu mult mai puțin cunoștințe CSS. Este important să înțelegeți că un dezvoltator va trebui să treacă la depanare mai rapid prin "metodă" decât altele.
Dar este puțin probabil ca problemele complexe să fie rezolvate prin adăugarea de proprietăți și valori diferite la întâmplare, în speranța unui rezultat. Chiar dacă sunteți norocoși și problema este rezolvată, nu este în niciun caz un fapt că veți putea determina ce fel de problemă a fost și de ce a fost decisă.
În schimb, în situații dificile, merită să identificăm zona problemei și să copiem literalmente marcajele din DOM și apoi să trecem la următoarea etapă de depanare: localizare și redare.
Localizarea și redarea
În acest moment, depanarea CSS este ajutată foarte mult de servicii cum ar fi Codepen. De fapt, trebuie să localizăm problema - pentru a obține codul specific implicat în bug-ul. Acest lucru va izola rapid bug-ul și se va concentra pe cauza rădăcină.
Pentru puritatea experimentului, acest exemplu minim ar trebui să includă numai HTML și CSS care sunt importante pentru reproducerea problemei. Puteți introduce din nou stilurile pentru marcare sau puteți copia partea minimă a CSS reală care este relevantă. Dacă este posibil, încercați să nu aruncați toate CSS în cazul de testare; pentru reproducere aveți nevoie doar de lucrurile cele mai necesare. Adesea, adăugarea treptată a CSS este suficientă pentru a identifica zona problemei.
Când aproape instantaneu vedeți rezultatul fiecărei acțiuni, este adesea posibil să observați atunci când adăugați o proprietate sau o valoare, bug-ul se simte.
Abordarea inversă va fi, aruncarea tuturor CSS în cazul de testare, ștergerea secțiunilor bucată cu bucăți și speranța că bug-ul însuși se va manifesta. În practică, mi se pare un pic stângace, dar în cazul dvs. particular poate fi diferit.
Acum, după adăugarea / eliminarea treptată a CSS, ar trebui să obținem un scurt caz de testare care reproduce problema și ajută la studierea site-ului / codului prost.
Să presupunem că am făcut un test cu CSS minim, dar se comportă la fel ca și codul inițial de problemă. Acest lucru este, de asemenea, util. Acum este momentul pentru markup.
Odată ce validitatea marcajului este verificată, este util să "scapi" de stilurile de browser inutile. Aici:
Mai întâi, înlocuiți toate elementele din markup cu div (pentru elementele de bloc) și span (pentru litere mici) și apoi verificați dacă elementele sunt selectate în CSS numai după clasă. Probabil, este totuși necesar să schimbăm toți selectorii supraîncărcați de tipul a.link pe pur și simplu .link.
Datorită marcajului neutru, eliminăm toate stilurile / comportamentele implicite pentru browser pentru anumite elemente HTML bizare care reprezintă problema. Acest lucru se aplică în mod deosebit elementelor formularului (după cum vom vedea în exemplul nostru).
Cauze și corecții
Să presupunem că simplificarea aspectului nu a schimbat nimic. Cu toate acestea, problema este localizată și reprodutabilă în mod stabil. Acum merită să verificați site-ul localizat în alte browsere. Apare aceeași problemă în Chrome, Internet Explorer, Safari și Firefox? Dacă nu, care dintre ele înțelege corect? Dacă eroarea apare numai într-un singur browser, merită să căutați printre bug-urile cunoscute pentru acest browser.
Este o problemă cunoscută cu browserul X sau cu o versiune specifică a browserului X? Va repara bug-ul în curând? Există soluții de rezolvare care nu afectează alte browsere? Într-o mină, puteți adăuga o ramură cu o corecție de eroare pentru browserul dorit la cod?
Greg Witwog de la Microsoft a împărtășit, de asemenea, câteva detalii despre rotunjirea subpixelului în browsere. WebKit / Blink rulează până la 1/64, Gecko - la 1/60 și Edge - până la 1/100 (de la depunerea dezvoltatorului WebKit)
Depanarea platformelor mobile
Pentru dispozitivele mobile, dacă aveți fizic dispozitivul dorit și nu doar raportul de eroare de la utilizator și acest dispozitiv acceptă această funcție, nimic nu se compară cu depanarea la distanță a cablului. În acest sens, Safari este excelent cu iPhone-ul conectat (numai pentru Mac), dar și cu Chrome pe Android asociat cu desktopul Chrome (Windows și Mac). Pentru iOS, dacă nu aveți la dispoziție un dispozitiv specific, programul de depanare Safari asociat cu simulatorul iOS este destul de bun, dar veți fi limitat la acele versiuni ale iOS pe care versiunea dvs. de Xcode le acceptă. În teorie, puteți avea mai multe versiuni de Xcode în același timp, de exemplu unul care acceptă iOS6 și iOS7, iar celălalt cu suport pentru iOS8 și 9, dar niciodată nu a lucrat pentru mine.
Și dacă trebuie să te ocupi de un dispozitiv mobil mai vechi? Depanarea de la distanță nu este adesea o opțiune aici. Pentru astfel de cazuri, este util să dezvolți un "flair", pe care instrumentele de dezvoltator le pot ajuta în rezolvarea problemelor de afișare a platformei.
De exemplu, dacă vedeți o problemă în versiunea veche a Safari pe iOS (de exemplu, iOS5-6) sau în browserul încorporat de pe Android <4.2, полезно знать, что у них общая основа WebKit. На свежих версиях OS X, как отмечено выше, довольно трудно добиться, чтобы симулятор iOS точно воспроизвел эти устройства (симуляторы iOS склонны поддерживать лишь пару последних версий). Более плодотворным подходом может оказаться вовсе даже взять и скачать последнюю версию Safari для Windows (5.x, если память меня не подводит).
Afișarea pe această versiune veche a Safari pentru Windows este, de fapt, foarte asemănătoare cu cea a platformelor mobile, deci debuggerul din acesta probabil va arăta mai mult decât cel mai recent Chrome / Firefox sau IE disponibil. O altă opțiune - dacă sistemul de operare îl acceptă, descărcați și instalați ansamblul vechi de asamblare WebKit.
În mod similar, dacă aveți un Mac și apar probleme în Windows Mobile (8 / 8.1), luați și descărcați mașina virtuală cu IE10. Apoi folosiți aplicația de depanare locală, deoarece pe ecranul IE10 și IE8 mobile și 8.1 există multe în comun.
În unele browsere, în special cele vechi mobile, dacă ceva pare a fi un bug - ar putea fi acolo, așa că găsirea unei soluții va fi mult mai ușoară dacă investigați problema în care poate fi "cuplat" în depanator.
Stiluri calculate
Dezvoltatorii deseori subestimează o astfel de funcție de depanare ca panoul de stiluri calculate. Dacă stilurile calculate pentru dvs. sunt o noutate, atunci numele lor se explică - acestea sunt stilurile care sunt aplicate elementului după calcul în browser. Acest lucru este important, deoarece stilurile reale pot fi diferite de acestea. pe care l-ai scris. În plus, printre stilurile existente pot fi cele pe care nu le-ați scris deloc. Acum o voi explica cu un exemplu. Luați acest marcaj.
Care este lățimea exteriorului tău? Dacă credeți că 400px, așa cum este indicat în max-lățime. atunci te-aș fi înțeles. Dar nu este așa. Uită-te la asta:?
Ce se întâmplă? De ce nu se ia în considerare max-lățimea? Îți dau un indiciu. Deschideți depanatorul și examinați panoul "Stiluri computerizate".
Te voi cruța de incertitudine; în mod prestabilit, setul de câmpuri are o lățime calculată care se ajustează la conținutul său. În Chrome, acesta este afișat în "Stiluri computerizate" ca fiind noua valoare a lungimii conținutului min în min-lățime.
Pentru a rezolva acest lucru, puteți adăuga o nouă valoare la proprietatea min-width. Cu min-width: 0, proprietatea noastră maximă-lățime va funcționa așa cum ar trebui.
Iată cât de util este panoul Stiluri computerizat din depanator. Amintiți-vă că tot ce ați scris nu trebuie calculat în browser.
concluzie
Motivele pentru anomaliile vizuale din web sunt numeroase și variate. Implementările specificațiilor sunt diferite, astfel încât fiecare browser are capriciile lui. Pe lângă acumularea unui catalog mentale de "capcane", metodicitatea este abordarea cea mai eficientă pentru rezolvarea problemei. În general, această abordare a fost extrem de eficientă pentru mine:
P.S. Și asta poate fi interesant:
Au trecut mai puțin de șase luni de la ultima modificare a fluxului de lucru al W3C, deoarece conducerea consorțiului a primit o propunere pentru a aplica în cele din urmă acest nou proces. Și să scrieți specificațiile HTML irelevante în muzeu, astfel încât să nu confundă dezvoltatorii, "pretinzând" că sunt relevanți.
Un alt modul CSS, despre care am vorbit, a ajuns într-un mod imperceptibil la starea cu care W3C sfătuiește să înceapă utilizarea zilnică a produselor noi. Proprietatea conține vă permite să restricționați modificările la arborele de randare, să redenumiți casetele CSS și să le redimensionați în interiorul elementului. Prin urmare, este atât de important ...
MAI MULT
De la Paris (foto), care a trecut recent CSS intalnire de lucru de grup, a sosit știri amuzant: Proprietăți grilă-rând-gap și grila coloana-decalaj, precum și reducerea grilă decalaj ...