Presentazione dell'API di posizionamento anchor CSS

Una Kravets

L'API CSS Anchor Positioning rappresenta una svolta nello sviluppo web perché ti consente di posizionare in modo nativo gli elementi rispetto ad altri elementi, noti come anchor. Questa API semplifica i complessi requisiti di layout per molte funzionalità dell'interfaccia come menu e sottomenu, descrizioni comando, selezioni, etichette, schede, finestre di dialogo delle impostazioni e molto altro ancora. Grazie al posizionamento degli ancoraggi integrato nel browser, sarai in grado di creare interfacce utente a più livelli senza fare affidamento su librerie di terze parti, aprendo un mondo di possibilità creative.

Il posizionamento degli ancoraggi è disponibile da Chrome 125.

Supporto dei browser

  • Chrome: 125.
  • Edge: 125.
  • Firefox: non supportato.
  • Safari: non supportato.

Origine

Concetti principali: ancoraggi ed elementi posizionati

Alla base di questa API c'è la relazione tra anchor ed elementi posizionati. Un ancoraggio è un elemento designato come punto di riferimento utilizzando la proprietà anchor-name. Un elemento posizionato è un elemento posizionato rispetto a un ancoraggio utilizzando la proprietà position-anchor o utilizzando esplicitamente anchor-name nella sua logica di posizionamento.

Ancoraggio ed elementi posizionati.

Configurare gli ancoraggi

Creare un ancoraggio è semplice. Applica la proprietà anchor-name all'elemento selezionato e assegnagli un identificatore univoco. L'identificatore univoco deve essere preceduto da un doppio trattino, proprio come una variabile CSS.

.anchor-button {
    anchor-name: --anchor-el;
}

Dopo aver assegnato un nome di ancoraggio, .anchor-button funge da ancoraggio, pronto a guidare il posizionamento di altri elementi. Puoi collegare questo ancoraggio ad altri elementi in due modi:

Ancoraggi impliciti

Il primo modo per collegare un ancoraggio a un altro elemento è tramite un ancoraggio implicito, come nel seguente esempio di codice. La proprietà position-anchor viene aggiunta all'elemento che vuoi collegare all'ancoraggio e ha il nome dell'ancoraggio (in questo caso --anchor-el) come valore.

.positioned-notice {
    position-anchor: --anchor-el;
}

Con una relazione di ancoraggio implicita, puoi posizionare gli elementi utilizzando la funzione anchor() senza specificare esplicitamente il nome dell'ancoraggio nel primo argomento.

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

Ancoraggi espliciti

In alternativa, puoi utilizzare il nome dell'anchor direttamente nella funzione di ancoraggio (ad esempio, top: anchor(--anchor-el bottom). Si tratta di un ancoraggio esplicito e può essere utile se vuoi ancorare a più elementi (continua a leggere per un esempio).

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

Posiziona gli elementi rispetto agli ancoraggi

Diagramma del posizionamento di ancoraggio con le proprietà fisiche.

Il posizionamento degli ancoraggi si basa sul posizionamento assoluto CSS Per utilizzare i valori di posizionamento, devi aggiungere position: absolute all'elemento posizionato. A questo punto, utilizza la funzione anchor() per applicare i valori di posizionamento. Ad esempio, per posizionare un elemento ancorato in alto a sinistra dell'elemento di ancoraggio, utilizza il seguente posizionamento:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}
Diagramma dei bordi di posizionamento sull'elemento posizionato.

Ora hai un elemento ancorato a un altro, in questo modo:

di Gemini Advanced.
Demo di un ancoraggio di base.

Screenshot della demo.

Per utilizzare il posizionamento logico per questi valori, gli equivalenti sono i seguenti:

  • top = inset-block-start
  • left= inset-inline-start
  • bottom = inset-block-end
  • right= inset-inline-end

Centra un elemento posizionato con anchor-center

Per semplificare la centratura dell'elemento con posizionamento di ancoraggio rispetto al suo ancoraggio, è disponibile un nuovo valore chiamato anchor-center che può essere utilizzato con le proprietà justify-self, align-self, justify-items e align-items.

Questo esempio modifica quello precedente utilizzando justify-self: anchor-center per centrare l'elemento posizionato sopra l'ancoraggio.

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}
di Gemini Advanced.
Demo di un ancoraggio centrato con justify-center.

Screenshot della demo.

Più ancoraggi

Gli elementi possono essere associati a più di un ancoraggio. Ciò significa che potrebbe essere necessario impostare valori di posizione che sono posizionati rispetto a più di un ancoraggio. Per farlo, utilizza la funzione anchor() e indica esplicitamente a quale ancoraggio fai riferimento nel primo argomento. Nell'esempio seguente, l'angolo in alto a sinistra di un elemento posizionato è ancorato all'angolo in basso a destra di un ancoraggio, mentre l'angolo in basso a destra dell'elemento posizionato è ancorato all'angolo in alto a sinistra del secondo ancoraggio:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}
di Gemini Advanced.
Demo che mostra più ancoraggi.

Screenshot della demo.

Posizione con inset-area

Oltre al posizionamento direzionale predefinito dal posizionamento assoluto, nell'API di ancoraggio è stato incluso un nuovo meccanismo di layout, chiamato area riquadro.

L'area interna consente di posizionare facilmente gli elementi di ancoraggio rispetto ai rispettivi ancoraggi e funziona su una griglia a 9 celle con l'elemento di ancoraggio al centro.

Varie possibili opzioni di posizionamento all'interno dell'area, mostrate sulla griglia a 9 celle

Per utilizzare l'area interna anziché il posizionamento assoluto, usa la proprietà inset-area, con valori fisici o logici. Ad esempio:

  • In alto al centro: inset-area: top o inset-area: block-start
  • A sinistra al centro: inset-area: left o inset-area: inline-start
  • In basso al centro: inset-area: bottom o inset-area: block-end
  • Al centro a destra: inset-area: right o inset-area: inline-end
di Gemini Advanced.
di Gemini Advanced.
Demo che mostra più ancoraggi.

Screenshot della demo.

Per esplorare ulteriormente queste posizioni, utilizza il seguente strumento:

Strumento di ancoraggio per le posizioni dei riquadri.

Dimensioni degli elementi con anchor-size()

La funzione anchor-size(), anch'essa parte dell'API di posizionamento degli ancoraggi, può essere utilizzata per ridimensionare o posizionare un elemento posizionato negli ancoraggi in base alle dimensioni dell'ancoraggio (larghezza, altezza o dimensioni in linea e del blocco).

Il seguente CSS mostra un esempio di utilizzo per l'altezza,utilizzando anchor-size(height) all'interno di una funzione calc() per impostare l'altezza massima della descrizione comando in modo che sia il doppio dell'altezza dell'ancoraggio.

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}
di Gemini Advanced.
Demo per anchor-size

Screenshot della demo.

Utilizza l'ancoraggio con elementi di livello superiore come popover e finestre di dialogo

Il posizionamento degli ancoraggi funziona incredibilmente con elementi di primo livello come popover. e <dialog>. Mentre questi elementi sono posizionati in un livello separato dal resto del sottoalbero del DOM, il posizionamento dell'ancoraggio ti consente di eseguirne il tethering e di scorrere insieme agli elementi non nel livello superiore. Si tratta di un enorme vantaggio per le interfacce a più livelli.

Nell'esempio seguente, un insieme di popover di descrizione comando viene attivato utilizzando un pulsante. Il pulsante è l'ancoraggio e la descrizione comando è l'elemento posizionato. Puoi modificare lo stile dell'elemento posizionato come qualsiasi altro elemento ancorato. Per questo esempio specifico, anchor-name e position-anchor sono stili incorporati nel pulsante e nella descrizione comando. Dal momento che ogni ancoraggio richiede un nome univoco, quando genera contenuti dinamici, l'incorporamento è il modo più semplice per farlo.

di Gemini Advanced.
Demo sull'uso dell'anchor con popover

Screenshot della demo.

Regola le posizioni degli ancoraggi con @position-try

Una volta stabilita la posizione iniziale dell'ancoraggio, ti consigliamo di regolarla se l'ancoraggio raggiunge i bordi del blocco contenitore. Per creare posizioni di ancoraggio alternative, puoi utilizzare l'istruzione @position-try insieme alla proprietà position-try-options.

Nel seguente esempio, a destra di un menu viene visualizzato un sottomenu. Menu e sottomenu sono un ottimo utilizzo dell'API di posizionamento dell'ancoraggio insieme all'attributo popover, in quanto questi menu tendono ad essere ancorati a un pulsante di attivazione.

Se lo spazio in orizzontale di questo sottomenu non è sufficiente, puoi spostarlo sotto il menu. Per farlo, devi innanzitutto impostare la posizione iniziale:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

A questo punto, configura le posizioni ancorate di riserva utilizzando @position-try:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Infine, collega i due elementi con position-try-options. L'insieme mostra il seguente aspetto:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
  */ connect with position-try options */
  position-try-options: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}
di Gemini Advanced.
Demo sull'uso dell'anchor con popover

Parole chiave inversione automatica della posizione di ancoraggio

Se hai una modifica di base, ad esempio l'inserimento dall'alto verso il basso o da sinistra a destra (o entrambi), puoi persino saltare il passaggio della creazione di dichiarazioni @position-try personalizzate e utilizzare le parole chiave capovolgibili integrate supportate dal browser come flip-block e flip-inline. Funzionano come sostituti delle dichiarazioni @position-try personalizzate e possono essere utilizzate in combinazione:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

Le parole chiave capovolte possono semplificare notevolmente il tuo codice di ancoraggio. Con poche righe puoi creare un ancoraggio completamente funzionale con posizioni alternative:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}
di Gemini Advanced.
Utilizzo della rotazione automatica con position-try-options: flip-block

position-visibility per gli ancoraggi negli scorrimento secondari

In alcuni casi potresti voler ancorare un elemento all'interno di uno scorrimento secondario della pagina. In questi casi, puoi controllare la visibilità dell'ancoraggio utilizzando position-visibility. Quando rimane visibile l'ancoraggio? Quando scompare? Con questa funzionalità puoi controllare queste opzioni. Utilizzerai position-visibility: anchors-visible quando vuoi che l'elemento posizionato rimanga visibile fino a quando l'ancoraggio non è fuori dall'inquadratura:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}
di Gemini Advanced.
Demo di position-visibility: anchors-visible

In alternativa, puoi utilizzare position-visibility: no-overflow per evitare che l'ancoraggio sovraccarichi il suo contenitore.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}
di Gemini Advanced.
Demo di position-visibility: no-overflow

Rilevamento delle caratteristiche e polyfilling

Poiché al momento il supporto del browser è limitato, ti consigliamo di utilizzare questa API con alcune precauzioni. Innanzitutto, puoi verificare l'assistenza direttamente in CSS utilizzando la query sulla funzionalità @supports. Per farlo, inserisci gli stili degli ancoraggi nel seguente modo:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

Inoltre, puoi eseguire il polyfill della funzionalità di posizionamento degli ancoraggi con il polyfill di posizionamento degli ancoraggi CSS di Oddbird, compatibile con Firefox 54, Chrome 51, Edge 79 e Safari 10. Questo polyfill supporta la maggior parte delle funzionalità di base della posizione di ancoraggio, sebbene l'implementazione attuale non sia completa e contenga una sintassi obsoleta. Puoi utilizzare il link unpkg o importarlo direttamente in un gestore di pacchetti.

Una nota sull'accessibilità

Sebbene l'API di posizionamento dell'ancoraggio consenta di posizionare un elemento rispetto ad altri, non crea intrinsecamente una relazione semantica significativa tra loro. Se esiste una relazione semantica tra l'elemento anchor e l'elemento posizionato (ad esempio, l'elemento posizionato è un commento nella barra laterale sull'anchor text), un modo per farlo è utilizzare aria-details per puntare dall'elemento di ancoraggio agli elementi posizionati. Il software per screen reader sta ancora imparando a gestire i dettagli ARIA, ma il supporto sta migliorando.

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>

.anchor {
  anchor-name: --anchor;
}

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

Se utilizzi il posizionamento di ancoraggio con l'attributo popover o con un elemento <dialog>, il browser gestirà le correzioni della navigazione dello stato attivo per una corretta accessibilità, quindi non è necessario avere popover o finestre di dialogo in ordine DOM. Per saperne di più, consulta la nota sull'accessibilità nelle specifiche.

Conclusione

Si tratta di una funzionalità completamente nuova e non vediamo l'ora di scoprire cosa realizzerai con questa funzionalità. Finora, abbiamo osservato casi d'uso davvero interessanti da parte della community, come le etichette dinamiche nei grafici, le linee di connessione, le note a piè di pagina e i riferimenti incrociati visivi. Durante la sperimentazione del posizionamento degli ancoraggi, ci piacerebbe ricevere il tuo feedback e, se riscontri bug, contattaci.

Per approfondire