Clip - Propriété CSS

clip

Résumé des caractéristiques de la propriété clip

Description rapide
Découpe un élément à partir d'un rectangle.
Statut
Obsolète
Utilisable sur
HTML, SVG
Valeurs prédéfinies
auto
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété clip passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Masquage
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)

Statut du document: REC (recommandation)

Description de la propriété clip.

La propriété clip est obsolète. Il est déconseillé de l'utiliser. Préférez la propriété clip-path à la place, qui est d'ailleurs beaucoup plus souple.

clip découpe un élément pour le faire tenir dans l'espace qui lui est réservé. Cette propriété n'est fonctionnelle que sur les éléments positionnés en absolu : ceux dont la propriété position a la valeur absolute.

clip présente deux inconvénients majeurs (qui n'existent plus avec clip-path) :

  • L'élément doit être positionné en absolu.
  • La découpe ne peut être que rectangulaire.

La partie à afficher est définie par 4 valeurs a,b,c,d avec leur unité (Voir les unités de dimension).
  a = position du bord haut de la partie visible,
  b = position du bord droit de la partie visible,
  c = position du bord inférieur de la partie visible,
  a = position du bord gauche de la partie visible.
Comme d'habitude, CSS énumère les cotés dans le sens des aiguilles d'une montre, en commençant par le coté haut.

Propriété CSS clip

Valeurs pour clip.

  • clip: auto;

    Valeur par défaut. Aucune découpe n'est effectuée : l'élément est visible en entier.

  • clip: rect(a,b,c,d);

    N'est affichée que la partie de l'élément correspondant au rectangle rect(a,b,c,d). Reportez-vous à la présentation de la fonction rect() pour plus de détails.

    Propriété clip et fonction rectd()

  • clip: initial; (auto) clip: inherit; clip: revert; clip: revertLayer; clip: unset;

    Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Simulateur avec la propriété clip.

Le bloc résultat a été positionné en absolu (nécessaire pour que clip fonctionne). Modifiez les valeurs pour observer comment l'élément est découpé.
Le fond gris qui apparaît sur les parties invisibles est provoqué par un autre élément superposé. Ce n'est pas une conséquence directe de clip.

clip :

Résultat

La propriété clip découpe cet élément suivant un rectangle défini par 4 valeurs numériques. Elle est maintenant remplacée par clip-path qui est beaucoup plus souple et bien plus puissante.

Prise en charge de clip par les navigateurs.

Bien qu'elle soit très bien reconnue par les navigateurs, il est déconseillé d'utiliser la propriété clip qui a été retirée de la spécification. On utilisera à la place clip-path.

Colonne 1
Traitement correct par les navigateurs de la propriété clip. Bien que largement reconnue, cette propriété est maintenant obsolète. Elle a été remplacée par clip-path.

Remarques :

(1) Safari interprète mal clip:auto qui devrait être équivalent à clip:rect(auto, auto, auto, auto).

1
Propriété
clip
Estimation de la prise en charge globale.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Historique de la propriété clip.

La propriété clip aura eu une durée de vie assez courte : immédiatement remplacée par clip-path dès le niveau 1 du module "Masquage".

Voir aussi, au sujet des techniques de masquage.

Le module de spécification qui regroupe tout ce qui concerne le masquage s'appelle CSS Masking Module (Module CSS - Masquage). Bien que déclarée obsolète, la propriété clip figure encore dans ce module :

Propriétés :

clip-path
Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...).
clip-rule
Définit comment gérer les formes creuses dans le contexte d'un découpage.
mask
Propriété résumée définissant les paramètres de masquage : dimensions du masque, position, répétition, origine, etc.
mask-border
Définit tous les paramètres d'un masque pour la bordure d'un élément.
mask-border-mode
Définit sur quel paramètre le masque doit agir (luminance, alpha).
mask-border-outset
Définit le décalage éventuel du masque de bordure par rapport à l'élément.
mask-border-repeat
Définit le mode de répétition du masque.
mask-border-slice
Définit comment l'image utilisée comme masque doit être découpée.
mask-border-source
Désigne l'image qui sera utilisée comme masque (masque du type bordure).
mask-border-width
Définit l'épaisseur de la bordure pour l'application d'un masque.
mask-clip
Définit la zone concernée par le masquage.
mask-composite
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
mask-image
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
mask-mode
Définit le mode de masquage (couche alpha, luminance...)
mask-origin
Définit la référence pour le positionnement du masque.
mask-position
Définit la position du masque.
mask-repeat
Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.
mask-size
Fixe les dimensions du masque.