פקד חיתוך גלישה

המאפיין overflow: hidden הוא "כלי גס" שכמעט תמיד חותך את התוכן בדיוק ב-padding-box, אבל overflow: clip בשילוב עם overflow-clip-margin מספק את "סכין המנתחים" לשליטה מדויקת בפריסה במאגרי בלוקים.

מציינים בדיוק איפה מתרחשת החיתוך באמצעות overflow: clip ו-overflow-clip-margin. אפשר ליישר את הגבול במדויק עם הקצוות הפנימיים של מודל התיבה, או להרחיב את גבול החיתוך מעבר לתיבה של הרכיב לפי היסט מסוים (שולי בטיחות). הגישה המודרנית הזו יעילה מאוד ומבטלת את הדרישה הקודמת להוסיף קונטיינרים של wrapper עם ריפוד בהתאמה אישית ושוליים שליליים, רק כדי לאפשר עיבוד של אפקטים חזותיים (כמו צללים בולטים של רכיבי צאצא) בלי חיתוך.

רכיבים שהוחלפו (<img>,‏ <video>,‏ <canvas> וכו') מוגדרים כברירת מחדל ל-overflow: clip ול-overflow-clip-margin: content-box, וכך אתם יכולים לשלוט בקובצי אימג' של קונטיינרים שמשתמשים ב-object-fit או ב-border-radius.

איך להטמיע

1. החלת overflow: clip: מוודאים שהתכונה overflow: clip מופעלת ברכיב היעד. כדי שההגדרה overflow-clip-margin תיכנס לתוקף, חובה להגדיר את overflow: clip במאגרי פריסה של בלוקים. אם המדיניות overflow מוגדרת לערך hidden,‏ auto או scroll, הדפדפן מתעלם מהמאפיין overflow-clip-margin. הערך overflow: clip מונע כל גלילה (גם על ידי המשתמש וגם באופן פרוגרמטי באמצעות JavaScript).
2. יישור לקצה התיבה: משתמשים במילות מפתח כדי ליישר במדויק את גבול החיתוך לקצוות הפנימיים של מודל התיבה:
   • ‫content-box: חותך את התוכן בדיוק במקום שבו אזור התוכן מתחיל, ומשאיר את אזור המרווח הפנימי נקי לחלוטין. התוכן נעצר בדיוק בקצה של המרווח הפנימי. הוא מצוין למודולים של פריסות בתצוגת עץ.
   • ‫padding-box (ברירת המחדל): חותך את התוכן בקצה הפנימי של הגבול.
   • ‫border-box: חותך את התוכן בקצה החיצוני של הגבול, כך שהתוכן יכול להיות מתחת לגבול שקוף למחצה או לחפוף לו חלקית.
3. הגדרת היסט (offset) ספציפי (הבליד): מציינים ערך אורך (למשל, 15px או 5px) כדי ליצור אזור בטוח לפני חיתוך הפיקסלים. כך אפשר לרנדר צללים בולטים של רכיבי צאצא בלי לחתוך אותם מעבר לקצה הגבול, ובלי להרחיב את הגיאומטריה של הפריסה.
4. שילוב של קצה התיבה וההיסט: מציינים גם את קצה התיבה וגם את היסט האורך בו-זמנית (למשל, content-box 15px) כדי ליצור היסט מקצה תיבה ספציפי.

קוד לדוגמה

הדוגמאות הבאות ממחישות את אמצעי הבקרה של פריסת קונטיינר דינמי, ומציגות מסגור מקונן של עקומת תוכן פנימי אוטומטי והגנה על צל של רכיב צאצא לצד חלופות של שיפור הדרגתי (progressive enhancement).

קונטיינרים של בלוקים: פינות מעוגלות בתוך פינות מעוגלות

• מחילים את 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, אסטרטגיות הגיבוי של שיפור הדרגתי (progressive enhancement) תלויות ישירות במטרה החזותית:

• חזרה ל-overflow: hidden כחוויית הבסיס כדי להבטיח שהגבולות העיקריים נשמרים.
• חזרה ל-overflow: visible ברכיבים שבהם אסור לחתוך צלליות או תגים בפינות החיצוניות.

הטמעה מלאה של שיפור הדרגתי (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;
  }
}