التحكّم في اقتصاص المحتوى الزائد

While overflow: hidden is a "blunt instrument" that almost always clips content strictly at the padding-box, overflow: clip combined with overflow-clip-margin provides the "scalpel" for fine-grained layout control across block containers.

حدِّد بدقة مكان حدوث الاقتصاص باستخدام overflow: clip وoverflow-clip-margin. يمكنك محاذاة الحدود بدقة مع حواف نموذج المربّع الداخلي أو تمديد حدود الاقتصاص إلى ما بعد مربّع العنصر بمقدار إزاحة محدّد (هامش أمان). يتميّز هذا الأسلوب الحديث بأداء عالٍ، ويغني عن الحاجة إلى إضافة حاويات التفاف إضافية مع حشو مخصّص وهوامش سالبة فقط للسماح بعرض التأثيرات المرئية (مثل ظلال العناصر الثانوية البارزة) بدون اقتصاصها.

تكون العناصر المستبدَلة (<img> و<video> و<canvas> وما إلى ذلك) تلقائيًا overflow: clip وoverflow-clip-margin: content-box، ما يمنحك إمكانية التحكّم في احتواء الصور التي تستخدم object-fit أو border-radius بشكل واضح.

كيفية الإعداد

1. تطبيق overflow: clip: تأكَّد من تفعيل overflow: clip في العنصر المستهدَف. يجب ضبط السمة overflow: clip على حاويات تنسيق الكتل ليتم تطبيق السمة overflow-clip-margin. إذا تم ضبط السمة overflow على hidden أو auto أو scroll، سيتجاهل المتصفّح السمة overflow-clip-margin. يمنع overflow: clip جميع عمليات الانتقال (سواء التي يبدأها المستخدم أو التي تتم آليًا من خلال JavaScript).
2. المحاذاة مع حافة المربّع: استخدِم الكلمات الرئيسية لمحاذاة حدود الاقتصاص بدقة مع حواف نموذج المربّع الداخلية:
   • content-box: يقتص المحتوى من بداية مساحة المحتوى تمامًا، ما يترك مساحة الحشو نظيفة تمامًا. يتوقف المحتوى عند حافة المساحة المتروكة. وهي ممتازة لوحدات التنسيق المتداخلة.
   • ‫padding-box (تلقائي): يتم اقتصاص المحتوى عند الحافة الداخلية للحدود.
   • ‫border-box: يقتطع المحتوى عند الحافة الخارجية للحدود، ما يسمح للمحتوى بالظهور تحت الحدود الشفافة أو يتداخل معها جزئيًا.
3. تحديد إزاحة معيّنة (الهامش الإضافي): أدخِل قيمة طول (مثلاً، 15px أو 5px) لإنشاء منطقة أمان قبل اقتصاص وحدات البكسل. يتيح ذلك عرض ظلال العناصر الفرعية البارزة بدون اقتصاصها خارج حافة الحدود وبدون توسيع هندسة التنسيق.
4. الجمع بين حافة المربّع والإزاحة: حدِّد كلاً من حافة المربّع وإزاحة الطول في الوقت نفسه (مثلاً، content-box 15px) للإزاحة من حافة مربّع معيّنة.

مثال على الرمز

توضّح الأمثلة التالية عناصر التحكّم في تنسيق الحاوية الديناميكية، وتعرض الإطارات المتداخلة التلقائية لمنحنى المحتوى الداخلي وحماية الظل للعناصر الفرعية إلى جانب إجراءات احتياطية للتحسين التدريجي.

حاويات الكتل: منحنيات مستديرة متداخلة

• طبِّق overflow-clip-margin: content-box على حاوية رئيسية بزوايا مستديرة وحشو مخصّص.
• يمكنك تطبيق زوايا مستديرة مماثلة على مكوّنات الوسائط الفرعية الداخلية والتذييل على طول حدود مربّع المحتوى الداخلي المتّحد المركز، ما يحلّ مشكلة منحنيات التداخل غير الملائمة بدون استخدام منطق calc() مخصّص.

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

حاويات الحظر: تسرُّب ظل العنصر الثانوي

• يُرجى تطبيق overflow: clip وتحديد إزاحة طول overflow-clip-margin ممتدة لإنشاء منطقة أمان مرئية تسمح بعرض ظل الطفل بدون اقتصاصه خارج الحاوية الرئيسية بدون تغيير هندسة التنسيق. بدون ذلك، يتم اقتصاص ظل العنصر الفرعي عند حدود العنصر الرئيسي.

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

التنفيذ الاستراتيجي وأفضل الممارسات

• يجب تطبيق السمة overflow: clip على العناصر المستهدَفة عند استخدام السمة overflow-clip-margin، لأنّ ضبط السمة overflow على القيمة clip هو أمر إلزامي في حاويات تنسيق الكتل العادية لتفعيل هوامش الاقتصاص المنحنية المخصّصة أو الداخلية.
• يجب ضبط overflow-clip-margin: content-box على الحاويات المبطّنة ذات الزوايا المستديرة لقص العناصر الفرعية الداخلية غير المستديرة تلقائيًا إلى منحنيات حدودية متداخلة مثالية من الناحية الرياضية بدون منطق طرح الحشو اليدوي.
• يجب ضبط overflow-clip-margin باستخدام إزاحة طول محدّدة عند تطبيق تأثيرات مرئية خارجية (مثل filter: drop-shadow()) لمنع اقتطاع مربّع الإحاطة الحاد بدون تغيير هندسة التنسيق أو توسيعها.
• لا تطبّق السمة overflow: clip إذا كانت الحاوية تتطلّب معالجة آلية للتمرير من خلال JavaScript أو كانت بمثابة سياق التنسيق المباشر لعناصر position: sticky، لأنّ السمة clip توقف التمرير تمامًا.

الاستراتيجيات الاحتياطية

بالنسبة إلى البيئات المستهدَفة التي لا تتوفّر فيها ميزة التوافق مع overflow: clip أو overflow-clip-margin، تعتمد استراتيجيات الاحتياطية للتحسين التدريجي بشكل مباشر على الغرض المرئي:

• الرجوع إلى overflow: hidden كتجربة أساسية لضمان الحفاظ على الحدود الأساسية
• الرجوع إلى overflow: visible في العناصر التي يجب عدم اقتطاع تظليل القطرات أو شارات الزوايا الخارجية فيها

إكمال تنفيذ الإجراء الاحتياطي للتحسين التدريجي

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