آشنایی بیشتر با ۵۰ ویژگی جالب CSS (جلسه ۱۱) : ویژگی box-decoration-break

css3 attributes

ویژگی box-decoration-break

این ویژگی مشخص میکنه که ویژگی‌های دیگه از جمله background و padding و border و border-image و box-shadow و margin و clip، وقتی که المنت مورد نظر Fragment یا تکه تکه میشه، چطور به اون المنت اعمال میشن. شکستی یا تکه تکه شدن تحت یکی از موارد زیر اتفاق میوفته:

  • یک باکس inline تحت شرایطی قرار بگیره که به چند خط تبدیل بشه. در این حالت به هر کدام از خطوط یک تکه یا Fragment میگن.
  • زمانی که المنت مورد نظر قالب ستونی یا Column layout داشته باشه و به چند ستون تبدیل بشه. در این حالت به هر کدام از ستونها یک Fragment میگن.
  • زمانی که قسمتی از المنت مورد نظر بدلیل Page Break که برای پرینت کردن اتفاق میوفته، جدا بشه.

مقدار پیش فرض این ویژگی slice هست و در زیر اون رو با ذکر مثال براتون توضیح میدیم. شما فقط میتونین از این ویژگی برای المنتهای Inline استفاده کنید و نمیتونین برای مواردی که Block یا … هستن استفاده کنید. پشتیبانی مرورگرها از این ویژگی بصورت زیر هست:box-decoration-break-1

همونطور که دیدید فقط Firefox هست که از این ویژگی بصورت کامل پشتیبانی میکنه. اون مواردی که در بالا به رنگ زرد مشخص شده اند به معنای این هست که بصورت جزئی از این ویژگی پشتیبانی میکنن و برای اونا هم حتما باید از -webkit- استفاده کنید. کد زیر رو در نظر بگیرید:

box-decoration-break property specifies how the element's background are applied when it's wrapped into multiple lines.

همونطور که دیدید یک span قرار دادیم و مقداری متن هم درون اون گذاشتیم. همونطور که میدونین المنت Span یک المنت inline هست و به همین دلیل میتونیم برای اون از ویژگی box-decoration-break استفاده کنیم. کدهای CSS زیر رو هم در نظر بگیرید:

.text {
	-webkit-box-decoration-break: slice;
    box-decoration-break: slice;
    font-size: 24px;
    line-height: 3;
    background: linear-gradient(to bottom right, yellow, green);
	box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow;
	border-style: solid;
    border-radius: 16px;
    padding: 4px 18px;
    box-sizing: border-box;
}

همونطور که دیدید استایل‌های متنوعی با استفاده از border-radius و linear-gradient و box-shadow به اون اعمال کردیم و برای اینکه بهتر این ویژگی رو متوجه بشیم، فاصله بین خطوط رو با استفاده از ویژگی line-height زیاد کردیم. مقادیری که برای این ویژگی قابل استفاده هستند بصورت زیر هست:

  • slice : این مورد، مقدار پیش فرض این ویژگی هست و در حالت طبیعی چنین اتفاقی برای المنت مورد نظر میوفته. خروجی بصورت زیر هست:box-decoration-break-2
    میبینید که متن مورد نظر چند خطی هست. پس با توجه به توضیحاتی که در بالا دادیم، هر خط یک تکه یا Fragment محسوب میشه. در حالت slice که مقدار پیش فرض هم هست، همونطور که میبینید همه استایلها از ابتدا تا انتها به هم متصل هستن و چون متن مورد نظر در بعضی از نقاط دچار شکستگی شده است، به خط بعد رفته. اگر دقت کنید سمت چپ خط اول و سمت راست خط آخر دارای border-radius هستن و بقیه خطوط شکسته هستن. دلیل این اتفاق این هست که به هر کدوم از خطوط یا Fragment‌ها استایل متفاوتی اعمال نشده است.
  • clone : در این حالت بر خلاف مورد بالا، استایل مورد نظر بصورت سرتاسری برای المنت مورد نظر اعمال نمیشه و هر خط استایل مستقل میگیره. خروجی بصورت زیر هست:box-decoration-break-3

دیدید که استایل مورد نظر برای هر خط بصورت جداگانه اعمال شد و در این حالت همه خطوط border-radius دارن. این مثالها رو میتونین در همه مرورگرهایی که پشتیبانی جزئی هم دارند با استفاده از -webkit- امتحان کنید. ولی موارد مربوط به تکه تکه شدن به دلیل Column layout و Print، فعلا فقط در مرورگر Firefox پشتیبانی میشن. مثلا یک باکس عادی رو در Firefox در نظر بگیرید:box-decoration-break-4

حالا اگر اون رو بصورت ستونی در بیاریم، استایل اون بصورت زیر میشه:box-decoration-break-5

میبینید که چون بصورت پیش فرض مقدار slice اعمال میشه، استایل بصورت سرتاسری اعمال میشه. اگر مقدار اون رو برابر با clone قرار بدیم بصورت زیر میشه:box-decoration-break-6

دیدید که استایل هر ستون بصورت مجزا اعمال میشه. بهمین راحتی.

برای مطالعه بیشتر در این زمینه میتونین به این لینک مراجعه کنید.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Sxource

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

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

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0