Tips and Tricks: CSS Anchor & Popover

I popover, che si tratti di menù, toggletips o finestre di dialogo, sono ormai ovunque sul web.
Si dividono in due macrocategorie:

• Modal: non è permesso interagire col resto della pagina finché il popover non viene attivato/disattivato in qualche modo.
• Non-modal: sono possibili le interazioni con altri elementi mentre è in mostra il popover.

Quelli creati usando la popover HTML API, ancora in fase sperimentale, fanno parte della seconda categoria e includono elementi user-interactive come notifiche “toast”, selettori di contenuti, etc.

Nonostante la loro massiccia presenza sul web, realizzarli può rivelarsi sorprendentemente tedioso.
Ma quanto sarebbe bello se fosse possibile strutturarli solamente con del CSS? Ebbene adesso con la nuova anchor feature è possibile!

N.B: Per il momento, è necessario andare al seguente indirizzo del browser Chrome: chrome://flags e abilitare l’opzione Experimental Web Platform features

Immaginiamo, quindi, di avere un input per inserire una password: l'utente, a primo impatto, potrebbe non conoscere i requisiti minimi, perciò vogliamo inserire un <button> che comporterà l'apertura di un menù a tendina con le informazioni necessarie.

<form action="form">
    <div class="label-container">
        <label for="password">Password</label>
        <button 
            popovertarget="info" 
            id="btn" 
            type="button" 
            class="information">
            i
        </button>
        <div id="info" popover anchor="btn">
            Password must be at least 6 characters
        </div>
    </div>
</form>

In HTML colleghiamo il requisito (popover attribute) al bottone (popovertarget attribute) sfruttando l'id; inoltre inseriamo l'attributo anchor per posizionarlo.
Inset: unset rimuoverà gli stili automatici di posizione.

[popover]{
    inset: unset;
    bottom: anchor(top);
    left: anchor(center);
    translate: -50%;
}

Tramite la funzione anchor() posizioniamo il requisito rispetto al bottone (in questo caso sopra ad esso), e successivamente con poche righe di CSS, al centro.

In aggiunta è possibile specificare il tipo di visualizzazione attraverso l'attributo popovertargetaction: show, hide o toggle (default).

PRO-TIP: Un altro metodo per connettere bottone e info è utilizzare l'anchor-name sfruttando CSS se si vuole avere HTML più pulito (consigliato).

.information {
    anchor-name: --i-btn;
}

[popover]{
    anchor-default: --i-btn;
    inset: unset;
    bottom: anchor(top);
    left: anchor(center);
    translate: -50%;
}

N.B: il nome deve iniziare con “--”

E se volessimo renderlo responsive?
Grazie alla feature @position-fallback è possibile con pochissime righe di codice.

.information {
    anchor-name: --i-btn;
}

[popover]{
    anchor-default: --i-btn;
    position-fallback: --top-to-bottom;
    inset: unset;
    translate: -50%;
}

@position-fallback --top-to-bottom {
    @try {
        bottom: anchor(top);
        left: anchor(center);
    }

    @try {
        top: anchor(bottom);
        left: anchor(center);
    }
}

Grazie ad una sintassi molto simile a quella delle @keyframes, attraverso una sequenza di transizioni quello che fa è cercare di posizionare il popover finché non trova posto nella pagina.
In questo modo nel momento in cui ridimensioniamo la pagina, il menù a tendina si sposterà automaticamente dall'alto al basso.

Di seguito l'esempio completo:

Questa funzionalità potrebbe sostituire la complessità di Javascript... è sconvolgente! E poi apporterebbe anche un gran vantaggio per le aziende in termini di tech debt(basti pensare l'impatto che ebbe la feature Flexbox sullo sviluppo web).
Ma questo è solo la punta dell'iceberg e il 2023 si prospetta un anno fantastico per il mondo CSS!