প্রকাশিত: ১১ অক্টোবর, ২০২৪
ক্রোম ১৩০-এ clone ভ্যালু সহ ` box-decoration-break CSS প্রপার্টিটি উপলব্ধ, যা ইনলাইন এবং ব্লক ফ্র্যাগমেন্টেশন সমর্থন করে। এই পোস্টে এটি কেন এবং কীভাবে ব্যবহার করতে হয় তা ব্যাখ্যা করা হয়েছে।
ইনলাইন ফ্র্যাগমেন্টেশন
ইনলাইন ফ্র্যাগমেন্টেশন হলো এমন একটি অবস্থা যখন কোনো ইনলাইন এলিমেন্ট, যেমন একটি টেক্সট স্ট্রিং, একাধিক লাইনে বিভক্ত হয়ে যায়। ইনলাইন এলিমেন্টগুলোর একটি বক্স থাকে, যা নিয়ে সাধারণত ভাবার প্রয়োজন হয় না, যদি না আপনি এলিমেন্টটিতে কোনো ব্যাকগ্রাউন্ড বা বর্ডার যোগ করার চেষ্টা করেন। নিচের উদাহরণে, একটি স্প্যান-এ border-radius একটি ব্যাকগ্রাউন্ড যোগ করা হয়েছে। বর্ডারটি শুধুমাত্র স্ট্রিংটির শুরুতে এবং শেষে বাঁকানো।
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
}
box-decoration-break এর প্রাথমিক মান হলো slice , যা বক্সগুলোতে এই কাটা-কাটা প্রভাব দেয়। তবে, নতুন সমর্থিত box-decoration-break: clone অর্থ হলো, প্রতিটি লাইন একটি গোলাকার বর্ডার দিয়ে শুরু এবং শেষ হয়।
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
box-decoration-break: clone;
}
ব্লক খণ্ডন
মাল্টি-কলাম লেআউট ব্যবহার করে কোনো কন্টেন্টকে কলামে ভাগ করলে, অথবা প্রিন্ট করার সময় কন্টেন্টটি বিভিন্ন পৃষ্ঠায় বিভক্ত হয়ে গেলে ব্লক ফ্র্যাগমেন্টেশন ঘটে।
নিচের উদাহরণে, বিষয়বস্তুকে কলামে ভাগ করা হয়েছে এবং প্রতিটি অনুচ্ছেদের একটি বর্ডার রয়েছে। slice এর প্রাথমিক মান ব্যবহার করলে বক্সগুলো কলামের উপরে ও নিচে স্লাইস করা হয়।
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
}
box-decoration-break: clone ব্যবহার করলে, যখন একটি বক্সকে খণ্ডিত করা হয়, তখন প্রতিটি খণ্ড বর্ডার দিয়ে মোড়ানো থাকে।
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
box-decoration-break: clone;
}
পৃষ্ঠাটি প্রিন্ট করার সময় যদি বক্সগুলোর বর্ডার খণ্ডিত হয়ে যায়, তাহলেও একই ঘটনা ঘটে। যদি একটি বক্স দুটি পৃষ্ঠায় বিভক্ত হয়ে যায়, তাহলে বক্সটির বর্ডার প্রথম পৃষ্ঠায় সম্পূর্ণ হবে এবং দ্বিতীয় পৃষ্ঠায় একটি নতুন বক্স খুলে যাবে।