/* Ergonomia mobile di VisitCaprarola — fase F4. SCOPO Tre cose, in quest'ordine: bersagli tattili utilizzabili, tipografia fluida, comfort di lettura. Niente estetica: colori, famiglie di caratteri e proporzioni della grafica restano quelli di oggi. Il redesign e una fase successiva e questo file non lo anticipa. ORDINE DI CARICAMENTO Va accodato DOPO library/css/style.css. A parita di specificita vince l'ultima regola dichiarata, quindi qui non serve alzare i selettori: dove devo battere vc-foundation-core.css o style.css replico la loro specificita esatta e mi basta arrivare dopo. In questo file non c'e nessun !important. NOTA SULLA NORMATIVA, perche in giro si trova scritta male - WCAG 2.2, criterio 2.5.8 "Target Size (Minimum)", livello AA: 24x24 pixel CSS. E questa la soglia obbligatoria. - WCAG 2.2, criterio 2.5.5 "Target Size (Enhanced)", livello AAA: 44x44 pixel CSS. E anche la raccomandazione pratica delle linee guida Apple (44pt) e Google Material (48dp). Il sito oggi e AL LIMITE dell'AA, non sotto: la gran parte dei bersagli misurati sta fra 20 e 27 pixel di altezza, cioe attorno alla soglia dei 24. Quello che facciamo qui e portarli a 44, cioe salire da "al limite dell'AA" a "AAA" dove si puo farlo senza spostare un pixel della grafica. Attenzione: il commento accanto a --vc-tocco-minimo in vc-tokens.css cita il 2.5.8 per i 44px. E impreciso: 44px sono il 2.5.5 (AAA). Il valore del token va benissimo, va corretta solo la didascalia, in vc-tokens.css. DUE TECNICHE, USATE PER MOTIVI DIVERSI a) padding verticale + min-height, quando l'elemento non ha bordi ne sfondo visibili: il riquadro cresce ma non si vede niente; b) pseudo-elemento trasparente sovrapposto, quando l'elemento HA un bordo o uno sfondo visibile (il caso delle frecce del carosello): ingrandire il riquadro vero cambierebbe il disegno del pulsante. La (b) si puo usare solo se l'area invisibile non si sovrappone a quella del bersaglio accanto: un'area sovrapposta e peggio di un bersaglio piccolo, perche il tocco finisce sul link sbagliato. Ogni volta che la uso ho verificato la distanza fra i centri. I BREAKPOINT sono quelli di Foundation 5 gia in uso nel tema: small fino a 40em, medium da 40.063em, large da 64.063em. Le media query non possono usare var(), quindi i valori sono scritti per esteso come in vc-grid.css. */ /* =============================================================== 0. Scala tipografica fluida — variabili locali Stanno qui e non in vc-tokens.css solo perche F4 puo toccare un file solo. Quando saranno approvate vanno spostate nei token. Come si leggono: clamp(minimo, base + pendenza, massimo). Il termine "base" e in rem, non in vw: e la parte che garantisce che il testo continui a rispondere allo zoom del browser. Una clamp() fatta di soli vw violerebbe il criterio 1.4.4 (Resize Text). =============================================================== */ :root { /* Corpo del testo: 16px a 320px di viewport, 18px da 1280px in su. Il minimo della clamp e esattamente 1rem, cioe la dimensione di oggi (html font-size:100% e p font-size:1rem in vc-foundation-core.css): sotto i 320px resta 16px, sopra puo solo crescere. Su nessuna larghezza il testo rimpicciolisce. */ --vc-testo-fluido: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem); /* Titoli. Qui la rampa e diversa: va da 320px a 641px, cioe FINISCE sul breakpoint medium. Perche. Oggi Foundation fa un salto secco sul breakpoint: h1 passa da 34px a 44px, h2 da 27px a 37px. Se avessi disteso la rampa fino a 1280px, fra 641px e 1280px i titoli sarebbero diventati piu PICCOLI di oggi, cioe una modifica delle proporzioni della grafica su desktop, che il committente ha escluso. Facendo finire la rampa a 641px ottengo invece che: - sotto i 641px il salto sparisce e diventa una crescita continua (e il guadagno vero, sui telefoni); - da 641px in su il valore e identico a quello di oggi. Nessuna dimensione renderizzata e piu piccola di oggi, nessuna e piu grande del massimo di oggi. */ --vc-h1-fluido: clamp(2.125rem, 1.502rem + 3.115vw, 2.75rem); /* 34 -> 44px */ --vc-h2-fluido: clamp(1.6875rem, 1.0645rem + 3.115vw, 2.3125rem); /* 27 -> 37px */ --vc-h3-fluido: clamp(1.375rem, 1.0635rem + 1.558vw, 1.6875rem); /* 22 -> 27px */ --vc-h4-fluido: clamp(1.125rem, 0.8135rem + 1.558vw, 1.4375rem); /* 18 -> 23px */ /* h5 e h6 oggi non fanno alcun salto (18px e 16px su tutte le larghezze): non c'e niente da addolcire, e ingrandirli sarebbe una modifica estetica. Restano come sono. */ } /* =============================================================== 1. BERSAGLI TATTILI =============================================================== */ /* --------------------------------------------------------------- 1.1 Menu off-canvas (telefono) vc-foundation-core.css da gia a queste voci padding .66667rem su una riga di 24px, cioe circa 45px di altezza: sono gia conformi. Il min-height qui e una rete di sicurezza, non una correzione: serve perche se un domani qualcuno tocca il padding o l'interlinea il menu non scenda sotto la soglia senza che nessuno se ne accorga. Specificita replicata da vc-foundation-core.css (ul.off-canvas-list li a): con il solo .off-canvas-list li a perderei il confronto. Non tocco display, padding, colori e bordi: restano di Foundation. --------------------------------------------------------------- */ ul.off-canvas-list li a { min-height: var(--vc-tocco-minimo, 44px); } /* Nota sul selettore di lingua, per non rifare l'errore. Il rilievo di F4 aveva concluso che da telefono la lingua non si poteva cambiare, perche hide-for-medium-down in header.php nasconde la tendina della testata. La conclusione era sbagliata: il menu di navigazione, che nel menu a scomparsa c'e tutto, contiene gia una voce con i cinque link di lingua e le rispettive bandiere, aggiunta dal pannello di WordPress. Verificato sull'HTML di produzione precedente all'intervento: cinque link e sei bandiere dentro l'aside .left-off-canvas-menu. Non serve quindi aggiungerne un secondo. Qui non c'e nessuna regola. */ /* Rete di sicurezza per eventuali