CSS clip : Maîtriser le découpage et le masquage d'éléments positionnés

La propriété CSS clip : Contrôler la zone visible des éléments

La propriété CSS clip permet de définir précisément la zone visible d'un élément positionné en absolu. Cette propriété de découpage CSS est particulièrement utile pour masquer des portions spécifiques d'images, de conteneurs ou d'éléments HTML sans modifier leur structure dans le DOM. Contrairement aux techniques de masquage traditionnelles, clip découpe l'élément selon des coordonnées rectangulaires précises, offrant un contrôle granulaire sur la partie affichée à l'écran.

Le découpage CSS avec clip est généralement employé dans les cas suivants : création d'effets visuels avancés, masquage partiel d'images pour des galeries interactives, découpage de sprites CSS pour l'optimisation des performances, ou encore révélation progressive de contenu lors d'animations. La propriété clip fonctionne exclusivement sur les éléments en position absolute ou fixed, ce qui la rend idéale pour les superpositions et les effets de calque.

Définition et utilisation approfondie : La propriété clip en CSS

Lorsqu'un élément visuel dépasse les dimensions de son conteneur parent, plusieurs solutions s'offrent au développeur. La propriété CSS clip résout ce problème en permettant de spécifier avec précision les dimensions de la zone visible d'un élément positionné en absolu. Le mécanisme de découpage s'effectue via la fonction rect() qui accepte quatre valeurs de coordonnées définissant un rectangle de découpage.

Le principe de fonctionnement repose sur un système de coordonnées cartésiennes où l'origine (0,0) se situe dans le coin supérieur gauche de l'élément. Les quatre valeurs de la fonction rect() définissent respectivement : la distance depuis le bord supérieur (top), la distance depuis le bord gauche pour la limite droite (right), la distance depuis le bord supérieur pour la limite inférieure (bottom), et la distance depuis le bord gauche (left). Tout contenu en dehors de ce rectangle défini devient invisible, mais reste présent dans le flux du document.

Note importante sur la compatibilité :
La propriété clip ne fonctionne pas si overflow est défini sur visible. L'élément ciblé doit impérativement avoir une position CSS de type absolute ou fixed. De plus, cette propriété est considérée comme dépréciée au profit de clip-path, bien qu'elle reste largement supportée pour des raisons de compatibilité avec les navigateurs anciens.

Exemple de découpage CSS avec clip et position absolue

Voici un exemple pratique illustrant comment découper une image en utilisant clip avec des coordonnées rect(). Cet exemple montre le découpage d'une image où seule une zone rectangulaire spécifique reste visible :

   📋 Copier le code

img
{
    /* Position absolue obligatoire pour que clip fonctionne */
    position: absolute;
    
    /* Fonction rect() avec 4 valeurs : top, right, bottom, left */
    /* Zone visible : du haut (0px) à 200px vers le bas */
    /* et de la gauche (0px) à 60px vers la droite */
    clip: rect(0px, 60px, 200px, 0px);
    
    /* Résultat : seule une bande de 60px de large sur 200px de haut est visible */
}

Exemple avancé : Découpage avec positionnement personnalisé

Cet exemple démontre comment créer un effet de révélation partielle sur une image en combinant position absolute, coordonnées top/left et clip pour un contrôle total :

.image-decoupee
{
    /* Positionnement absolu à 50px du haut et 20px de la gauche */
    position: absolute;
    top: 50px;
    left: 20px;
    
    /* Découpage créant une fenêtre de visualisation */
    /* Commence à 30px du haut, s'étend jusqu'à 150px de large */
    /* Descend jusqu'à 180px, et commence à 10px de la gauche */
    clip: rect(30px, 150px, 180px, 10px);
    
    /* Seule la zone rectangulaire définie reste visible */
    /* Dimensions de la zone visible : 140px x 150px */
}

Exemple pratique : Animation de révélation avec clip

Voici un exemple d'animation CSS utilisant clip pour créer un effet de révélation progressive d'une image, technique souvent employée dans les interfaces modernes :

.image-revelee
{
    /* Position absolue nécessaire pour clip */
    position: absolute;
    
    /* État initial : image complètement masquée */
    /* Les 4 valeurs identiques créent une zone de 0 pixel */
    clip: rect(0px, 0px, 0px, 0px);
    
    /* Transition fluide sur la propriété clip pendant 1 seconde */
    transition: clip 1s ease-in-out;
}

.image-revelee:hover
{
    /* Au survol : révélation complète de l'image */
    /* Zone visible : 300px de haut par 400px de large */
    clip: rect(0px, 400px, 300px, 0px);
}

Spécifications techniques de la propriété clip :
Valeur par défaut : auto (aucun découpage appliqué)
Héritée : non (la propriété ne se transmet pas aux éléments enfants)
Version CSS : CSS2 (introduite dans la spécification CSS 2.0)
Syntaxe JavaScript : object.style.clip = "rect(0px, 50px, 50px, 0px)"
Unités acceptées : px, em, rem, pourcentages (pixels recommandés pour la précision)
Navigateurs supportés : Tous les navigateurs modernes (IE6+, Firefox, Chrome, Safari, Opera)

Valeurs détaillées de la propriété clip

Différence entre clip et clip-path : Quelle propriété choisir ?

Bien que la propriété clip soit toujours supportée, il est important de noter que clip-path offre des fonctionnalités supérieures : formes géométriques variées (cercles, polygones, ellipses), découpage avec images SVG, animations plus fluides, et compatibilité avec tous types de positionnement CSS. Cependant, clip reste utile pour la compatibilité avec les anciens navigateurs et pour des découpes rectangulaires simples nécessitant une position absolue.

Cas d'usage pratiques du découpage CSS clip

La propriété clip s'avère particulièrement efficace dans plusieurs scénarios de développement web : création de sprites CSS optimisés pour réduire les requêtes HTTP, masquage d'éléments d'interface tout en les gardant accessibles aux lecteurs d'écran, effets de révélation progressive dans les animations, découpage d'images pour galeries dynamiques, et création de zones cliquables invisibles pour améliorer l'expérience utilisateur sur les éléments interactifs.

Par carabde | Mis à jour le 20 novembre 2025