Content Reflow
Riflusso del contenuto
Il riformattamento dei contenuti adatta una pagina in uno spazio stretto senza perdere contenuti o funzionalità. La maggior parte della lettura non dovrebbe richiedere lo scorrimento bidirezionale.
320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scroll3 colonneRestringi1 colonnamin-inline-size: 0overflow-x:auto320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scrollA11YUn altro esempio
Con uno zoom del 400%, le carte si impilano in una colonna e il testo va a capo. Una tabella larga scorre solo all'interno della propria area.
Parti principali
- 01Vista stretta
- 02Testo a capo
- 03Aree impilate
- 04Controlli in crescita
- 05eccezione di overflow locale
- 06Nessuna funzione persa
Usalo quando
Testa a una larghezza pari a 320 pixel CSS. Lascia che il testo vada a capo, che i controlli crescano e che le sezioni della pagina si impilino.
Non usarlo quando
Non nascondere o troncare contenuti importanti ad alto zoom. Evita lo scorrimento orizzontale in tutta la pagina.
Nome usato nel codice
320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scroll Prima di spedire
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Riflusso del contenuto (Content Reflow). User context: Con uno zoom del 400%, le carte si impilano in una colonna e il testo va a capo. Una tabella larga scorre solo all'interno della propria area. Recommended pattern: Riflusso del contenuto (Content Reflow). Why it fits: Testa a una larghezza pari a 320 pixel CSS. Lascia che il testo vada a capo, che i controlli crescano e che le sezioni della pagina si impilino. Do not use it when: Non nascondere o troncare contenuti importanti ad alto zoom. Evita lo scorrimento orizzontale in tutta la pagina. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Lo standard copre solo l'ambito elencato. Non sceglie lo stile visivo, la decisione sul prodotto o l'esempio di vocabolario. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Controlla questa richiesta
Review how Riflusso del contenuto (Content Reflow) is used now. Definition: Il riformattamento dei contenuti adatta una pagina in uno spazio stretto senza perdere contenuti o funzionalità. La maggior parte della lettura non dovrebbe richiedere lo scorrimento bidirezionale. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.