Xywh() - Fonction CSS

Schéma syntaxique de xywh().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

• x, y, w, h sont quatre valeurs numériques positives ou nulles suivies d'une des unités de dimension, ou un pourcentage calculé par rapport à la largeur ou à la hauteur de l'élément.
• r et r' sont des valeurs positives ou nulles (rayon de l'arrondi d'angle) ou des pourcentages.

Description de la fonction xywh().

La fonction xywh() renvoie l'élément découpé suivant un rectangle. Elle peut être utilisé avec clip-path pour découper une élément, ou avec shape-outside pour définir une marge autour de cet élément.

clip-path:none;

clip-path:wywh(20px 20px 60px 80px);

Reportez vous également aux propriétés clip-path, shape-outside et offset-path.

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

• clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...).
• offset-path : Définit le chemin sur lequel pourra se posiitionner un élément (Motion path).
• shape-outside : Définit la forme du contournement du texte pour un élément flottant.

Syntaxes de la fonction xywh().

• <propriété>: xywh(8px 8px 100px 100px); x y w h

  Les quatre paramètres sont des valeurs positives ou nulles. Leur signification est donnée ci-dessous.
  S'il s'agit de pourcentages, ils seront calculés par rapport à la largeur de l'élément pour x et pour w, et par rapport à la hauteur pour y et h.

  

• <propriété>: xywh(8px 8px 100px 100px round 10px 15px 10px 15px); r1 r2 r3 r4

  Le mot round introduit les arrondis d'angle, avec la même syntaxe que la propriété border-radius. En fonction du nombre de valeurs, voici comment interpreter ces nombres.

  
  Une seule valeur

  
  Deux valeurs

  
  Trois valeurs

  
  Quatre valeurs
• <propriété>: xywh(8px 8px 100px 100px round 10px / 2px);

  Le slash ( / ) introduit la possibilité d'arrondis non réguliers (voir border-radius). La rège en fonction du nombre de valeurs est la même qui ci-dessus.

  

Animation avec la fonction xywh().

L'animation ci-dessous a été réalisée sur les quatre premiers paramètres de xywh(). Notez que, avec Edge   ou Chrome  , les animations sur les arrondis d'angle ne permettent pas une évolution progressive des valeurs.

Support de la fonction xywh().

La fonction xywh() est bien reconnue par tous les grands navigateurs actuels.

1

Fonction
xywh()

Estimation de la prise en charge globale.

87%

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

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

Historique de la fonction xywh().

• Module CSS - Formes de base - Niveau 1

  Introduction de la fonction xywh().
  

  20 Juin 2013

  Document de travail.

  

  20 Mars 2014

  Candidat à la recommandation.

  

  

Autres fonctions de calcul.

Propriétés :

Fonctions :