Le sezioni di contenuti comprimibili, a volte descritte come una 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 collegarsi a frammenti di testo all'interno delle 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 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 mantenuto sincronizzato con l'eventuale visualizzazione della sezione, aggiungi un ascoltatore 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 Trova nella pagina e i browser che non supportano hidden=until-found usufruiranno dell'esperienza originale dei contenuti nascosti senza che questa funzionalità sia visibile.
Per assicurarti che i tuoi contenuti nascosti siano disponibili per la ricerca sui browser che non supportano hidden=until-found, puoi sempre espandere i contenuti nascosti in tali 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 a cui si applica il normale attributo nascosto. 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 il bordo e le dimensioni esplicite, continueranno a influire sul rendering.
Ad esempio, la seguente demo aggiunge margine, bordo e spaziatura interna all'elemento a cui è 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.