Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

clip - Propriété CSS

clip

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

Description rapide
Définit la partie visible de l'élément (découpage).
Statut
Obsolète
Type de valeur
Forme géométrique. Une seule forme reconnue : le rectangle défini par la fonction rect().
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:: CRD (document proposé pour la 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 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.

Propriété CSS clip

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 fonction rect() pour plus de détails.

    Propriété clip et fonction rectd()

  • clip: initial; clip: inherit; clip: revert; clip: revert-layer; clip: unset;

    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.

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.

1
clip
Estimation de la prise en charge en pourcentage du parc actuel.
95%

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.

Propriétés.

Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
Définit comment gérer les formes creuses.
Résumé des paramètres de masquage.
Définit tous les paramètres d'un masque pour la bordure d'un élément.
Définit comment le masque doit agir (luminance, alpha).
Définit le décalage éventuel du masque de bordure éventuel par rapport à l'élément.
Définit le mode de répétition du masque.
Définit comment l'image utilisée comme masque doit être découpée.
Désigne l'image qui sera utilisée comme masque (masque du type bordure).
Définit l'épaisseur de la bordure pour l'application d'un masque.
Définit la zone concernée par le masquage.
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Définit le mode de masquage (couche alpha, luminance...)
Définit la référence pour le positionnement du masque.
Position du masque.
Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.
Fixe les dimensions du masque.