این آموزش در تاریخ ۱۳۹۹/۰۳/۱۶ آپدیت شده است.
آموزش ویژگی break-before در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی break-before در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی break-before در CSS
با استفاده از ویژگی break-before که در CSS3 اضافه شده است ،میتوان مشخص کرد که آیا شکسته شدن یک صفحه یا ستون هایی ازمتن ( در هنگام چاپ صفحه ) ، قبل از یک عنصر خاص رخ دهد یا خیر.
مثلا فرض میکنیم یک عنصر بنام ( مثلا کلاس my-footer ) داریم و میخوام حتما و همیشه صفحه قبل از این عنصر شکسته شود و به صفحه دوم برود، چون نمیخوام محتوای درون کلاس my-footer تکه تکه شود، مثلا یک تکش درون یک صفحه و تکه دیگر در صفحه بعد قرار بگیرد.
تا به الان شاید دیده باشید، وقتی چندین صفحه رو چاپ میگیریم خب محتوا در اون صفحات ( مثلا ممکنه صفحه A4 یا A5 و… ) شکسته می شوند و به صفحه جدید میروند.
برای اینکه بطور کامل نقطه / منطقه شکست یک صفحه را درک نمایید لطفا به تصویر زیر توجه نمایید :
این ویژگی تنها بروی صفحه چاپ یا صفحه ای که قرار است چاپ / پرینت شود عمل میکند.
این ویژگی در CSS3 اضافه شده تا بتواند ویژگی page-break-before را کمی گسترش بدهد ، یعنی در واقع ویژگی page-break-before همان ویژگی break-before می باشد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی break-before را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 |
@media print { .my-footer { break-before: always; } } |
Free-Learn
جدول مشخصات ویژگی break-before در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.breakBefore=”always”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی break-before در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| break-before | ۵۰ | ۶۵ | ۳۷ | ۱۰ | ۱۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
break-before: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی break-before در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| auto | پیش فرض – عناصر،ستون ها و صفحات بصورت خودکار شکسته میشوند. |
| all | همیشه درست قبل از باکس اصلی عنصر، صفحه شکسته میشود. |
| always | همیشه قبل از یک عنصر خاص صفحه شکسته میشود. |
| avoid | از شکسته شدن صفحه قبل از ستون ها ،صفحات و عناصر جلوگیری میکند. |
| avoid-column | از شکسته شدن صفحه قبل از ستون ها جلوگیری میکند. |
| avoid-page | قبل از عنصر از شکسته شدن صفحه جلوگیری میکند. |
| avoid-region | جلوگیری از ایجاد منطقه شکست صفحه در داخل عناصر. |
| column | همیشه ستون ها را قبل از یک عنصر میشکند. |
| left | یک یا دو صفحه به اجبار قبل از عنصر شکسته میشود. سپس صفحه بعد را به عنوان یک صفحه سمت چپ قالب بندی میکند. |
| page | همیشه صفحه قبل از عنصر شکسته میشود. |
| recto | مجبور میشود یک یا دو صفحه را قبل از باکس اصلی عنصر بشکند سپس صفحه بعد را در قالب یک صفحه Recto نمایش دهد. ( اطلاعات بیشتر درباره Recto و Verso ) |
| region | همیشه قبل از یک عنصر منطقه شکست را قرار میدهد. |
| right | یک یا دو صفحه به اجبار قبل از یک عنصر شکسته میشود سپس صفحه بعد را به عنوان یک صفحه سمت راست قالب بندی میکند. |
| verso | مجبور میشود یک یا دو صفحه را قبل از باکس اصلی عنصر بشکند سپس صفحه بعد را در قالب یک صفحه Verso نمایش دهد. ( اطلاعات بیشتر درباره Recto و Verso ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
این ویژگی فقط بروی صفحاتی که قرار است چاپ / Print شوند عمل میکند، یعنی در واقع برای مشاهده عملکرد این ویژگی شما باید به کاغذی که چاپ یا پرینت شده نگاه کنید.
