Propriété CSS clip
La propriété CSS clip s'applique uniquement aux éléments positionnés en absolu, c'est-à-dire avec position: absolute ou position: fixed. Voir les exemples.
La propriété CSS clip définit un rectangle qui rogne un élément positionné, masquant tout ce qui se trouve en dehors de ce rectangle. Tout ce qui dépasse la région visible n'est pas rendu et ne répond pas aux clics. C'est l'outil original de CSS pour « n'afficher que cette partie de la boîte », et bien qu'il soit depuis lors déprécié au profit de clip-path, on le rencontre encore dans du code plus ancien et dans le classique motif d'accessibilité « visuellement masqué ».
Cette page explique ce que fait clip, comment fonctionnent les coordonnées de rect(), à quels éléments il s'applique, et comment migrer vers le remplacement moderne.
Fonctionnement de clip
La région de découpe est un rectangle écrit sous la forme rect(top, right, bottom, left). Chaque valeur est un décalage de longueur mesuré depuis le coin supérieur gauche de la boîte de bordure de l'élément, ce qui répond à la question « à quelle distance du bord se trouve ce côté de la fenêtre visible ? » :
top— distance depuis le bord supérieur jusqu'au haut de la région visible.right— distance depuis le bord gauche jusqu'à la droite de la région visible.bottom— distance depuis le bord supérieur jusqu'au bas de la région visible.left— distance depuis le bord gauche jusqu'à la gauche de la région visible.
Ainsi, rect(10px, 80px, 60px, 20px) conserve la tranche de l'élément entre x = 20px…80px et y = 10px…60px, et masque le reste. Chacun des quatre côtés peut également être auto, ce qui signifie « utiliser le propre bord de l'élément » (aucun découpage sur ce côté).
clip ne prend effet que sur les éléments positionnés en absolu — c'est-à-dire les éléments avec position: absolute ou position: fixed. Sur un élément positionné de manière statique ou relative, il est ignoré. Il est également ignoré lorsque la propriété overflow est définie à visible (la valeur par défaut), donc un élément découpé nécessite généralement déjà position: absolute pour établir son propre contexte.
Le piège des virgules
CSS2 a défini rect() avec des virgules — rect(0px, 70px, 200px, 0px) — mais certains navigateurs anciens acceptaient également une forme séparée par des espaces, rect(0px 70px 200px 0px). La forme avec virgules est la plus sûre. Incluez toujours les unités ; rect(0, 70, 200, 0) sans px est invalide.
La propriété clip est dépréciée et supprimée de la spécification CSS moderne. Pour les nouveaux projets, utilisez clip-path, qui n'est pas limité aux rectangles, fonctionne sur tout élément positionné ou statique, et peut être animé. Le remplacement direct de clip: rect(t, r, b, l) est clip-path: inset(t calc(100% - r) calc(100% - b) l), ou plus simplement clip-path: rect(t r b l) dans les navigateurs qui prennent en charge la forme rect().
| Valeur initiale | auto |
|---|---|
| S'applique à | Éléments positionnés en absolu. |
| Hérité | Non. |
| Animable | Non. |
| Version | CSS2 |
| Syntaxe DOM | object.style.clip = "rect(10px,40px,40px,10px)"; |
Syntaxe
Syntaxe de la propriété CSS clip
clip: auto | shape | initial | inherit;Exemple de la propriété clip :
Exemple de la propriété CSS clip avec la valeur auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: auto;
}
</style>
</head>
<body>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com" />
</body>
</html>Résultat
Avec clip: auto, rien n'est rogné — l'image complète s'affiche. Dans l'exemple suivant, le rectangle rect() découpe l'image jusqu'à la région définie par ses coordonnées.
Exemple de la propriété clip avec la valeur « rect » :
Exemple de la propriété CSS clip avec la valeur shape
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: rect(0px, 70px, 200px, 0px);
}
</style>
</head>
<body>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com logo" />
</body>
</html>Le motif « visuellement masqué »
La raison la plus courante pour laquelle clip survit dans du vrai code est le helper visuellement masqué (a11y). Il masque le contenu aux utilisateurs voyants tout en le gardant accessible aux lecteurs d'écran — contrairement à display: none ou visibility: hidden, qui suppriment également le texte de l'arbre d'accessibilité.
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}Appliquez-le à un <span> qui étiquette un bouton avec icône uniquement, par exemple, et l'étiquette est annoncée mais jamais peinte. Les feuilles de style modernes associent cela à clip-path: inset(50%) pour que le helper continue de fonctionner au fur et à mesure que clip est abandonné.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| auto | Ne découpe pas un élément. C'est la valeur par défaut. | Essayer » |
| shape | Découpe un élément. La seule valeur valide est rect(top, right, bottom, left). | Essayer » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |