Controllo del clipping dell'overflow

Funzionalità web: overflow: clip overflow-clip-margin

Mentre overflow: hidden è uno "strumento rudimentale" che ritaglia quasi sempre i contenuti rigorosamente in corrispondenza della casella di spaziatura interna, overflow: clip combinato con overflow-clip-margin fornisce il "bisturi" per un controllo granulare del layout nei contenitori di blocchi.

Specifica esattamente dove si verifica il clipping con overflow: clip e overflow-clip-margin. Puoi allineare il confine con precisione ai bordi interni del modello di riquadro o estendere il confine di ritaglio oltre il riquadro dell'elemento di un offset specificato (un margine di sicurezza). Questo approccio moderno è altamente performante ed elimina il requisito precedente di aggiungere container wrapper aggiuntivi con spaziatura interna personalizzata e margini negativi solo per consentire il rendering degli effetti visivi (come le ombre degli elementi secondari in evidenza) senza ritaglio.

Gli elementi sostituiti (<img>, <video>, <canvas> e così via) vengono impostati per impostazione predefinita su overflow: clip e overflow-clip-margin: content-box, consentendoti di contenere in modo pulito le immagini container che utilizzano object-fit o border-radius.

Modalità di implementazione

  1. Applica overflow: clip: assicurati che l'elemento di destinazione abbia overflow: clip attivato. L'impostazione overflow: clip è obbligatoria per i container di layout a blocchi affinché overflow-clip-margin abbia effetto. Se overflow è impostato su hidden, auto o scroll, la proprietà overflow-clip-margin viene ignorata dal browser. overflow: clip impedisce lo scorrimento (sia avviato dall'utente sia in modo programmatico tramite JavaScript).
  2. Allineamento a un bordo della casella: utilizza le parole chiave per allineare con precisione il bordo di ritaglio ai bordi interni del modello di casella:
    • content-box: ritaglia i contenuti esattamente nel punto in cui inizia l'area dei contenuti, lasciando l'area di spaziatura interna completamente vuota. I contenuti si interrompono esattamente al bordo del padding. Ottima per i moduli di layout nidificati.
    • padding-box (predefinito): ritaglia i contenuti in corrispondenza del bordo interno.
    • border-box: ritaglia i contenuti in corrispondenza del bordo esterno, consentendo ai contenuti di trovarsi sotto o di sovrapporsi parzialmente a un bordo traslucido.
  3. Definisci un offset specificato (bleed): fornisci un valore di lunghezza (ad es. 15px o 5px) per creare una zona di sicurezza prima di tagliare i pixel. In questo modo, le ombre degli elementi secondari in primo piano vengono visualizzate senza ritaglio oltre il bordo, senza espandere la geometria del layout.
  4. Combina bordo della casella e offset: specifica contemporaneamente un bordo della casella e un offset di lunghezza (ad es. content-box 15px) per l'offset da un bordo della casella specifico.

Codice di esempio

I seguenti esempi mostrano i controlli di layout dei contenitori dinamici, con l'inquadratura nidificata della curva dei contenuti interni automatizzata e la protezione delle ombre degli elementi secondari, oltre ai fallback del potenziamento progressivo.

Contenitori di blocchi: curve arrotondate nidificate

  • Applica overflow-clip-margin: content-box a un container principale con angoli arrotondati e spaziatura interna personalizzata.
  • Applica angoli arrotondati simili ai componenti multimediali secondari interni e ai componenti del piè di pagina lungo il bordo concentrico della casella dei contenuti interni, risolvendo le curve di nidificazione scomode senza logica calc() personalizzata.
<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;
  }
}

Contenitori di blocchi: sbordatura dell'ombra dell'elemento secondario

  • Applica overflow: clip e definisci un offset di lunghezza overflow-clip-margin esteso per creare una zona di sicurezza visibile che consenta il rendering dell'ombra dell'elemento secondario senza ritaglio all'esterno del contenitore principale senza alterare la geometria del layout. Senza questa impostazione, l'ombra dell'elemento secondario viene ritagliata in corrispondenza del bordo dell'elemento principale.
<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;
  }
}

Implementazione strategica e best practice

  • SÌ: applica overflow: clip agli elementi target quando utilizzi overflow-clip-margin, poiché l'impostazione di overflow rigorosamente su clip è obbligatoria sui contenitori di layout a blocchi standard per attivare i margini di ritaglio curvi personalizzati o interni.
  • SÌ: imposta overflow-clip-margin: content-box sui container con spaziatura interna e angoli arrotondati per ritagliare automaticamente gli elementi secondari interni non arrotondati in curve di bordo nidificate matematicamente perfette senza logica di sottrazione manuale della spaziatura interna.
  • SÌ: configura overflow-clip-margin con un offset di lunghezza specificato quando applichi effetti visivi esterni (come filter: drop-shadow()) per evitare un troncamento netto del riquadro di delimitazione senza alterare o espandere la geometria del layout.
  • NON applicare overflow: clip se il container richiede la manipolazione programmatica dello scorrimento tramite JavaScript o funge da contesto di layout immediato per gli elementi position: sticky, poiché clip disattiva completamente lo scorrimento.

Strategie di fallback

Per gli ambienti di destinazione che non supportano in modo nativo overflow: clip o overflow-clip-margin, le strategie di fallback del potenziamento progressivo dipendono direttamente dall'intent visivo:

  • Esegui il fallback a overflow: hidden come esperienza di base per garantire il mantenimento dei confini principali.
  • Esegui il fallback a overflow: visible sugli elementi in cui le ombre o i badge degli angoli esterni non devono essere troncati.

Implementazione completa del fallback del potenziamento progressivo

<!-- 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;
  }
}