Rect() - Fonction CSS

Description de la fonction rect().

Attention ! Cette fonction est obsolète. Elle est avantageusement remplacée par les fonctions inset() ou polygon() combinée à la propriété clip-path.

La fonction rect() définit un rectangle, qui pourra être utilisé avec la propriété clip pour découper un élément.

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

• clip : Découpe un élément à partir d'un rectangle.

Syntaxes de la fonction rect().

• clip: rect(5px, 10px, 20px, 0px); h d b g

  h, d, b et g sont quatre valeurs numériques positives ou nulle, suivies d'une unité de dimension (voir les unités de dimension).

  Elles sont à comprendre comme le montre le schéma ci-dessous. Le trait plein représente l'élément complet ; le trait pointillé est le rectangle calculé par rect().

  

Simulateur avec la fonction rect()

Le simulateur ci-dessous vous aidera à comprendre les paramètres de la fonction rect(). L'image a été positionnée en absolu (position:absolute) pour que la propriété clip puisse fonctionner, et ses dimensions ont été fixées à 200 pixels de coté.

Compatibilité et prise en charge par les navigateurs.

Fonction obsolète : ne plus utiliser, bien qu'elle soit encore reconnue par l'ensemble des navigateurs.

1

Fonction
rect()

Estimation de la prise en charge globale.

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra

Safari

Firefox

Chrome pour Androïd

Chrome

Edge

Androïd Brower

Opéra mini

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

Caniuse

Historique de la fonction rect().

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

Voir aussi, dans l'ancienne spécification CSS 2.1

De nombreuses définitions remontent à la version 2.1 de CSS. La plupart ont fortement évoluées depuis et ont été redéfinies dans des modules plus récents, ou sont devenues obsolètes.

Propriétés :

Directives :