Corso di CSS / Verificare CSS responsive con larghezza, zoom e tastiera

Il CSS responsive dovrebbe rimanere utilizzabile a diverse larghezze di viewport, livelli di zoom e condizioni di input. Controlla la presenza di contenuti tagliati, scorrimento della pagina inatteso, controlli nascosti e focus da tastiera invisibile invece di fare affidamento solo su un'anteprima di dimensioni telefono.

Prepara una pagina per i controlli del layout responsive

Le dimensioni fluide, le media query e il rapporto delle immagini appresi nella lezione precedente sono raccolti in un'unica pagina. Se salvi il codice seguente come responsive-check.html, puoi vedere insieme menu, card, immagini, stringhe lunghe e moduli di input. L'immagine è contenuta all'interno del file e non è richiesta alcuna libreria o server separato.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive-check.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.page { width: min(100%, 64rem); margin-inline: auto; padding: 1rem; }
.menu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.menu a { display: block; padding: .65rem 1rem; background: #e8f3fa; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
.form { width: min(100%, 28rem); margin-top: 2rem; }
label { display: block; font-weight: bold; }
input { width: 100%; min-width: 0; padding: .65rem; font: inherit; }
button { max-width: 100%; padding: .65rem 1rem; font: inherit; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 42rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="page">
<h1>Check the same page under different conditions</h1>
<nav class="menu" aria-label="Lab Menu"><a href="#cards">Card description</a><a href="#request">Enter your question</a><a href="#result">Record check results</a></nav>
<section id="cards" class="cards">
<article class="card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Practice illustration showing both the upper and lower bands and the center circle"><h2>Long descriptions can be read to the end if there is no fixed height.</h2><p>Zooming may reduce how much text fits on each line. The description and link below the image must stay visible even when the same content occupies more lines.</p><a href="#result">First card notes</a></article>
<article class="card"><h2>Card with a long identifier</h2><p class="token">REFERENCE_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><p>Long strings are wrapped without deleting the content itself.</p><a href="#result">Second card notes</a></article>
</section>
<form id="request" class="form" action="#request" method="get"><h2>Enter your question</h2><label for="email">Email</label><p id="help">Use test@example.com instead of a real address to try the input styling. This example has no server that stores information.</p><input id="email" name="email" type="email" aria-describedby="help" required><p><button type="submit">Check input format</button></p></form>
<section id="result"><h2>Check results</h2><p>Record the viewport width, zoom level, changed rules, and results in a separate note.</p></section>
</main>
</body>
</html>

Questa pagina è stata inizialmente creata per non avere overflow orizzontale. Negli esercizi successivi, troveremo la causa aggiungendo e rimuovendo uno per uno il CSS che crea l'errore. Se copi il file originale e lo lasci come responsive-check-original.html, è facile tornare indietro se modifichi per errore varie proprietà. L'invio del modulo è un esempio che non invia dati a un server di archiviazione e utilizza l'indirizzo di test suggerito invece di informazioni personali reali.

Variare la larghezza e verificare le soglie dei breakpoint

In Edge, apri DevTools, abilita l'emulazione del dispositivo e inserisci una larghezza in modalità Responsive. Le scorciatoie predefinite di Windows sono F12 o Ctrl+Shift+I per DevTools e Ctrl+Shift+M per l'emulazione del dispositivo. Le etichette e le posizioni della barra degli strumenti possono variare a seconda della versione; consulta la guida all'emulazione del dispositivo di Microsoft Edge. Confronta le larghezze immediatamente sotto e sopra ciascuna soglia, come spiegato nella lezione Media query CSS e breakpoint basati sul contenuto.

1. A 320px e 390px, verifica se il menu si estende su più righe e se l'immagine e il campo di input rientrano nel testo. Scorri fino in fondo e cerca troncature del testo e scorrimento orizzontale in tutta la pagina.
2. Aumenta lentamente la larghezza e controlla le aree in cui le schede sono troppo strette o c'è spazio inutile tra i menu. Non limitare la verifica a pochi modelli di dispositivo.
3. Questo esempio commuta a 42rem. Con una dimensione del font iniziale di 16px, confronta 671px, 672px e 673px: 671px dovrebbe avere una colonna di schede, mentre 672px e 673px dovrebbero averne due.
4. Su schermi più ampi come 1365px e 1920px, verifica se la larghezza massima del testo è mantenuta e le righe non sono troppo lunghe. Oltre all'emulazione del dispositivo, verifica il funzionamento, la tastiera virtuale e la rotazione dello schermo sul dispositivo reale in uso.

L'emulazione del dispositivo è uno strumento di approssimazione che modifica la larghezza e alcune condizioni. Non replica tutti i font, i controlli touch, la tastiera virtuale e il comportamento del browser di un dispositivo reale. Si consiglia di verificare la situazione di input in cui la tastiera virtuale appare nella parte inferiore dello schermo sul dispositivo reale.

Separare lo zoom del browser e le modifiche della dimensione del testo

Man mano che lo zoom del browser aumenta l'intera pagina, la larghezza del viewport che il CSS può utilizzare può anche cambiare. Esegui lo zoom con Ctrl e + in Windows e torna al livello di zoom predefinito con Ctrl+0. Impostare la dimensione del carattere o ingrandire solo il font è una condizione per verificare separatamente la relazione tra il testo e la casella. Gli esperimenti modificando la dimensione del font dell'HTML nel CSS non devono essere registrati come zoom del browser.

1. Registra la larghezza dello schermo alla scala predefinita nella finestra del browser effettiva e scala al 200%. Verifica che il testo nel menu, nella descrizione della scheda, nell'etichetta, nella casella di input e nel pulsante non sia tagliato o si sovrapponga.
2. Assicurati che il tuo contenuto sia leggibile a ingrandimenti maggiori. Quando viene ingrandito del 400% sulla base della larghezza di 1280 px CSS, lo spazio è equivalente a circa 320 px CSS, ma il valore effettivo può variare a seconda dell'interfaccia del browser, della barra di scorrimento, ecc.
3. Ripristina alla scala predefinita e verifica di nuovo modificando significativamente le impostazioni del font del tuo browser. Le condizioni e i risultati della modifica del font predefinito, dell'ingrandimento della pagina e della modifica del CSS sono registrati come elementi separati.

I controlli di accessibilità includono il mantenimento del contenuto e della funzione al ridimensionamento del testo del 200% e la ridisposizione del contenuto (reflow) ordinario a scorrimento verticale entro l'equivalente di 320 pixel CSS senza scorrimento in due direzioni. Contenuti come una tabella di dati o una mappa possono avere un'eccezione giustificata bidimensionale, ma tale eccezione non si applica automaticamente all'intera pagina. Per ulteriori dettagli, vedere W3C: ridimensionamento del testo, W3C: reflow, condizioni ed eccezioni .

Riprodurre e diagnosticare l'overflow orizzontale

Basta aggiungere la seguente dichiarazione in fondo al tuo CSS originale e aprirlo a 390px. La prima scheda richiede almeno 40rem, quindi non si adatterà allo schermo. Seleziona la scheda usando la selezione degli elementi negli strumenti per sviluppatori e controlla la larghezza calcolata e il min-width.

.card:first-child { min-width: 40rem; }

Questo problema potrebbe non essere risolto semplicemente rendendo le colonne della Grid più piccole. Questo perché l'elemento stesso richiede una larghezza minima. Se rimuovi la dichiarazione che hai aggiunto, tornerà al min-width: 0 originale. Controlla nuovamente lo scorrimento orizzontale e la visualizzazione delle schede alla stessa larghezza dello schermo.

Dopo il ripristino, questa volta aggiungi solo la seguente dichiarazione: Controlla dove gli identificatori lunghi traboccano e rimuovi le dichiarazioni extra per ripristinare anywhere. Mettere due problemi contemporaneamente rende difficile capire quale modifica l'ha risolto. La differenza tra larghezza minima e ritorno a capo delle stringhe lunghe viene approfondita nella lezione Overflow CSS, testo lungo a capo e puntini di sospensione.

.card { overflow-wrap: normal; }

Puoi controllare rapidamente se l'intera pagina sta traboccando con i valori seguenti nella console. Se il numero a destra è più grande di quello a sinistra, è un segnale per indagare sulla causa. Questo controllo confronta solo la larghezza del documento e non indica immediatamente quale elemento la sta causando; l'area di scorrimento orizzontale prevista e gli elementi nascosti devono essere determinati separatamente.

({ viewport: window.innerWidth, document: document.documentElement.scrollWidth })

Trova contenuti tagliati da altezze fisse

Con l'originale senza problemi di larghezza, aggiungi semplicemente il seguente codice in fondo: Nota che la descrizione o il link in fondo alla prima scheda viene tagliato. La combinazione di altezza fissa e nascondere è particolarmente problematica perché testo ingrandito o descrizioni lunghe aumentano l'altezza richiesta.

.card:first-child { height: 10rem; overflow: hidden; }

Rimuovi la dichiarazione che hai aggiunto per tornare all'altezza automatica basata sul contenuto. Anche se l'obiettivo del design è quello di eguagliare l'altezza delle card corte, evita di troncare le informazioni. Esamina alternative come impostare un'altezza minima per consentire spazio vuoto o regolare le condizioni di posizionamento, e controlla di nuovo per frasi lunghe e condizioni di ingrandimento. Nascondere lo scorrimento orizzontale o ridurre continuamente la dimensione del carattere per mascherare il problema non è una prima scelta per lo stesso motivo.

Controlla la navigazione tramite tastiera e registra i risultati

Dopo aver aperto una nuova pagina, usa Tab per spostarti nel menu, nel collegamento della scheda, nel campo di inserimento email e nei pulsanti in ordine. Muoviti all'indietro con Shift+Tab e assicurati che il bordo di focus sia visibile. Assicurati che la navigazione verso elementi fuori schermo scorra correttamente e che nessun menu fisso o altri elementi blocchino completamente il focus. Se modifichi l'ordine visivo usando il CSS, assicurati che non confligga con l'ordine di lettura/da tastiera HTML.

Questa tabella è un esempio di come registrare e i risultati effettivi vanno raccolti e verificati nel proprio ambiente. Anche quando si registra che non ci sono stati problemi, è necessario lasciare le condizioni che sono state implementate in modo da poterle confrontare con i cambiamenti successivi. Controllando separatamente la larghezza, l'ingrandimento, il contenuto e il funzionamento della tastiera e ritestando le condizioni di errore originali dopo la correzione, è possibile ridurre i problemi che sono facili da trascurare guardando solo uno schermo.