Una barra più stretta della finestra

Ogni pagina del nostro pannello scorreva lateralmente a una larghezza di finestra di 768 pixel. Otto pixel di troppo in inglese, trentotto in rumeno. Era così da un po’, in nove lingue, su ogni percorso. Quei numeri vengono da una scansione in due notazioni di valuta; una lettura isolata precedente della stessa intestazione dava tre.

La causa sta in una frase con cui è facile essere d’accordo e che è falsa: l’intestazione ripiegava il proprio contenuto in base alla larghezza della finestra.

La finestra non è la barra

Dal punto di rottura medio in su, la barra laterale sta accanto all’intestazione invece che dietro un menu compatto, e costa sedici rem. A una finestra di 768 pixel, quindi, la scatola di contenuto dell’intestazione misura 464 pixel. Non 768, e nemmeno 736.

Le due regole che avrebbero dovuto impedire il traboccamento, nascondere il nome dell’account e ridurre la pillola di connessione a un punto, erano scritte entrambe contro il punto di rottura piccolo: 640 pixel di finestra. Sono 128 pixel prima del punto in cui compare la barra laterale e si porta via i suoi sedici rem. Fra questi due numeri c’è una fascia in cui l’intestazione crede di avere spazio in abbondanza e ne ha in realtà meno che a qualsiasi larghezza inferiore, perché a 640 la barra laterale era ancora nascosta.

Non è un problema di Tailwind né un punto di rottura fissato un gradino troppo in basso. È un errore di categoria. Un’interrogazione di media risponde a quanto è grande l’area visibile. La domanda a cui l’intestazione ha bisogno di una risposta è quanto spazio le è toccato, e finché non ci sono state le interrogazioni di contenitore non c’era modo di porla.

Misuri ciò che la riga chiede, non ciò che fa

A questo punto la tentazione è alzare un poco il punto di rottura e guardare il risultato. Ne esce un numero che funziona sulla macchina di chi lo ha alzato.

Una riga flessibile riduce i figli alla loro larghezza minima di contenuto prima che qualcosa trabocchi, quindi ciò che si vede sullo schermo è il sintomo finale e non la misura. Una riga può essere ben oltre il proprio budget e sembrare a posto, fino al momento esatto in cui un figlio non può ridursi oltre. Il numero su cui regolarsi è ciò che la riga chiede quando nulla la vincola: clonarla, metterla alla larghezza massima di contenuto e leggerla, in ogni lingua.

Fatto a 768 pixel nella notazione monetaria più larga, su nove lingue, le voci escono così.

Da qui discendono due soglie, entrambe formulate contro la scatola di contenuto dell’intestazione invece che contro la finestra. Mostrare il nome dell’account richiede 524 pixel, quindi parte da 34 rem, con venti pixel di margine. Mostrare la pillola invece del punto richiede 622,8, quindi parte da 40 rem, con diciassette. Sotto la soglia del nome la riga chiede 422,3 pixel, che stanno comodamente nei 464 che riceve.

La parte piacevole del porre una domanda di contenitore invece che di finestra è ciò che accade dopo senza una riga in più. Quando la barra laterale si ripiega a binario, quella stessa finestra di 768 pixel lascia 656 pixel di intestazione, e nome e pillola tornano da soli. Nulla sa alcunché del binario; la barra si è semplicemente rimisurata.

La lingua con zero pixel di traboccamento

La scansione che coglieva questa classe di difetti misura la larghezza del documento contro quella dell’area visibile. Su nove lingue ha segnalato traboccamento ovunque, da otto a trentotto pixel, tranne in francese, dove ha segnalato zero.

Il francese non stava affatto bene. La pillola di connessione era andata a capo su una seconda riga dentro una barra alta sessantaquattro pixel con gli elementi centrati, quindi il testo stava in silenzio per metà fuori dalla propria scatola mentre il documento restava largo esattamente quanto la finestra. Nessuna scansione di traboccamento lo vede, perché non traboccava nulla.

È la stessa forma di un difetto precedente sul nostro sito vetrina, dove un titolo di una sola parola in una piastrella rimpicciolita dipingeva sopra la vicina e la larghezza della pagina non cambiava mai. Il testo che esce dalla propria scatola non allarga il documento. Il controllo deve dunque essere l’altro: il bordo destro del testo contro il bordo interno della scatola in cui dovrebbe stare, più il numero di caselle di riga che occupa. In una barra ad altezza fissa, più di una casella di riga è già di per sé un difetto.

Due modi in cui la misura mente

L’apparato di misura ha richiesto due tentativi, ed entrambi i fallimenti puntavano nella stessa direzione: verso un risultato verde che non significa nulla.

Un clone alla larghezza massima di contenuto va misurato dentro il contenitore. Il nostro veniva agganciato al corpo del documento, che sta interamente fuori dall’intestazione, quindi l’interrogazione di contenitore non corrispondeva mai e il clone veniva disegnato nella sua forma stretta: 394,8 pixel dove la riga vera ne chiedeva 515,3. Letto come un prima e un dopo, sembra esattamente una riparazione riuscita. È la stessa trappola del misurare in euro mentre il cliente vede dollari, o del misurare una pagina i cui dati non sono mai arrivati: il numero non è sbagliato, è la risposta a un’altra domanda.

Il secondo è più grigio e vale comunque la pena saperlo. Un controllo di sintassi sullo script di scansione scavalca un apice inverso non protetto dentro un modello di stringa, quindi una sonda può essere impercettibilmente diversa da quella che si è scritta, mentre il file si analizza senza problemi.

Per questo la scansione ha ricevuto una modalità di prova che appende nell’intestazione elementi rotti di proposito, un blocco troppo largo per la barra, un pulsante troppo stretto per la sua etichetta e una riga di testo che esce dalla propria scatola, e pretende che la sonda li segnali tutti. Pretende anche che il pulsante dell’account esista davvero. Uno scanner che non trova nulla non si distingue da uno scanner che non guarda, e l’unico modo per separarli è dargli qualcosa da trovare.

Contro il codice non riparato la scansione ha prodotto settantaquattro esiti rossi su novantotto controlli. Contro la riparazione, in entrambe le monete, 2033 su 2033.

Troncare senza rompere il pulsante

Tre decisioni minori della riparazione sono esattamente di quelle che qualcuno più tardi annulla mentre riordina, perciò stanno scritte dove stanno le classi.

Il troncamento vive su un elemento dentro il pulsante, non sul pulsante. Mettere overflow: hidden sul pulsante stesso ritaglia la sua area di clic e il suo anello di fuoco, e questo trasforma una correzione estetica in un difetto di accessibilità da tastiera.

Il nome accessibile resta intero. Troncare è una scelta di presentazione; un lettore di schermo dovrebbe ricevere il nome completo dell’organizzazione, quindi l’etichetta lo porta per intero.

Ed esattamente una cosa di quella riga può ridursi. Senza fissare i pulsanti a icona, il modello flessibile distribuisce la riduzione su tutti, e si ottengono tre pulsanti a icona schiacciati invece di un nome che si tronca con pulizia. Ridursi è una decisione su chi cede, e se non la prende, la prende per Lei il motore di impaginazione, in parti uguali, che non è quasi mai ciò che qualcuno vuole.

Un’altra cosa da sapere prima di ricorrervi: un contenitore crea anche una frontiera di contenimento dell’impaginazione, e diventa così il blocco contenitore di qualunque elemento fisso posto sotto. Qui non cambia nulla, perché i menu e i cassetti coinvolti sono finestre di dialogo native nello strato superiore, e perché la barra portava già un filtro di sfondo con esattamente lo stesso effetto. È stato verificato aprendoli e non dedotto, e se la risposta fosse stata un’altra, il contenitore avrebbe dovuto stare altrove.

Il che solleva l’ultimo vincolo: il contenitore va dichiarato nell’unica funzione che costruisce ogni intestazione, perché l’intestazione di amministrazione monta lo stesso menu dell’account. Un’interrogazione di contenitore senza contenitore non corrisponde mai, in silenzio. La dichiari in un posto e dimentichi l’altro, e il nome dell’account sparisce da un’intera sezione del prodotto senza lasciare traccia in alcun registro.

Che cosa annoteremmo

1. 01Un’interrogazione di media risponde a una domanda sull’area visibile. Se un componente divide la propria larghezza con una barra laterale, quella è la domanda sbagliata, e la risposta sbaglia esattamente della larghezza della barra.
2. 02Si regoli su ciò che una riga chiede, non su ciò che fa. Il modello flessibile riduce prima i figli, quindi lo schermo Le mostra il sintomo finale.
3. 03Misuri il clone dentro il contenitore. Fuori, l’interrogazione non corrisponde e si misura la forma stretta, che si legge come una correzione.
4. 04Zero pixel di traboccamento possono essere il caso rotto. Il testo che esce dalla propria scatola non allarga il documento; controlli il testo contro la sua scatola e conti le caselle di riga.
5. 05Dia allo scanner qualcosa da trovare. Una modalità di prova che pianta difetti noti è l’unico modo per distinguere «niente di sbagliato» da «non sta guardando».
6. 06Tronchi su un elemento interno. Ritagliare il pulsante ritaglia l’anello di fuoco, e il nome accessibile dovrebbe restare intero.
7. 07Scelga quale elemento si riduce. Lasciato a sé, il modello flessibile distribuisce il dolore in parti uguali su tutto.

Per chiarezza su che cosa sia: la riparazione è costruita, misurata su nove larghezze, nove lingue, cinque percorsi ed entrambe le monete, e funziona. Non è stata misurata su una compilazione di produzione, quindi qui non si dice nulla sullo spostamento di impaginazione, ed è stato usato un solo nome di organizzazione per tutto il tempo.

Dal lavoro di piattaforma su Provibr. La pagina il cui traboccamento ha avviato tutto questo si trova in fuori linea accanto a un titolo che dice in linea, e che cosa fanno nove lingue a un insieme di comandi di misura fissa in sedicimila chiavi e nove lingue.