Clip - Propriété CSS

Description de la propriété clip.

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.

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.

  

• 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.

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.

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

1

Safari sur IOS

1

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

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

Caniuse

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".

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

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant clip. Définition initial de la propriété clip.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Masquage - Niveau 1

  Concernant clip. Cette version de la spécification rend la propriété clip obsolète. Elle est remplacé par clip-path.
  

  15 Novembre 2012

  Document de travail.

  

  26 Août 2014

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des techniques de masquage.

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

Propriétés :