Le sezioni di contenuti compressi, a volte descritte come fisarmonica, sono un pattern di UI comune. Tuttavia, la ricerca dei contenuti nascosti nelle sezioni compresse diventa impossibile. Inoltre, non è possibile creare link a frammenti di testo all'interno delle regioni compresse.
L'attributo HTML hidden=until-found e l'evento beforematch possono risolvere questi problemi. Se aggiungi hidden=until-found al contenitore dei contenuti nascosti, consenti al browser di cercare testo nell'area nascosta e di mostrare la sezione se viene trovata una corrispondenza.
Queste funzionalità sono disponibili nella versione 102 di Chrome, quindi diamo un'occhiata al loro funzionamento.
Come si utilizza
Se il tuo sito web contiene già sezioni comprimibili che vuoi rendere disponibili per la ricerca, sostituisci gli stili che rendono la sezione nascosta con l'attributo hidden=until-found. Se la pagina ha anche un altro stato che deve essere sincronizzato con la visualizzazione o meno della sezione, aggiungi un listener di eventi beforematch che verrà attivato sull'elemento hidden=until-found subito prima che l'elemento venga rilevato dal browser.
Avvertenze
Per garantire un'esperienza utente coerente, i contenuti di hidden=until-found devono essere visibili senza l'uso della funzionalità Trova nella pagina. Non tutti gli utenti utilizzeranno la funzionalità Find-in-Page e i browser che non supportano hidden=until-found otterranno l'esperienza originale dei contenuti nascosti senza rivelare il valore Trova nella pagina.
Se vuoi assicurarti che i contenuti nascosti siano disponibili per la ricerca nei browser che non supportano hidden=until-found, puoi sempre espandere i contenuti nascosti in tali browser. Il rilevamento delle funzionalità può essere effettuato controllando la presenza del gestore di eventi beforematch:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found applica la proprietà CSS content-visibility:hidden anziché la proprietà display:none applicata dal normale attributo nascosto. Questa operazione è necessaria per eseguire ricerche nei contenuti quando è chiusa, ma presenta anche i seguenti effetti collaterali:
- Alcune API di layout, come
getBoundingClientRect, segnalano che i contenuti nascosti all'interno dell'elementohidden=until-foundoccupano spazio e sono posizionati nella pagina. - I nodi secondari dell'elemento
hidden=until-foundnon verranno visualizzati, mentre l'elementohidden=until-foundavrà comunque un riquadro. Ciò significa che le proprietà CSS, come il bordo e le dimensioni esplicite, continueranno a influire sul rendering.
Come esempio, la demo seguente aggiunge margine, bordo e spaziatura interna all'elemento a cui è applicato hidden=until-found. Nel punto in cui i contenuti nascosti vengono visualizzati c'è una casella con un bordo grigio, che viene poi compilato con i contenuti nascosti quando vengono mostrati. Questo è il riquadro dell'elemento nascosto.
Per evitare questo problema, aggiungi il bordo a un elemento nidificato all'interno del contenitore che contiene hidden=until-found.
Immagine hero di Thomas Bormans.