Presentazione dell'API di posizionamento anchor CSS

Una Kravets

Data di pubblicazione: 10 maggio 2024

Nota: questo post del blog riguarda la sintassi inclusa in Chrome 125. Successivamente, il gruppo di lavoro CSS ha risolto due modifiche alla funzionalità: ha rinominato la proprietà inset-area in position-area e position-try-options in position-try-fallbacks. Questi aggiornamenti sono stati rilasciati in Chrome 129. La documentazione sul posizionamento degli ancoraggi illustra la nuova sintassi.

L'API CSS Anchor Positioning è un punto di svolta nello sviluppo web perché ti consente di posizionare in modo nativo gli elementi rispetto ad altri elementi, noti come ancore. Questa API semplifica i requisiti di layout complessi per molte funzionalità dell'interfaccia, come menu e sottomenu, descrizioni comando, selezioni, etichette, schede, finestre di dialogo delle impostazioni e molte altre. 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 dell'ancora è disponibile a partire da Chrome 125.

Supporto dei browser

• 125
• 125
• x
• x

Origine

Concetti principali: ancoraggi ed elementi posizionati

Al centro di questa API c'è la relazione tra ancore ed elementi posizionati. Un'ancora è 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. Questo identificatore univoco deve essere preceduto da un doppio trattino, proprio come una variabile CSS.

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

Una volta 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'ancora a un altro elemento è con un'ancora implicita, come nell'esempio di codice seguente. 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'ancora nel primo argomento.

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

Ancoraggi espliciti

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

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

Posizionare gli elementi rispetto agli elementi di ancoraggio

Diagramma di posizionamento dell'ancora con proprietà fisiche.

Il posizionamento dell'ancora 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, come mostrato nell'immagine seguente.

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

Centrare 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'ancora.

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

Più ancoraggi

Gli elementi possono essere ancorati a più di un'ancora. Ciò significa che potrebbe essere necessario impostare valori di posizione che sono posizionati rispetto a più di un ancoraggio. A tale scopo, utilizza la funzione anchor() e indica esplicitamente l'ancora a cui 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'ancora e l'angolo in basso a destra dell'elemento posizionato è ancorato all'angolo in alto a sinistra della seconda ancora:

.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 dal posizionamento assoluto, nell'API di ancoraggio è incluso un nuovo meccanismo di layout chiamato area incassata.

L'area Inserimento semplifica il posizionamento degli elementi ancorati rispetto ai rispettivi elementi di ancoraggio e funziona su una griglia di 9 celle con l'elemento di ancoraggio al centro.

Varie opzioni di posizionamento dell'area incassata, mostrate nella 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
• Centro-sinistra: inset-area: left o inset-area: inline-start
• In basso al centro: inset-area: bottom o inset-area: block-end
• Centro a destra: inset-area: right o inset-area: inline-end

Modificare le dimensioni degli elementi con anchor-size()

La funzione anchor-size(), che fa parte anche dell'API di posizionamento dell'ancora, può essere utilizzata per impostare le dimensioni o la posizione di un elemento posizionato in base all'ancora (larghezza, altezza o dimensioni in linea e in 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);
}

Utilizzare l'ancora con elementi di primo livello come popup e finestra di dialogo

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

Nell'esempio seguente, un insieme di popup di descrizioni comando viene attivato utilizzando un pulsante. Il pulsante è l'ancora e la descrizione comando è l'elemento posizionato. Puoi applicare uno stile all'elemento posizionato come a 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, durante la generazione di contenuti dinamici, l'incorporamento è il modo più semplice per farlo.

Nota: gli stili dello user agent per gli elementi dei popover e delle finestre di dialogo che li centrano nell'area visibile per impostazione predefinita. Per questo motivo potresti riscontrare problemi di layout. Per tutti gli elementi con posizionamento di ancoraggio, ti consiglio di reimpostare questi stili utilizzando inset: auto per evitare confusione. In futuro, questo valore potrebbe cambiare e diventare uno stile dello user agent predefinito.

Regola le posizioni degli ancoraggi con @position-try

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

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

Per questo sottomenu, se non c'è spazio sufficiente in orizzontale, puoi spostarlo sotto il menu. Per farlo, devi prima impostare la posizione iniziale:

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

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

Poi, 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 dispositivi 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;
}

Nota: al momento, puoi animare position-try-options se applichi stili utilizzando valori posizionati, che possono essere sottoposti a transizione con la proprietà transition, come nella demo qui. inset-area non è ancora trasferibile, ma il team di Chrome sta lavorando a una soluzione.

Parole chiave per la rotazione automatica della posizione dell'ancora

Se hai bisogno di un aggiustamento di base, ad esempio la rotazione dall'alto verso il basso o da sinistra verso destra (o entrambe), puoi anche saltare il passaggio di creazione delle dichiarazioni @position-try personalizzate e utilizzare le parole chiave di 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 tuo codice di ancoraggio. Con poche righe, puoi creare un'ancora completamente funzionale con posizioni alternative:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}

position-visibility per le ancore nei sottomenu

In alcuni casi, potresti voler ancorare un elemento all'interno di un sottomenu della pagina. In questi casi, puoi controllare la visibilità dell'ancora utilizzando position-visibility. Quando l'ancora rimane in vista? Quando scompare? Con questa funzionalità hai il controllo su queste opzioni. Utilizza position-visibility: anchors-visible quando vuoi che l'elemento posizionato rimanga visibile finché l'ancora non è fuori visuale:

#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 sovraccarichi il suo 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 dei 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 di ancoraggio nel seguente modo:

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

  /* Anchor styles here */

}

Inoltre, puoi eseguire il polyfill della funzionalità di posizionamento dell'ancora con il polyfill di posizionamento dell'ancora CSS di Oddbird, che funziona da Firefox 54, Chrome 51, Edge 79 e Safari 10. Questo polyfill supporta la maggior parte delle funzionalità di base della posizione dell'ancora, anche se l'implementazione attuale non è completa e contiene sintassi obsolete. Puoi utilizzare il link unpkg o importarlo direttamente in un gestore dei pacchetti.

Una nota sull'accessibilità

Sebbene l'API di posizionamento dell'ancora consenta di posizionare un elemento rispetto ad altri, non crea intrinsecamente alcuna relazione semantica significativa tra di loro. Se esiste effettivamente una relazione semantica tra l'elemento di ancoraggio e l'elemento posizionato (ad esempio, l'elemento posizionato è un commento della barra laterale sul testo di ancoraggio), un modo per farlo è utilizzare aria-details per indicare l'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 dell'ancora con l'attributo popover o con un elemento <dialog>, il browser gestirà le correzioni di navigazione dell'attenzione per un'accessibilità adeguata, quindi non è necessario che i popup o le finestre di dialogo siano nell'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 visto alcuni casi d'uso davvero interessanti della community, come le etichette dinamiche nei grafici, le linee di collegamento, le note a piè di pagina e i riferimenti incrociati visivi. Mentre esegui esperimenti sul posizionamento dell'ancora, ci farebbe piacere ricevere il tuo feedback e, se riscontri bug, comunicacelo.

Per approfondire

• Disegnare una linea per collegare gli elementi con il posizionamento dell'ancora CSS
• CSS futuro: posizionamento dell'ancora di Roman Komarov
• Raccolta Codepen di demo di ancoraggio di Una
• Strumento di posizionamento dell'ancora