Kontrol Pemangkasan Luapan

Fitur web: overflow: clip overflow-clip-margin

Meskipun overflow: hidden adalah "alat tumpul" yang hampir selalu memotong konten secara ketat di kotak padding, overflow: clip yang dikombinasikan dengan overflow-clip-margin memberikan "pisau bedah" untuk kontrol tata letak yang mendetail di seluruh penampung blok.

Tentukan dengan tepat tempat terjadinya pemotongan dengan overflow: clip dan overflow-clip-margin. Anda dapat menyelaraskan batas secara tepat dengan tepi model kotak dalam atau memperluas batas pemangkasan di luar kotak elemen dengan offset yang ditentukan (margin keamanan). Pendekatan modern ini sangat berperforma tinggi dan menghilangkan persyaratan lama untuk menambahkan container wrapper tambahan dengan padding kustom dan margin negatif hanya agar efek visual (seperti bayangan elemen turunan yang terlihat jelas) dirender tanpa terpotong.

Elemen yang diganti (<img>, <video>, <canvas>, dll.) ditetapkan secara default ke overflow: clip dan overflow-clip-margin: content-box, sehingga Anda dapat mengontrol penampungan gambar yang menggunakan object-fit atau border-radius dengan rapi.

Cara Menerapkan

  1. Terapkan overflow: clip: Pastikan elemen target telah mengaktifkan overflow: clip. Setelan overflow: clip wajib ada di penampung tata letak blok agar overflow-clip-margin dapat diterapkan. Jika overflow ditetapkan ke hidden, auto, atau scroll, properti overflow-clip-margin akan diabaikan oleh browser. overflow: clip mencegah semua scroll (baik yang dimulai oleh pengguna maupun terprogram melalui JavaScript).
  2. Menyelaraskan ke Tepi Kotak: Gunakan kata kunci untuk menyelaraskan batas pemangkasan secara tepat ke tepi model kotak dalam:
    • content-box: Memotong konten tepat di tempat area konten dimulai, sehingga area padding benar-benar bersih. Konten berhenti tepat di tepi padding. Sangat cocok untuk modul tata letak bertingkat.
    • padding-box (Default): Memotong konten di tepi dalam batas.
    • border-box: Memotong konten di tepi luar batas, sehingga konten dapat berada di bawah atau tumpang-tindih sebagian dengan batas transparan.
  3. Tentukan Offset yang Ditentukan (Bleed): Berikan nilai panjang (misalnya, 15px atau 5px) untuk membuat zona aman sebelum memotong piksel. Hal ini memungkinkan bayangan elemen turunan yang terlihat jelas dirender tanpa terpotong melewati tepi batas tanpa memperluas geometri tata letak.
  4. Gabungkan Tepi Kotak dan Jarak: Tentukan tepi kotak dan jarak panjang secara bersamaan (misalnya, content-box 15px) untuk mengimbangi dari tepi kotak tertentu.

Kode Contoh

Contoh berikut menunjukkan kontrol tata letak penampung dinamis, yang menampilkan framing bertingkat kurva konten dalam otomatis dan perlindungan bayangan elemen turunan bersama dengan penggantian progressive enhancement.

Penampung Blok: Lengkungan Membulat Bertingkat

  • Terapkan overflow-clip-margin: content-box ke penampung induk dengan sudut membulat dan padding kustom.
  • Terapkan sudut membulat yang serupa pada komponen media dan footer turunan dalam di sepanjang batas kotak konten dalam konsentris, sehingga menyelesaikan lengkungan bertingkat yang tidak rapi tanpa logika calc() kustom.
<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;
  }
}

Penampung Blok: Bayangan Elemen Turunan Terpotong

  • Terapkan overflow: clip dan tentukan offset panjang overflow-clip-margin yang diperluas untuk membuat zona aman yang terlihat, sehingga bayangan turunan dapat dirender tanpa terpotong di luar penampung induk tanpa mengubah geometri tata letak. Tanpa ini, bayangan turunan akan terpotong di batas induk.
<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;
  }
}

Penerapan Strategis & Praktik Terbaik

  • TERAPKAN overflow: clip pada elemen target saat menggunakan overflow-clip-margin, karena menyetel overflow secara ketat ke clip diwajibkan pada penampung tata letak blok standar untuk mengaktifkan margin klip melengkung kustom atau bagian dalam.
  • LAKUKAN setelan overflow-clip-margin: content-box pada penampung yang diberi padding dengan sudut membulat untuk otomatis memotong elemen turunan internal yang tidak membulat menjadi kurva batas bertingkat yang sempurna secara matematis tanpa logika pengurangan padding manual.
  • LAKUKAN konfigurasi overflow-clip-margin dengan offset panjang yang ditentukan saat menerapkan efek visual eksternal (seperti filter: drop-shadow()) untuk mencegah pemotongan kotak pembatas yang tajam tanpa mengubah atau memperluas geometri tata letak.
  • JANGAN terapkan overflow: clip jika penampung memerlukan manipulasi scroll terprogram melalui JavaScript atau berfungsi sebagai konteks tata letak langsung untuk elemen position: sticky, karena clip sepenuhnya menonaktifkan scroll.

Strategi Penggantian

Untuk lingkungan target yang tidak memiliki dukungan native untuk overflow: clip atau overflow-clip-margin, strategi penggantian progressive enhancement bergantung langsung pada maksud visual:

  • Kembali ke overflow: hidden sebagai pengalaman dasar untuk menjamin batasan inti dipertahankan.
  • Penggantian ke overflow: visible pada elemen yang drop-shadow atau badge sudut eksternalnya tidak boleh terpotong.

Menyelesaikan Penerapan Penggantian Progressive Enhancement

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