Le sezioni di contenuti comprimibili, a volte descritte come a fisarmonica, sono un pattern di interfaccia utente comune. Tuttavia, non è possibile cercare i contenuti nascosti nelle sezioni compresse utilizzando la ricerca nella pagina. Inoltre, non è possibile creare link a frammenti di testo all'interno di regioni compresse.
L'attributo HTML hidden=until-found e l'evento beforematch possono risolvere questi problemi. Aggiungendo hidden=until-found al contenitore dei contenuti nascosti, consenti al browser di cercare il testo nella regione nascosta e di mostrare la sezione se viene trovata una corrispondenza.
Queste funzionalità sono disponibili a partire da Chrome 102, quindi vediamo come funzionano.
Modalità d'uso
Se il tuo sito web ha 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 mantenuto sincronizzato con l'eventuale visualizzazione della sezione, aggiungi un gestore di eventi beforematch che verrà attivato sull'elemento hidden=until-found subito prima che l'elemento venga visualizzato dal browser.
Avvertenze
Per un'esperienza utente coerente, i contenuti hidden=until-found devono essere visibili senza l'utilizzo della funzionalità Trova nella pagina. Non tutti gli utenti utilizzeranno la funzionalità Trova nella pagina e i browser che non supportano hidden=until-found offriranno l'esperienza originale dei contenuti nascosti senza la funzionalità Trova nella pagina.
Se vuoi assicurarti che i contenuti nascosti siano disponibili per la ricerca sui browser che non supportano hidden=until-found, puoi sempre espanderli in questi browser. Il rilevamento delle funzionalità può essere eseguito controllando la presenza del gestore 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 dall'attributo hidden normale. Questa operazione è necessaria per cercare i contenuti quando sono chiusi, ma ha anche i seguenti effetti collaterali:
- Alcune API di layout, come
getBoundingClientRect, segnalano che i contenuti nascosti all'interno dell'elementogetBoundingClientRectoccupano spazio e hanno una posizione nella pagina.hidden=until-found - I nodi secondari dell'elemento
hidden=until-foundnon verranno visualizzati, ma l'elementohidden=until-foundstesso avrà comunque una casella. Ciò significa che le proprietà CSS come bordo e dimensioni esplicite influiranno comunque sul rendering.
Ad esempio, la seguente demo aggiunge margine, bordo e spaziatura interna all'elemento a cui è stato applicato hidden=until-found. Al posto dei contenuti nascosti viene visualizzata una casella con un bordo grigio, che si riempie con i contenuti nascosti quando vengono rivelati. Questa è la casella dell'elemento nascosto.
Per evitare questo problema, aggiungi il bordo a un elemento nidificato all'interno del contenitore che ha hidden=until-found.