Clip - Propriété CSS
Résumé des caractéristiques de la propriété clip
auto
auto
clip
passe progressivement d'une valeur à une autre.Description de la propriété clip
.
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.
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 fonctionrect()
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
.
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
.
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)
.
clip
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".
-
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Définition initial de la propriétéclip
.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Masquage - Niveau 1
Cette version de la spécification rend la propriétéclip
obsolète. Elle est remplacé parclip-path
.15 Novembre 2012Document de travail.26 Août 2014Candidat à 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 CSS Masking Module (Module CSS - Masquage).
Bien que déclarée obsolète, la propriété clip
figure encore dans ce module :