Contrôle du rognage du menu de développement

Fonctionnalités Web : overflow: clip overflow-clip-margin

Alors que overflow: hidden est un "instrument brut" qui coupe presque toujours le contenu strictement au niveau de la zone de marge intérieure, overflow: clip combiné à overflow-clip-margin fournit le "scalpel" pour un contrôle précis de la mise en page dans les conteneurs de blocs.

Spécifiez exactement où le rognage se produit avec overflow: clip et overflow-clip-margin. Vous pouvez aligner précisément la limite sur les bords internes du modèle de boîte ou étendre la limite de découpage au-delà de la boîte de l'élément d'un décalage spécifié (une marge de sécurité). Cette approche moderne est très performante et élimine l'ancienne exigence d'ajouter des conteneurs de wrapper supplémentaires avec une marge intérieure personnalisée et des marges négatives juste pour permettre aux effets visuels (comme les ombres d'éléments enfants proéminents) de s'afficher sans être coupés.

Les éléments remplacés (<img>, <video>, <canvas>, etc.) sont définis par défaut sur overflow: clip et overflow-clip-margin: content-box, ce qui vous permet de contenir proprement les images qui utilisent object-fit ou border-radius.

Implémentation

  1. Appliquer overflow: clip : assurez-vous que l'élément cible est activé pour overflow: clip. Le paramètre overflow: clip est obligatoire sur les conteneurs de mise en page de blocs pour que overflow-clip-margin prenne effet. Si overflow est défini sur hidden, auto ou scroll, la propriété overflow-clip-margin est ignorée par le navigateur. overflow: clip empêche tout défilement (qu'il soit initié par l'utilisateur ou par programmation via JavaScript).
  2. Aligner sur un bord de la boîte : utilisez des mots clés pour aligner précisément la limite de découpage sur les bords intérieurs du modèle de boîte :
    • content-box : recadre le contenu exactement là où commence la zone de contenu, en laissant la zone de marge intérieure complètement vide. Le contenu s'arrête juste au bord de la marge intérieure. Excellent pour les modules de mise en page imbriqués.
    • padding-box (par défaut) : recadre le contenu au niveau du bord intérieur de la bordure.
    • border-box : recadre le contenu au niveau du bord extérieur de la bordure, ce qui permet au contenu de se trouver sous une bordure translucide ou de la chevaucher partiellement.
  3. Définir un décalage spécifié (fond perdu) : indiquez une valeur de longueur (par exemple, 15px ou 5px) pour créer une zone de sécurité avant de couper des pixels. Cela permet d'afficher les ombres des éléments enfants proéminents sans les tronquer au-delà de la bordure, sans étendre la géométrie de la mise en page.
  4. Combiner le bord de la boîte et le décalage : spécifiez simultanément un bord de boîte et un décalage de longueur (par exemple, content-box 15px) pour décaler à partir d'un bord de boîte spécifique.

Exemple de code

Les exemples suivants illustrent les commandes de mise en page de conteneur dynamique, en montrant l'imbrication automatisée de la courbe de contenu interne et la protection des ombres des éléments enfants, ainsi que les solutions de remplacement d'amélioration progressive.

Conteneurs de blocs : courbes arrondies imbriquées

  • Appliquez overflow-clip-margin: content-box à un conteneur parent avec des angles arrondis et une marge intérieure personnalisée.
  • Appliquez des angles arrondis similaires aux composants multimédias enfants internes et au pied de page le long de la bordure de la zone de contenu interne concentrique, ce qui résout les courbes d'imbrication maladroites sans logique calc() personnalisée.
<div class="nested-curve-parent">
  <img src="avatar.jpg" alt="Nested Curve Demo">
  <div class="nested-curve-footer">Card Footer</div>
</div>

/**
 * Standard block layout container with outer corner radii and padding.
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.nested-curve-parent {
  /* Level 1 Fallback: clips child roughly at the padding box */
  overflow: hidden;
}

/* Inner footer component with 12px rounded to visually demonstrate automatic concentric corner clipping */
.nested-curve-footer {
  background: #111;
  color: #fff;
}

@supports (overflow-clip-margin: content-box) {
  .nested-curve-parent {
    /* MANDATORY: overflow: clip is required on non-replaced elements */
    overflow: clip;
    /* Automatically curves clipping edge to match inner content-box radius */
    overflow-clip-margin: content-box;
  }
}

Conteneurs de blocs : débordement de l'ombre de l'élément enfant

  • Appliquez overflow: clip et définissez un décalage de longueur overflow-clip-margin étendu pour créer une zone de sécurité visible permettant d'afficher l'ombre de l'enfant sans qu'elle soit coupée en dehors du conteneur parent, sans modifier la géométrie de la mise en page. Sans cela, l'ombre de l'enfant est tronquée à la limite du parent.
<div class="safety-zone-parent">
  <h4>Clipped Container</h4>
  <p>Inner content boundaries safely contained.</p>
  <!-- Child button element positioned inside with a prominent shadow -->
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * Standard block layout container clipping inner content.
 * Base fallback uses overflow: hidden, which abruptly slices child element shadows.
 */
.safety-zone-parent {
  /* Level 1 Fallback: clips overflowing content but truncates child shadows */
  overflow: hidden;
}

/* Child button element positioned inside with an expanded shadow */
.demo-glowing-btn {
  display: block;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.7);
}

@supports (overflow-clip-margin: 15px) {
  .safety-zone-parent {
    overflow: clip;
    /* Establishes a visible safety zone allowing child element shadows to render safely outside */
    overflow-clip-margin: 15px;
  }
}

Implémentation stratégique et bonnes pratiques

  • APPLIQUEZ overflow: clip aux éléments cibles lorsque vous utilisez overflow-clip-margin, car définir overflow strictement sur clip est obligatoire sur les conteneurs de mise en page de bloc standards pour activer les marges de découpe incurvées personnalisées ou intérieures.
  • À FAIRE : Définissez overflow-clip-margin: content-box sur les conteneurs avec marge intérieure et angles arrondis pour découper automatiquement les éléments enfants internes non arrondis en courbes de bordure imbriquées mathématiquement parfaites, sans logique de soustraction manuelle de la marge intérieure.
  • À FAIRE : Configurez overflow-clip-margin avec un décalage de longueur spécifié lorsque vous appliquez des effets visuels externes (comme filter: drop-shadow()) pour éviter une troncature nette du cadre de délimitation sans modifier ni étendre la géométrie de la mise en page.
  • N'APPLIQUEZ PAS overflow: clip si le conteneur nécessite une manipulation programmatique du défilement via JavaScript ou sert de contexte de mise en page immédiat pour les éléments position: sticky, car clip désactive complètement le défilement.

Stratégies de remplacement

Pour les environnements cibles qui ne sont pas compatibles de manière native avec overflow: clip ou overflow-clip-margin, les stratégies de remplacement par amélioration progressive dépendent directement de l'intention visuelle :

  • Utilisez overflow: hidden comme expérience de base pour garantir le respect des limites principales.
  • Utilisez overflow: visible pour les éléments où les ombres portées ou les badges d'angle externes ne doivent pas être tronqués.

Implémenter l'amélioration progressive de remplacement

<!-- 1. Nested rounded edges fallback -->
<div class="demo-container-fallback">
  <img src="example.jpg" alt="Nested Curve Fallback">
  <div class="demo-footer-fallback">Footer</div>
</div>

<!-- 2. Child element shadow bleed fallback -->
<div class="demo-safety-parent">
  <h4>Container</h4>
  <p>Inner boundaries contained.</p>
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * 1. Block Container Nested Curves Fallback
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.demo-container-fallback {  
  /* Level 1 Fallback: clip child roughly at padding box */
  overflow: hidden;
}

.demo-container-fallback img {
  object-fit: cover;
  display: block;
}

@supports (overflow-clip-margin: content-box) {
  .demo-container-fallback {
    overflow: clip;
    overflow-clip-margin: content-box;
  }
}

/**
 * 2. Child Element Shadow Bleed Fallback
 * Base fallback clips content using overflow: hidden, abruptly truncating child element shadows.
 */
.demo-safety-parent {  
  /* Level 1 Fallback */
  overflow: hidden;
}

.demo-glowing-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: #e52e71;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.65);
}

@supports (overflow-clip-margin: 15px) {
  .demo-safety-parent {
    overflow: clip;
    overflow-clip-margin: 15px;
  }
}