Taşma Kırpma Kontrolü

overflow: hidden, içeriği neredeyse her zaman dolgu kutusunda kesin olarak kırpan "keskin bir araç" olsa da overflow: clip ile overflow-clip-margin, blok kapsayıcılar üzerinde ayrıntılı düzen kontrolü için "neşter" sağlar.

overflow: clip ve overflow-clip-margin ile kırpmanın tam olarak nerede gerçekleştiğini belirtin. Sınırı, iç kutu modeli kenarlarıyla tam olarak hizalayabilir veya kırpma sınırını, belirtilen bir ofset (güvenlik payı) kadar öğenin kutusunun ötesine uzatabilirsiniz. Bu modern yaklaşım, yüksek performans sağlar ve görsel efektlerin (ör. belirgin alt öğe gölgeleri) kırpılmadan oluşturulması için özel dolgu ve negatif kenar boşlukları içeren ek sarmalayıcı kapsayıcılar ekleme şeklindeki eski gereksinimi ortadan kaldırır.

Değiştirilen öğeler (<img>, <video>, <canvas> vb.) varsayılan olarak overflow: clip ve overflow-clip-margin: content-box değerlerini alır. Bu sayede, object-fit veya border-radius kullanan resimleri düzgün bir şekilde içerebilirsiniz.

Nasıl uygulanır?

1. overflow: clip uygulayın: Hedef öğede overflow: clip özelliğinin etkinleştirildiğinden emin olun. overflow-clip-margin özelliğinin geçerli olması için blok düzeni kapsayıcılarında overflow: clip ayarının yapılması zorunludur. overflow, hidden, auto veya scroll olarak ayarlanırsa overflow-clip-margin özelliği tarayıcı tarafından yoksayılır. overflow: clip, tüm kaydırma işlemlerini (hem kullanıcı tarafından başlatılan hem de JavaScript aracılığıyla programatik olarak yapılan) engeller.
2. Kutu kenarına hizalama: Kırpma sınırını iç kutu modeli kenarlarına tam olarak hizalamak için anahtar kelimeleri kullanın:
   • content-box: İçeriği tam olarak içerik alanının başladığı yerden kırparak dolgu alanını tamamen temiz bırakır. İçerik, dolgunun tam kenarında biter. İç içe yerleştirilmiş düzen modülleri için idealdir.
   • padding-box (Varsayılan): İçeriği kenarlığın iç kenarından kırpar.
   • border-box: İçeriği kenarlığın dış kenarından kırparak içeriğin yarı saydam bir kenarlığın altında kalmasına veya kısmen üst üste binmesine olanak tanır.
3. Belirli bir ofset (taşma payı) tanımlama: Pikselleri kesmeden önce bir güvenlik bölgesi oluşturmak için uzunluk değeri (ör. 15px veya 5px) girin. Bu sayede, belirgin alt öğe gölgeleri, düzen geometrisini genişletmeden sınır kenarının ötesinde kırpılmadan oluşturulabilir.
4. Kutu kenarı ve ofseti birleştirme: Belirli bir kutu kenarından ofset uygulamak için hem kutu kenarını hem de uzunluk ofsetini aynı anda belirtin (ör. content-box 15px).

Örnek Kod

Aşağıdaki örneklerde, dinamik kapsayıcı düzeni kontrolleri gösterilmektedir. Bu kontrollerde, otomatik iç içerik eğrisi iç içe yerleştirilmiş çerçeveleme ve alt öğe gölge korumasının yanı sıra progresif geliştirme yedekleri de gösterilmektedir.

Blok Kapsayıcılar: İç İçe Yerleştirilmiş Yuvarlak Eğriler

• Yuvarlatılmış köşeleri ve özel dolgusu olan bir üst kapsayıcıya overflow-clip-margin: content-box uygulayın.
• İçerideki alt medya ve altbilgi bileşenlerine, eşmerkezli iç içerik kutusu sınırı boyunca benzer yuvarlak köşeler uygulayarak özel calc() mantığı olmadan garip iç içe yerleştirme eğrilerini çözer.

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

Blok Kapsayıcılar: Alt Öğe Gölge Taşması

• overflow: clip uygulayın ve düzen geometrisini değiştirmeden alt öğenin gölgesinin üst kapsayıcının dışında kırpılmadan oluşturulmasına izin veren görünür bir güvenlik bölgesi oluşturmak için genişletilmiş bir overflow-clip-margin uzunluk ofseti tanımlayın. Bu olmadan, alt öğenin gölgesi üst öğenin sınırında kırpılır.

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

Stratejik Uygulama ve En İyi Uygulamalar

• overflow-clip-margin kullanırken hedef öğelere overflow: clip UYGULAYIN. Özel veya iç kavisli kırpma kenar boşluklarını etkinleştirmek için standart blok düzeni kapsayıcılarında overflow değerini clip olarak ayarlamak zorunludur.
• Yuvarlatılmış köşelere sahip dolgulu kapsayıcılarda overflow-clip-margin: content-box değerini AYARLAYIN. Böylece, yuvarlatılmamış dahili alt öğeler, manuel dolgu çıkarma mantığı olmadan matematiksel olarak mükemmel iç içe yerleştirilmiş kenar eğrilerine otomatik olarak kırpılır.
• Düzen geometrisini değiştirmeden veya genişletmeden keskin sınırlayıcı kutu kesilmesini önlemek için harici görsel efektler (ör. filter: drop-shadow()) uygularken overflow-clip-margin öğesini belirli bir uzunluk ofsetiyle yapılandırın (DO).
• Kapsayıcı, JavaScript aracılığıyla programatik kaydırma manipülasyonu gerektiriyorsa veya position: sticky öğeleri için doğrudan düzen bağlamı olarak kullanılıyorsa overflow: clip değerini UYGULAMAYIN. clip, kaydırmayı tamamen devre dışı bırakır.

Yedek Stratejiler

overflow: clip veya overflow-clip-margin için yerel destek sunmayan hedef ortamlarda, progresif geliştirme yedek stratejileri doğrudan görsel amaca bağlıdır:

• Temel sınırların korunmasını garanti etmek için temel deneyim olarak overflow: hidden sürümüne geri dönün.
• Gölge veya dış köşe rozetlerinin kesilmemesi gereken öğelerde overflow: visible değerine geri dönün.

Progresif Geliştirme Yedek Uygulamasını Tamamlama

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