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 CSS 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.
Syntaxes 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. La valeur initiale est :
.auto
Exemple interactif.
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 par les navigateurs (compatibilité).
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
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que clip
.
Les spécifications CSS éditées par le W3C sont organisées en modules. clip
fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.