O bară mai îngustă decât fereastra

Fiecare pagină a panoului nostru derula lateral la o lățime de fereastră de 768 de pixeli. Opt pixeli în plus în engleză, treizeci și opt în română. Așa era de o vreme, în nouă limbi, pe fiecare rută. Aceste numere vin dintr-un baleiaj în două notații de monedă; o citire izolată anterioară a aceluiași antet dădea trei.

Cauza stă într-o frază cu care e ușor să fii de acord și care este falsă: antetul își plia conținutul după lățimea ferestrei.

Fereastra nu este bara

De la punctul de rupere mediu în sus, bara laterală stă lângă antet în loc să se ascundă în spatele unui meniu compact, și costă șaisprezece rem. La o fereastră de 768 de pixeli, cutia de conținut a antetului are deci 464 de pixeli. Nici 768, nici 736.

Cele două reguli care ar fi trebuit să împiedice revărsarea, ascunderea numelui contului și micșorarea pastilei de conexiune până la un punct, erau amândouă scrise pe punctul de rupere mic: 640 de pixeli de fereastră. Asta este cu 128 de pixeli mai devreme decât locul în care apare bara laterală și își ia cei șaisprezece rem. Între aceste două numere există o fâșie în care antetul crede că are loc din belșug și în realitate are mai puțin decât la orice lățime mai mică, fiindcă la 640 bara laterală era încă ascunsă.

Aceasta nu este o problemă de Tailwind și nici un punct de rupere așezat cu o treaptă prea jos. Este o eroare de categorie. O interogare de mediu răspunde la cât de mare este zona vizibilă. Întrebarea la care antetul are nevoie de răspuns este cât spațiu a primit, iar până la interogările de container nu exista nicio cale de a o pune.

Măsurați ce cere rândul, nu ce face

În acest punct ispita este să ridicați puțin punctul de rupere și să vă uitați la rezultat. Iese un număr care funcționează pe mașina celui care l-a ridicat.

Un rând flexibil își micșorează copiii până la lățimea minimă de conținut înainte ca ceva să se reverse, deci ceea ce se vede pe ecran este simptomul final și nu măsurătoarea. Un rând poate fi mult peste bugetul lui și tot să arate bine, exact până când un copil nu mai poate să se micșoreze. Numărul după care vă ghidați este ce cere rândul atunci când nimic nu îl constrânge: clonați-l, puneți-l pe lățimea maximă de conținut și citiți-l, în fiecare limbă.

Făcut la 768 de pixeli în scrierea monetară mai lată, în nouă limbi, posturile ies astfel.

De aici ies două praguri, amândouă formulate față de cutia de conținut a antetului și nu față de fereastră. Afișarea numelui contului cere 524 de pixeli, deci începe la 34 rem, cu douăzeci de pixeli joc. Afișarea pastilei în locul punctului cere 622,8, deci începe la 40 rem, cu șaptesprezece. Sub pragul numelui, rândul cere 422,3 pixeli, ceea ce încape lejer în cei 464 pe care îi primește.

Partea plăcută a unei întrebări de container în locul uneia de fereastră este ce se întâmplă după aceea fără nicio linie în plus. Când bara laterală este pliată într-o șină, aceeași fereastră de 768 de pixeli lasă 656 de pixeli de antet, iar numele și pastila revin singure. Nimic nu știe ceva despre șină; bara pur și simplu s-a măsurat din nou.

Limba cu zero pixeli de revărsare

Baleiajul care prindea această clasă de defecte măsoară lățimea documentului față de cea a zonei vizibile. În nouă limbi a raportat revărsare peste tot, de la opt la treizeci și opt de pixeli, în afară de franceză, unde a raportat zero.

Franceza nu era în regulă. Pastila de conexiune trecuse pe un al doilea rând într-o bară înaltă de șaizeci și patru de pixeli cu elementele centrate, deci textul stătea în tăcere pe jumătate în afara propriei cutii, în timp ce documentul rămânea exact la fel de lat ca fereastra. Niciun baleiaj de revărsare nu vede asta, fiindcă nu s-a revărsat nimic.

Este aceeași formă ca un defect anterior de pe situl nostru de prezentare, unde un titlu dintr-un singur cuvânt într-o dală micșorată picta peste vecina lui, iar lățimea paginii nu se schimba niciodată. Un text care își părăsește cutia nu lățește documentul. Verificarea trebuie deci să fie cealaltă: marginea din dreapta a textului față de marginea interioară a cutiei în care ar trebui să stea, plus numărul de cutii de rând pe care le ocupă. Într-o bară cu înălțime fixă, mai mult de o cutie de rând este deja un defect în sine.

Două feluri în care măsurătoarea minte

Aparatul de măsură a cerut două încercări, iar amândouă eșecurile arătau în aceeași direcție: spre un rezultat verde care nu înseamnă nimic.

O clonă la lățimea maximă de conținut trebuie măsurată înăuntrul containerului. A noastră era agățată de corpul documentului, care stă în întregime în afara antetului, deci interogarea de container nu se potrivea niciodată și clona era desenată în forma ei îngustă: 394,8 pixeli acolo unde rândul adevărat cerea 515,3. Citit ca un înainte și un după, asta arată exact ca o reparație reușită. Este aceeași capcană ca măsurarea în euro în timp ce clientul vede dolari, sau măsurarea unei pagini ale cărei date nu au ajuns niciodată: numărul nu este greșit, este răspunsul la altă întrebare.

A doua este mai searbădă și tot merită știută. O verificare de sintaxă a scriptului de baleiaj trece peste un accent grav neprotejat dintr-un șablon, deci o sondă poate să nu fie, pe nesimțite, sonda pe care ați scris-o, în timp ce fișierul se analizează fără probleme.

De aceea baleiajul a primit un mod de probă care atârnă în antet elemente stricate intenționat, un bloc prea lat pentru bară, un buton prea îngust pentru eticheta lui și o linie de text care iese din propria cutie, și cere ca sonda să le semnaleze pe toate. Cere de asemenea ca butonul de cont să existe în general. Un scaner care nu găsește nimic nu se deosebește de un scaner care nu se uită, iar singura cale de a le separa este să îi dai ceva de găsit.

Față de codul nereparat, baleiajul a produs șaptezeci și patru de rezultate roșii din nouăzeci și opt de verificări. Față de reparație, în ambele monede, 2033 din 2033.

Trunchierea fără a strica butonul

Trei decizii mai mici din reparație sunt exact acelea pe care cineva le dă înapoi mai târziu, făcând ordine, așa că stau scrise acolo unde stau clasele.

Trunchierea trăiește pe un element din interiorul butonului, nu pe buton. Punerea overflow: hidden pe butonul însuși taie propria lui zonă de clic și inelul lui de focalizare, ceea ce transformă o corectură cosmetică într-un defect de accesibilitate la tastatură.

Numele accesibil rămâne întreg. Trunchierea este o alegere de prezentare; un cititor de ecran ar trebui să primească numele întreg al organizației, deci eticheta îl poartă complet.

Și exact un lucru din acel rând are voie să se micșoreze. Fără a fixa butoanele cu pictogramă, modelul flexibil împarte micșorarea între toate, și se obțin trei butoane cu pictogramă turtite în locul unui nume care se trunchiază curat. Micșorarea este o decizie despre cine cedează, iar dacă nu o luați, o ia motorul de așezare în locul vostru, egal, ceea ce aproape niciodată nu este ce vrea cineva.

Încă ceva de știut înainte de a apela la asta: un container creează și o graniță de izolare a așezării, ceea ce îl face blocul care conține orice element fixat dedesubt. Aici asta nu schimbă nimic, fiindcă meniurile și sertarele implicate sunt dialoguri native din stratul de sus, și fiindcă bara purta deja un filtru de fundal cu exact același efect. S-a verificat deschizându-le și nu s-a dedus, iar dacă răspunsul ar fi fost altul, containerul ar fi trebuit să stea în altă parte.

Ceea ce ridică ultima constrângere: containerul trebuie declarat în singura funcție care construiește fiecare antet, fiindcă antetul de administrare montează același meniu de cont. O interogare de container fără container nu se potrivește niciodată, în tăcere. Declarați-o într-un loc și uitați celălalt, iar numele contului dispare dintr-o secțiune întreagă a produsului fără să lase urmă în vreun jurnal.

Ce am consemna

1. 01O interogare de mediu răspunde la o întrebare despre zona vizibilă. Dacă o componentă își împarte lățimea cu o bară laterală, aceea este întrebarea greșită, iar răspunsul greșește exact cu lățimea barei.
2. 02Ghidați-vă după ce cere un rând, nu după ce face. Modelul flexibil micșorează întâi copiii, deci ecranul vă arată simptomul final.
3. 03Măsurați clona înăuntrul containerului. Afară, interogarea nu se potrivește și măsurați forma îngustă, ceea ce se citește ca o reparație.
4. 04Zero pixeli de revărsare poate fi cazul stricat. Un text care își părăsește cutia nu lățește documentul; verificați textul față de propria cutie și numărați cutiile de rând.
5. 05Dați scanerului ceva de găsit. Un mod de probă care plantează defecte cunoscute este singura cale de a deosebi „nimic în neregulă” de „nu se uită”.
6. 06Trunchiați pe un element interior. Tăierea butonului taie inelul de focalizare, iar numele accesibil ar trebui să rămână întreg.
7. 07Alegeți ce element se micșorează. Lăsat în voia lui, modelul flexibil împarte durerea egal peste tot.

Ca să fie limpede ce este aceasta: reparația este construită, măsurată pe nouă lățimi, nouă limbi, cinci rute și ambele monede, și funcționează. Nu a fost măsurată pe o compilare de producție, deci aici nu se spune nimic despre deplasarea așezării, iar tot timpul s-a folosit un singur nume de organizație.

Din munca de platformă la Provibr. Pagina a cărei revărsare a pornit toate acestea se află în deconectat lângă un titlu care spune conectat, iar ce fac nouă limbi unui set de comenzi de mărime fixă se află în șaisprezece mii de chei și nouă limbi.