Anchor-size() - Fonction CSS

anchor-size()

Résumé des caractéristiques de la fonction anchor-size()

Description rapide
Renvoie la teille (hauteur ou largeur) de l'élément désigné comme l'ancre (positionnement par ancrage).
Statut
Problèmes de compatibilité ⚠
Utilisable sur
HTML
Module W3C
Module CSS - Positionnement par ancrages
Références (W3C)
Statut du document: WD (document de travail)

Description de la fonction anchor-size().

⚠
Attention ! La fonction anchor-size() n'est pas encore reconnue par tous les navigateurs (voir le tableau de compatibilité ci-dessous. Les exemples de la page ne fonctionneront que sur les navigateurs qui reconnaissent la fonction.

Le positionnement par ancrage consiste à positionner un élément par rapport à un autre. L'élément qui sert de référence est appelé l'ancre. On lui attribue un identifiant avec la propriété anchor-name. La propriété position-anchor, attribué à l'élément positionné, fait le lien avec l'ancre.
Voici un exemple de code CSS :

#anchor { anchor-name:--demo; } #target { position: absolute; position-anchor:--demo; top: anchor(bottom); left: anchor(right); width: anchor-size(width); }

La fonction anchor() utilisée dans l'exemple positionne l'élément, tandis que la fonction anchor-size(), attribuée à des propriétés telles que width ou height permet de définir les dimensions de l'élément positionné par rapport à celles de l'ancre.

Cette fonction renvoie donc une dimension, ce qui permet de l'utiliser avec les fonctions calc(), minmax(), etc.

Pour de plus amples renseignements sur le positionnement par ancrage, reportez vous aux pages anchor-name, ou à la page sur la fonction anchor().

La valeur anchor-size() peut être utilisée avec les propriétés suivantes :

  • block-size : Définit la dimension d'un l'élément suivant la direction des blocs. Pour les langues latines, cette propriété logique est équivalente à height.
  • height : Définit la hauteur de l'élément.
  • inline-size : Définit la dimension de l'élément dans la direction des lignes. Pour les langues latines cette propriété est équivalente à width.
  • inset : Définit la position de l'élément lorsque celui-ci est positionné autrement qu'en statique. Raccourci pour top, right, bottom et left.
  • inset-block : Définit l'emplacement d'un élément positionné, dans la direction des blocs. Raccourci pour inset-block-start et inset-block-end.
  • inset-inline : Définit l'emplacement d'un élément positionné dans la direction des lignes. Raccourci pour inset-inline-start et inset-inline-end.
  • margin : Résumé des quatre marges.
  • margin-block : Définit la dimension des marges dans la direction des blocs compte-tenu du mode d'écriture.
  • margin-inline : Définit la dimension des marges au début et à la fin des lignes, compte tenu du mode d'écriture.
  • max-height : Définit une limite à la hauteur maximale de l'élément.
  • max-width : Définit la largeur maximale de l'élément.
  • min-height : Définit la hauteur minimale de l'élément.
  • min-width : Définit la largeur minimale de l'élément.
  • width : Définit la largeur de l'élément.

Ainsi que toutes les propriétés détaillées correspondantes (inset-block-start par exemple).

Syntaxes de la fonction anchor-size().

  • width: anchor-size(width); height: anchor-size(height);

    Ces deux propriétés définissent la largeur (width) et la hauteur (height) de l'élément positionné conformément à celles de l'ancre.
    Vous pouvez ajuster la taille de l'ancre.

    ⚓
    width:anchor(width);
    height:anchor(height);
  • inline-size: anchor-size(inline); block-size: anchor-size(block);

    Les valeurs block et inline sont sensibles au mode d'écriture en fonction de la langue. Mais sinon, elles se comportent comme height et width.

    Mode d'écriture :
    ⚓
    block-size:anchor(block);
    inline-size:anchor(inline);
  • width: anchor-size(--id width, 100px); height: anchor-size(--id height, 50px); i d

    Il est possible de spécifier un autre identifiant que celui qui est normalement affecté à l'ancre. Néanmoins l'identifiant défini pour positionner l'élément reste valide. Il ne faut donc par supprimer la propriété position-anchor. Ce identifiant i spécifie simplement que les dimensions de l'élément sont définies par une autre ancre.

    Dans l'exemple ci-dessous la position de l'élément est défini par l'image d'une ancre, mais ses dimensions sont définies par celles de l'image de la cible (vous pouvez ajuster celles-ci pour vous en convaincre).

    Si l'identifiant de la cible n'est pas trouvé, ce sont les dimensions indiquées en dernier (d) qui sont finalement prises en compte.

    ⚓
    🎯
    width:anchor(--syntax2 width, 100px);
    height:anchor(--syntax2, 50px);

Simulateur avec la fonction anchor-size().

Le simulateur vous permet de choisir la valeur pour la largeur et la hauteur de l'élément positionné (via anchor-size()) et d'ajuster les dimensions de l'ancre.

width :
height :
⚓
Élément
positionné

Support de la fonction anchor-size().

Colonne 1
Prise en charge générale du positionnement par ancrage.
Colonne 2
Reconnaissance par les navigateurs de la fonction anchor-size() pour dimensionner l'élément positionné (position par ancrage).

Remarques :

(1) Désactivé par défaut. Peut être activé en positionnant le flag layout.css.anchor-positioning.enabled à true.

1
Positionnement
par ancrage
2
Fonction
anchor-size()
Estimation de la prise en charge globale.
71%
71%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Opéra

Firefox

1

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la fonction anchor-size().

Voir aussi au sujet du positionnement par ancrage.

Voici la liste des propriétés et fonctions décrites dans la spécification CSS Anchor Positioning".

Propriétés :

⚠
anchor-name
Défiinit un identifiant pour l'élément qui peut dès lors devenir une ancre.
⚠
anchor-scope
Définit la portée de la propriété anchor-name.
⚠
position-anchor
Définit par rapport à quelle ancre doit se positionner l'élément.
⚠
position-area
Définit comment se positionne un élément par rapport à l'ancre (au dessus, à côté, etc.).
position-try
Propriété raccourcie qui résume les valeurs pour position-try-fallbacks et position-try-order.
⚠
position-try-fallbacks
Spécifie une liste de position pour l'élément positionné (positionnement par ancrage) afin que le navigateur puisse choisir celle qui est le plus adapté à un moment donné, compte tenu des défilements ou des zooms.
⚠
position-try-order
Définit un ordre différent pour les valeurs énumérées par position-try-fallbacks.
⚠
position-visibility
Définit si l'élément positionné est visible ou pas, dans le contexte d'un positionnement par ancrage.

Fonctions :

⚠
anchor()
Renvoie la position d'un des bords de l'élément désigné comme ancre (positionnement par ancrage).

Directives :

⚠
@position-try
Définit un ensemble de règles pour chacune des position d'ancrage et leur donne un nom (positionnement par ancrage).