CSS / clip / Découpage rectangulaire et migration vers clip-path

clip est une ancienne propriété CSS qui limite la partie visible d'un élément à un rectangle. Elle s'applique aux éléments avec position: absolute ou position: fixed et est obsolète, donc il est préférable de privilégier clip-path dans le nouveau code. Lors de la migration de code existant, distinguez les coordonnées de la limite dans rect() des distances internes dans inset().

Conditions et principales valeurs

Le découpage masque le dessin en dehors d'une zone. Il diffère de la modification du fichier image original ou de la réduction effective de la largeur et de la hauteur de l’élément. La valeur initiale de clip est auto, et elle n'est pas héritée. Définir uniquement position: relative ne fait pas appliquer le découpage hérité.

Le rect de l’ancien clip n'accepte pas les pourcentages. La valeur complète clip: auto diffère également de rect(auto, auto, auto, auto). Cette dernière coupe aux bords intérieurs, donc les descendants débordants peuvent révéler la différence. MDN syntaxe et conditions d'application du clip

Comparer les zones initiale et découpée avec un exemple complet

Enregistrez le code complet suivant sous clip-example.html en UTF-8 et ouvrez-le dans un navigateur. Aucune image, bibliothèque ou serveur externe n'est nécessaire. Gardez ces styles de démonstration dans ce fichier plutôt que de les coller dans une feuille de style partagée. Comparez les trois boîtes, puis modifiez une valeur à la fois, enregistrez et rechargez.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparer clip et clip-path</title>
  <style>
    body { margin: 0; padding: 16px; font: 16px/1.6 sans-serif; }
    main { max-width: 760px; margin: auto; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .frame { position: relative; width: 200px; height: 120px;
      background: #e5e7eb; outline: 1px solid #666; }
    .target { width: 100%; height: 100%; padding: 0; border: 0;
      background: linear-gradient(135deg, #006c9c, #ffd166); }
    .legacy { position: absolute; top: 0; left: 0;
      clip: rect(20px, 180px, 100px, 20px); }
    .modern { clip-path: inset(20px); }
  </style>
</head>
<body>
  <main>
    <h1>Comparer clip et clip-path</h1>
    <div class="samples">
      <section><h2>clip: auto</h2>
        <div class="frame"><div class="target"></div></div></section>
      <section><h2>clip: rect(20px, 180px, 100px, 20px)</h2>
        <div class="frame"><div class="target legacy"></div></div></section>
      <section><h2>clip-path: inset(20px)</h2>
        <div class="frame"><div class="target modern"></div></div></section>
    </div>
  </main>
</body>
</html>

La première boîte est la référence, montrant le dégradé entier de 200×120px. La deuxième et la troisième devraient afficher une région de 160×80px après avoir exclu 20px à chaque bord. Le fond gris et le contour appartiennent à un cadre séparé, donc la taille originale de la boîte reste visible. Dans une fenêtre étroite, les boîtes de comparaison se déplacent sur une autre rangée.

Convertir les coordonnées rect en distances inset

Les deux déclarations produisent la même zone visible car leurs nombres signifient des choses différentes. Ces règles correspondent à .legacy et .modern dans l'exemple complet.

.legacy {
  position: absolute;
  clip: rect(20px, 180px, 100px, 20px);
}
.modern {
  clip-path: inset(20px);
}

Dans le rect hérité, le haut et le bas sont mesurés depuis le bord intérieur supérieur ; la gauche et la droite sont mesurées depuis le bord intérieur gauche. Une coordonnée droite de 180px ne signifie pas retirer 180px du côté droit. Les quatre valeurs d'inset mesurent plutôt vers l'intérieur à partir de leurs bords respectifs, en utilisant le border-box sauf si une autre boîte de référence est spécifiée. La cible dans cet exemple n'a ni padding ni bordure, donc cette différence de boîte de référence n'affecte pas la comparaison.

Pour une boîte de largeur W et de hauteur H sans padding ni bordure, rect(t, r, b, l) correspond à inset(t, W − r, H − b, l). En CSS réel, insérez les longueurs calculées plutôt que de copier des expressions explicatives telles que W − r. S'il y a des bordures, du padding ou une boîte de référence différente, alignez d'abord les systèmes de coordonnées. Boîtes de référence et formes de clip-path sur MDN

Modifier la taille de l’élément et comparer

Changez d'abord seulement .frame à une largeur de 300px et une hauteur de 180px dans l'exemple complet. Conserver les anciennes coordonnées du rect laisse une zone visible de 160×80px, tandis que inset(20px) laisse maintenant 260×140px en excluant 20px de chaque bord de la plus grande boîte. Comparez pourquoi les mêmes chiffres ne garantissent pas le même résultat de découpe.

Pour faire correspondre à nouveau les deux méthodes, changez la limite droite de .legacy à 280px et la limite inférieure à 160px. Remplacez ces deux règles dans l'exemple complet comme suit. Laissez la déclaration .modern inchangée.

.frame {
  width: 300px;
  height: 180px;
}
.legacy {
  clip: rect(20px, 280px, 160px, 20px);
}

Les deux méthodes devraient maintenant laisser une région de 260×140px. Après comparaison, restaurez .frame à 200×120px et rect à 20px, 180px, 100px, 20px. Pour conserver le même espacement intérieur dans une boîte réactive, inset exprime l’intention de manière plus directe que de recalculer continuellement des limites fixes.

Découpage, mise en page et accessibilité

Le découpage avec clip-path laisse généralement l’espace de mise en page de l’élément inchangé. Le .modern de l’exemple occupe 200×120px et seule sa zone peinte devient plus petite. L’élément .legacy est hors du flux normal à cause de sa position absolue ; son parent .frame réserve l’espace pour la comparaison. Il faut distinguer cet effet de positionnement du découpage lui-même.

Pour un nouveau code, envisagez des formes clip-path telles que inset pour un rectangle ou circle pour un cercle. Lorsque l'objectif est de masquer le contenu débordant ou d'offrir un défilement, considérez le rôle distinct de overflow. Une valeur clip-path autre que none peut également créer un contexte de superposition, alors vérifiez les éléments chevauchants après la migration. Masquage CSS sur le clipping et la géométrie des éléments

Le clipping n'est pas un contrôle d'accès ni une protection de la vie privée. Le texte caché peut rester dans le document, et son traitement par les technologies d'assistance nécessite une vérification séparée. Ne clippez pas les boutons, les champs de saisie, les informations essentielles ou les indicateurs de focus clavier de manière à empêcher les utilisateurs d'utiliser l'interface. Fournissez un moyen de lire le contenu lors du zoom ou de l'utilisation de la navigation tactile et au clavier.

Quand le découpage ne fonctionne pas comme prévu

• Inspectez la position calculée et le clip de l'élément sélectionné dans les outils de développement. Le positionnement relatif ou statique ne satisfait pas les conditions du clip hérité. Dans l'exemple, changez uniquement la position de .legacy en relative, comparez si le découpage disparaît, puis rétablissez absolute.
• L'ordre du rectangle est haut, droite, bas, gauche. Si droite est inférieure à gauche ou bas est inférieur à haut, le rectangle attendu ne restera pas. Vérifiez si les anciennes coordonnées ont été conservées après avoir modifié la largeur ou la hauteur.
• L'overflow, clip-path ou une autre règle de découpage d'un ancêtre peut réduire davantage la zone visible. Désactivez et réactivez les déclarations individuellement dans les outils de développement pour isoler la cause.
• Lors du remplacement de clip par clip-path, comparez le positionnement, les boîtes de référence, les bordures, le padding, l'empilement et les indicateurs de focus. Le rect() ancien utilisé par clip et la nouvelle forme rect() dans clip-path ont une syntaxe différente ; le fait que leurs noms correspondent ne rend pas leurs valeurs interchangeables.