کلیپ سرریز

مقدمه

را overflow ویژگی CSS هنگام ساخت یک وب سایت رایج است. برای اهداف مختلف استفاده می شود:

• پیمایش عمودی را فعال کنید (مثلا overflow-y: auto)
• بریدن محتویات یک لفاف (مثلاً overflow-x: hidden)

فرض کنید یک wrapper با CSS زیر داریم:

.wrapper {
  overflow-y: hidden;
}

در زیر هود، مرورگر اضافه خواهد کرد overflow-x: auto به طور پیش فرض، منجر به برداشت در دو طرف افقی و عمودی می شود..

سعی کن تغییر کنی overflow-y به hidden در تظاهرات زیر:

توجه داشته باشید که سبک محاسبه شده از overflow-x اتفاق خواهد افتاد auto، هر دو طرف را برش می دهد. اما چرا اینطور است؟

مشخصات ماژول سرریز CSS سطح 3 موارد زیر را بیان می کند:

مقادیر سرریز قابل مشاهده/کلیپ در صورتی که یکی از سرریز-x یا سرریز-y نه قابل مشاهده باشد و نه بریده شده باشد، به صورت خودکار/مخفی (به ترتیب) محاسبه می شود.

اگر overflow-y ارزش است clip، در overflow-x همینطور خواهد ماند (visible). این بدان معنی است که ما می توانیم یک طرف یک ظرف را وصل کنیم.

مشکل سرریز: پنهان

زمانی که overflow تنظیم شده است hidden در یک محور، بگویید overflow-y، محور دیگر overflow-x اتفاق خواهد افتاد auto به طور پیش فرض، که باعث می شود هر دو طرف برش داده شوند.

این رفتار همیشه مطلوب نیست. در برخی موارد، ما فقط می خواهیم در امتداد یک محور برش دهیم.

همچنین، محور دیگر قادر به اسکرول خواهد بود که می تواند منجر به نتایج غیرمنتظره شود.

استفاده از سرریز: کلیپ

اینجاست که clip ارزش مفید می شود. توسط تمام مرورگرهای اصلی پشتیبانی می شود با توجه به CanIUse.

در مثال زیر تنظیم کردم overflow-y به clip. را overflow-x مقدار به همان صورت باقی می ماند (visible). اکنون برش فقط در امتداد محور y انجام می شود.

جالبه، نه؟ در اینجا چگونه است clip ارزش با overflow.

استفاده از موارد سرریز: گیره

در اینجا چند نمونه عملی از overflow :clip در عمل

بخش شخصیت ها

را clip مقدار به ویژه در بخش های کاراکتر با تصاویر آماری بزرگ مفید است

در شکل بعدی تصویری داریم که نباید با عرض لفاف محدود شود. در عوض، تصویر باید به نسبت تصویر اصلی خود نمایش داده شود و در صورت لزوم به مرورگر واگذار شود تا برش دهد.

HTML:

div class="hero">
  div class="hero-content">div>
  div class="hero-thumb">
    img src="hero.png" alt="" />
  div>
div>

طرح CSS:

.hero {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1rem;
}

در زیر کاپوت، طرح به این شکل است. تصویر مشخصه سرریز می شود انگشت شست عنصر شبکه (محفظه آن).

نسخه ی نمایشی زیر را ببینید، من یک طرح کلی برای هر عنصر شبکه اضافه کردم. تغییر را امتحان کنید Show overflow تیک بزنید و ببینید چه اتفاقی می افتد.

این همان چیزی است که تصویر به نظر می رسد. اگر اضافه کنیم overflow-x: hidden به .hero در بخش، تصویر از دو طرف افقی و عمودی برش داده می شود.

برای رفع این مشکل باید استفاده کنیم overflow-x: clip در عوض برداشت فقط در امتداد محور افقی انجام خواهد شد.

.hero {
  overflow-x: clip;
}

در نسخه ی نمایشی زیر آن را امتحان کنید.

ما به نتیجه ای رسیده ایم که بدون استفاده از آن ممکن نیست clip ارزش

کلیپ یک طرفه

در این مثال یک عنصر تزئینی در سمت چپ و راست داریم. یک دکمه گرد در مرکز پایین قرار دارد.

div class="container">
  h1 class="title">Nature refreshh1>
  p class="description">p>
  a href="/why" class="button">Why?a>
  img class="decor start" src="decor.svg" alt="" />
  img class="decor end" src="decor.svg" alt="" />
div>

چگونه می توانیم الگوی سمت چپ و راست را بدون تاثیر بر دکمه برش دهیم؟

استفاده clip برش را فقط به سمت افقی محدود می کند.

.hero {
  overflow-x: clip;
}

آن را در دمو زیر امتحان کنید:

بریدن عنصری بزرگتر از والد آن

در صفحه اصلی وب سایت من، بخشی وجود دارد که من آن را “کلاه ها” نامیده ام.

در آنجا عکس من در یک لفاف با عرض ثابت است. در یکی از کلاه ها مجبور شدم یک جلوه بصری دایره ای بزرگ قرار دهم و آن را فقط در سمت عمودی برش دهم.

مشکل این است که کودک از پوسته بزرگتر است. شکل زیر را ببینید:

اما چرا پوسته را بزرگتر نکردی؟ من به آن نیاز داشتم تا بدون تغییر اندازه روی موبایل به خوبی کار کند و فکر می‌کردم آن را امتحان کنم clip برای آن

.hats-item {
  overflow-y: clip;
}

با نسخه ی نمایشی زیر بازی کنید تا آن را در عمل ببینید:

در مثال زیر، ما یک هدر صفحه با موارد زیر داریم:

• عنوان
• توضیحات
• مینیاتوری

محتوا برای همپوشانی مرزهای سرصفحه به پایین فشار داده می شود. تصویر کوچک در سمت راست قرار می گیرد و اگر فضای کافی در سمت راست وجود ندارد، باید برش داده شود.

اینم طراحی:

در شکل زیر تصویر (که باید به صورت افقی برش داده شود) و محتوایی که باید قابل مشاهده باشد را هایلایت کرده ام.

در دمو زیر، مقدار پیش فرض برای overflow-x است visible. سعی کنید آن را تغییر دهید hidden یا clip و ببینید چه اتفاقی می افتد

بدون این امکان پذیر نیست clip مگر اینکه یک لفاف اضافه کنیم (هک!).

انیمیشن های اسکرول محور

هنگام استفاده از انیمیشن‌های CSS اسکرول، ممکن است لازم باشد از آن استفاده کنید overflow: hidden برای بریدن محتویات ظرف با این حال، این در برابر انیمیشن های اسکرول محور کار می کند.

استفاده overflow: hidden ظرف اسکرول را تعریف می کند. برای جلوگیری از این، می توانیم استفاده کنیم overflow: clip در عوض در نسخه ی نمایشی زیر، گربه باید از چپ به راست متحرک شود، اما آن طور که انتظار می رود کار نمی کند.

تغییر دهید overflow ارزش به clip و ببینید چه اتفاقی می افتد

برای جزئیات بیشتر در مورد چرایی استفاده، این مقاله از Bramus را بررسی کنید clip هنگام استفاده از انیمیشن های اسکرول راه حل است.

ویژگی overflow-clip-margin

هنگام استفاده clip مقدار، می‌توانیم زمانی که مرورگر محتوای عنصر را پس از برش می‌کشد، یک فیلد برای کنترل اضافه کنیم.

برای این کار باید استفاده کنیم overflow-clip-margin دارایی

در دمو زیر سعی کنید با اسلایدر بازی کنید و متوجه شوید که چه اتفاقی می افتد:

با افزایش ارزش overflow-clip-margin، مرزهای سطح زیر کشت افزایش یافت.

در مثال بالا، نحوه عملکرد فیلد کلیپ را فقط با نشان دادن آن در امتداد محور عمودی نشان دادم. می توانیم روی یک محور یا هر دو گیره کنیم.

پشتیبانی برای overflow-clip-margin ناقص است و بین مرورگرها متفاوت است:

• در کروم فقط در صورتی کار می کند که هر دو محور بریده شده باشند (مثلاً: overflow: clip)
• در فایرفاکس اگر فقط یک محور را برش دهیم خوب کار می کند. با این حال، ما فقط می توانیم از مقدار طول استفاده کنیم.

کادر لیست برچسب را باز کنید

این نمونه از این دمو توسط هلن چونگ الهام گرفته شده است.

ایده این است که ما باید اضافه کنیم outline هنگام نگه داشتن و تمرکز اضافه کردم overflow-x: clip برای جلوگیری از سرریز محتوا در صورت طولانی بودن یکی از برچسب ها.

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  overflow-x: clip;
}

ماوس را روی اولین برچسب نگه دارید تا اثر را ببینید.

بیایید نگاه دقیق تری بیندازیم:

ما می توانیم با استفاده از این مشکل را برطرف کنیم overflow-clip-margin از پدر و مادر

.tags-list {
  
  overflow-x: clip;
  overflow-clip-margin: 4px;
}

در نسخه ی نمایشی زیر، روی نوار لغزنده بزرگنمایی کنید و متوجه شوید که طرح کلی همانطور که انتظار می رود ظاهر می شود.

سعی کنید در هر بزرگ‌نمایی، نشانگر را روی برچسب نگه دارید تا ببینید که طرح کلی ظاهر می‌شود.

مفید است، درست است؟

شعاع یک مرز تو در تو

در اینجا یک روش جالب برای استفاده وجود دارد overflow-clip-margin برای اجرای شعاع در مرز تودرتو توسط آدام آرگیل.

.card {
  overflow: clip;
  overflow-clip-margin: content-box;
}

از زمان نوشتن این مقاله فقط در کروم کار می کند.

نمایش مشروط روشنایی گوشه

می خواهیم به صورت مشروط یک عنصر تزئینی را در برخی از گوشه ها اضافه کنیم.

به طور پیش فرض، عناصر تزئینی خارج از محدوده ظرف هستند:

.card {
  overflow: clip;

  &:before {
    left: -8px;
    top: -8px;
  }

  &:after {
    right: -8px;
    bottom: -8px;
  }
}

در این مثال، من می خواهم عناصر تزئینی را در صورتی که بخش دارای تصویر باشد نشان دهم.

.card:has(img) {
  overflow-clip-margin: 10px;
}

با نوار لغزنده بازی کنید و ببینید عناصر چگونه نمایش داده می شوند.

اگر فکر می‌کنید بی‌فایده است، از این مورد استفاده نکنید.

منابع اضافی

نتیجه گیری

مقدار clip می تواند در موارد خاصی مفید باشد، همانطور که در این مقاله توضیح داده شده است. اگرچه نسبتا جدید است، اما در تمام مرورگرهای اصلی به خوبی پشتیبانی می شود. امیدوارم این مقاله برای شما مفید بوده باشد و از Clip در پروژه های خود استفاده کنید.