Presentazione dell'API di posizionamento anchor CSS

L'API CSS Anchor Positioning rappresenta una svolta nello sviluppo web, in quanto consente di posizionare in modo nativo elementi rispetto ad altri elementi, noti come ancoraggi. Questa API semplifica i complessi requisiti di layout per molte funzionalità dell'interfaccia, ad esempio 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, potrai creare interfacce utente a più livelli senza ricorrere a librerie di terze parti, aprendo un mondo di possibilità creative.

Il posizionamento di ancoraggio è disponibile in Chrome 125.

Concetti principali: ancoraggi ed elementi posizionati

Al centro di questa API c'è la relazione tra gli ancoraggi 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 che utilizza la proprietà position-anchor o utilizza esplicitamente anchor-name nella logica di posizionamento.

Configurazione degli ancoraggi

Creare un ancoraggio è semplice. Applica la proprietà anchor-name all'elemento selezionato e assegnagli un identificatore univoco. Questo identificatore univoco deve essere anteposto a un doppio trattino, in modo molto simile a una variabile CSS.

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

Una volta assegnato un nome di ancoraggio, .anchor-button funge da ancoraggio, ed è 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 nell'esempio di codice riportato di seguito. 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 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'ancoraggio direttamente nella funzione di ancoraggio (ad esempio top: anchor(--anchor-el bottom). Questa operazione è chiamata ancoraggio esplicito e può essere utile se vuoi ancorare a più elementi (leggi per un esempio).

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

Posizionare gli elementi in relazione agli ancoraggi

Il posizionamento dell'ancoraggio si basa sul posizionamento assoluto CSS. Per utilizzare i valori di posizionamento, devi aggiungere position: absolute all'elemento posizionato. Successivamente, 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);
}

A questo punto, un elemento è ancorato a un altro, ad esempio:

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 posizionato e dell'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;
}

Ancoraggi multipli

Gli elementi possono essere collegati tramite tethering a più di un anchor. Ciò significa che potrebbe essere necessario impostare i valori di posizione che sono posizionati rispetto a più di un ancoraggio. A tal fine, utilizza la funzione anchor() e indica esplicitamente a quale ancoraggio fai riferimento nel primo argomento. Nell'esempio seguente, la parte superiore sinistra di un elemento posizionato è ancorata alla parte in basso a destra di un ancoraggio, mentre la parte inferiore destra dell'elemento posizionato è ancorata alla parte 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);
}

Posizione con inset-area

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

L'area integrata semplifica il posizionamento degli elementi ancorati posizionati in relazione ai rispettivi ancoraggi e funziona su una griglia a 9 celle con l'elemento di ancoraggio al centro.

Varie opzioni di posizionamento dell'area inserite nell'area mostrate nella griglia a 9 celle

Per usare un'area inserita 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

Per esaminare ulteriormente queste posizioni, dai un'occhiata al seguente strumento:

Ridimensiona gli elementi con anchor-size()

La funzione anchor-size(), che fa parte anche dell'API di posizionamento dell'ancoraggio, può essere utilizzata per dimensionare o posizionare un elemento ancorato in base alle dimensioni del suo ancoraggio (larghezza, altezza o dimensioni in linea e blocco).

Il codice CSS seguente mostra un esempio di utilizzo di questo parametro per l'altezza,con 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);
}

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

Il posizionamento degli ancoraggi funziona in modo eccellente con gli elementi di livello superiore come popover. e <dialog>. Anche se questi elementi sono posizionati in un livello separato dal resto del sottoalbero del DOM, il posizionamento dell'ancoraggio ti consente di riportarli al livello e scorrere insieme agli elementi che non si trovano nel livello superiore. Si tratta di una grande opportunità per le interfacce a più livelli.

Nell'esempio seguente, una serie di popup della descrizione comando viene attivata tramite 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 sul pulsante e sulla descrizione comando. Poiché ogni ancoraggio necessita di un nome univoco, l'incorporamento è il modo più semplice per generare contenuti dinamici.

Regola le posizioni di ancoraggio con @position-try

Una volta individuata la posizione di ancoraggio iniziale, 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.

Nell'esempio che segue, viene visualizzato un sottomenu a destra di un menu. I menu e i sottomenu sono un ottimo utilizzo dell'API di posizionamento dell'ancoraggio insieme all'attributo popover, in quanto questi menu tendono a essere ancorati a un pulsante di attivazione.

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

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

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

Quindi, 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 a position-try-options. L'insieme dell'immagine è simile a questo:

#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;
}

Parole chiave che capovolgono automaticamente la posizione dell'ancoraggio

Se disponi di una regolazione di base, come la rotazione dall'alto verso il basso o da sinistra a destra (o entrambe), puoi persino saltare il passaggio della creazione di dichiarazioni @position-try personalizzate e utilizzare le parole chiave a rotazione integrate supportate dal browser come flip-block e flip-inline. Questi valori sostituiscono le dichiarazioni @position-try personalizzate e possono essere utilizzati in combinazione tra loro:

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

Le parole chiave capovolte possono semplificare notevolmente il 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;
}

position-visibility per gli ancoraggi negli scorrimenti secondari

In alcuni casi potresti voler ancorare un elemento all'interno di un subscroller della pagina. In questi casi, puoi controllare la visibilità dell'ancoraggio usando position-visibility. Quando rimane visibile l'ancoraggio? Quando scompare? Con la funzionalità puoi controllare queste opzioni. Puoi usare position-visibility: anchors-visible quando vuoi che l'elemento posizionato rimanga visibile finché l'ancoraggio non è visibile:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

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

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

Rilevamento delle funzionalità e polyfilling

Poiché al momento il supporto del browser è limitato, probabilmente vorrai utilizzare questa API con alcune precauzioni. Innanzitutto, puoi verificare l'assistenza direttamente in CSS utilizzando la query sulla funzionalità @supports. Per farlo, puoi aggregare gli stili di ancoraggio come segue:

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

  /* Anchor styles here */

}

Inoltre, puoi eseguire il polyfill della funzionalità di posizionamento dell'ancoraggio con il polyfill di posizionamento dell'ancoraggio 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, anche se l'implementazione corrente non è completa e contiene una sintassi obsoleta. Puoi utilizzare il link unpkg o importarlo direttamente in un gestore di pacchetti.

Nota sull'accessibilità

Sebbene l'API di posizionamento dell'ancoraggio permetta di posizionare un elemento rispetto agli altri, non crea intrinsecamente alcuna relazione semantica significativa tra loro. Se esiste effettivamente una relazione semantica tra l'elemento di ancoraggio e l'elemento posizionato (ad esempio l'elemento posizionato è un commento nella barra laterale sull'ancoraggio text), un modo per farlo è utilizzare aria-details per puntare dall'elemento di ancoraggio agli elementi posizionati. I software per screen reader stanno 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 dello stato attivo della navigazione per una corretta accessibilità, quindi non è necessario che i popover o le finestre di dialogo siano in ordine DOM. Ulteriori informazioni sulla nota sull'accessibilità nelle specifiche.

Conclusione

Si tratta di una funzionalità completamente nuova e non vediamo l'ora di scoprire come puoi utilizzarla. Finora, abbiamo visto alcuni casi d'uso davvero interessanti nella community, come le etichette dinamiche nei grafici, nelle linee di collegamento, nelle note a piè di pagina e nei riferimenti incrociati visivi. Durante la sperimentazione del posizionamento degli ancoraggi, ci piacerebbe ricevere il tuo feedback e, in caso di bug, contattaci.

Per approfondire

• Disegno di una linea per collegare elementi con il posizionamento degli ancoraggi CSS
• CSS futuro: posizionamento ancorato di Roman Komarov
• Una raccolta Codepen di demo di anchor
• Strumento di posizionamento degli ancoraggi