প্রকাশিত: জুন 11, 2025
বর্ডার এবং সিউডো-এলিমেন্ট হ্যাককে বিদায় বলুন এবং CSS গ্যাপ ডেকোরেশনকে হ্যালো বলুন।
মাইক্রোসফ্ট এজ টিম ঘোষণা করতে পেরে উচ্ছ্বসিত যে CSS গ্যাপ ডেকোরেশন, ফ্লেক্স, গ্রিড এবং মাল্টি-কলাম লেআউটের আইটেমগুলির মধ্যে ফাঁক স্টাইল করার একটি নতুন উপায়, এখন Chrome এবং Edge 139-এ ডেভেলপার ট্রায়ালের জন্য উপলব্ধ!
এটি ব্যবহার করে দেখুন এবং এই API এর ভবিষ্যত গঠনে সহায়তা করতে আপনার প্রতিক্রিয়া শেয়ার করুন৷
দরকারী লিঙ্ক
সমস্যা
ক্যালেন্ডার, কার্ড বা ডেটা গ্রিডের মতো UI উপাদানগুলিতে স্টাইলিং ফাঁকগুলি পাঠযোগ্যতাকে ব্যাপকভাবে উন্নত করতে পারে এবং সামগ্রিক নান্দনিকতা যোগ করতে পারে। যাইহোক, গ্রিড এবং ফ্লেক্সবক্স লেআউটে এই প্রভাব অর্জনের জন্য ঐতিহ্যগতভাবে সীমানা, ছদ্ম-উপাদান, বা পটভূমি কৌশলগুলির সাথে বিশ্রী সমাধানের প্রয়োজন হয়। এই সমাধানগুলি বিভিন্ন কারণে সমস্যাযুক্ত হতে পারে।
- অজ্ঞাত: তারা ভিজ্যুয়াল স্টাইলিংয়ের জন্য কাঠামোগত নির্ভরতা প্রবর্তন করে, যা শব্দার্থিক HTML এর নীতির বিরুদ্ধে যায়।
- অ্যাক্সেসিবিলিটি-অফ্রেন্ডলি: তাদের প্রায়ই অতিরিক্ত DOM উপাদানের প্রয়োজন হয়, যা স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তিতে হস্তক্ষেপ করতে পারে।
- রক্ষণাবেক্ষণ করা কঠিন: তাদের জটিল বিন্যাস যুক্তির প্রয়োজন হয় এবং উপাদানগুলির মধ্যে সামঞ্জস্যপূর্ণ স্টাইলিং আরও কঠিন করে তোলে।
- পারফরম্যান্সের জন্য খারাপ: এই সমাধানগুলি DOM-এ অপ্রয়োজনীয় উপাদান যুক্ত করতে পারে যা পারফরম্যান্সের সমস্যা হতে পারে।
যদিও ওয়েব প্ল্যাটফর্মটি ইতিমধ্যেই column-rule সম্পত্তির সাথে স্টাইলিং ফাঁক সমর্থন করে, এটি বর্তমানে শুধুমাত্র বহু-কলাম লেআউটের মধ্যে সীমাবদ্ধ। ওয়েব ডেভেলপাররা দীর্ঘদিন ধরে গ্রিড এবং ফ্লেক্সবক্সের মতো অন্যান্য প্রাসঙ্গিক লেআউটের ধরন জুড়ে স্টাইল ফাঁক করার জন্য একটি সামঞ্জস্যপূর্ণ উপায়ের অনুরোধ করেছে।
সমাধান: CSS ফাঁক সজ্জা
গ্যাপ অলঙ্করণগুলি গ্রিড এবং ফ্লেক্সবক্সের মতো অন্যান্য লেআউট প্রকারের সাথে কাজ করার জন্য column-rule বৈশিষ্ট্যকে প্রসারিত করে এবং এটিকে পরিপূরক করার জন্য একটি নতুন row-rule বৈশিষ্ট্য প্রবর্তন করে। এটি বিভিন্ন লেআউটের ধরন জুড়ে ফাঁকগুলি কীভাবে স্টাইল করা হয় তাতে ধারাবাহিকতা এবং নতুন কাস্টমাইজযোগ্যতা নিয়ে আসে।
CSS ফাঁক সজ্জা নিম্নলিখিত সুবিধা নিয়ে আসে:
- লেআউট প্রভাব নেই: সজ্জা সম্পূর্ণরূপে চাক্ষুষ হয়. তারা লেআউট বা ব্যবধানকে প্রভাবিত করে না, তাই আপনি বিদ্যমান ডিজাইনগুলি ভাঙ্গার ভয় ছাড়াই তাদের গ্রহণ করতে পারেন।
- পুনরাবৃত্তি সিনট্যাক্স: সিএসএস গ্রিডের মতো, আপনি একটি পাত্রের বিভিন্ন অংশে সজ্জার প্যাটার্ন তৈরি করতে
repeat()সিনট্যাক্স ব্যবহার করতে পারেন, যাতে ন্যূনতম CSS সহ সমৃদ্ধ সামঞ্জস্যপূর্ণ ডিজাইনের অনুমতি দেওয়া হয়। - ক্লিনার মার্কআপ: অতিরিক্ত উপাদান বা ছদ্ম-উপাদানের কোন প্রয়োজন নেই—শুধু স্টাইল ফাঁক সরাসরি।
- কাস্টমাইজযোগ্যতা: নতুন CSS বৈশিষ্ট্য যেমন
*rule-break,*rule-outset, এবংgap-rule-paint-orderপ্রস্থ, শৈলী এবং রঙের প্রথাগত নিয়ম স্টাইলিংয়ের বাইরে আরও কাস্টমাইজেশন বিকল্পের জন্য অনুমতি দেয়।
CSS গ্যাপ সজ্জার সাহায্যে, দৃশ্যত স্বতন্ত্র, এবং রক্ষণাবেক্ষণযোগ্য পৃষ্ঠা লেআউট তৈরি করা আগের চেয়ে সহজ।
কর্মে ফাঁক সজ্জা
আজই CSS গ্যাপ ডেকোরেশনের সাথে খেলতে, সেগুলিকে সমর্থন করে এমন একটি ব্রাউজার ব্যবহার করুন: এজ বা ক্রোম, সংস্করণ 139 থেকে শুরু করে, এবং edge://flags বা chrome://flags এ গিয়ে পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করুন।
ইন্টারেক্টিভ ডেভেলপার খেলার মাঠ
বিভিন্ন ধরনের লেআউট চেষ্টা করার জন্য যেখানে CSS গ্যাপ ডেকোরেশন সমর্থিত, এবং সমস্ত নতুন বৈশিষ্ট্য সহ, আমাদের ইন্টারেক্টিভ ডেভেলপার খেলার মাঠ ব্যবহার করে দেখুন।
বার্গার মেনু
বার্গার মেনু ডেমো দেখায় কিভাবে column-rule-break: intersection সম্পত্তি।
ডেমো column-rule-offset: -15px সাজসজ্জার দৈর্ঘ্য সামঞ্জস্য করতে, প্রতিটি ছেদ-এর প্রান্ত থেকে দূরে টেনে আনতে।
নোটবুক
নোটবুকের ডেমোতে , row-rule-break: none নিশ্চিত করে না যে সারি অলঙ্করণগুলি ছেদগুলিতে বাধাগ্রস্ত হয় না—এগুলি কন্টেইনারের বাম থেকে ডানে ক্রমাগত চলে৷ অন্যদিকে, column-rule-break: spanning-item নিশ্চিত করে যে কলামের অলঙ্করণগুলি স্প্যানিং আইটেমগুলির পিছনে আঁকা হয় না—এগুলি একটি দৃশ্যমান টি ছেদ তৈরি করে বিস্তৃত আইটেমগুলিতে শুরু হয় এবং থামে।
row-rule বৈশিষ্ট্য বিন্যাসের বিভিন্ন বিভাগে ফাঁক সজ্জা কিভাবে প্রয়োগ করা হয় তার উপর সুনির্দিষ্ট নিয়ন্ত্রণ করতে repeat() ফাংশন ব্যবহার করে। এটি একটি স্টাইলিং প্যাটার্ন সক্ষম করে যেখানে সারি নিয়মগুলি হেডার এবং ফুটারে লুকানো থাকে, মূল বিষয়বস্তুর চারপাশে মোটা এবং অন্য কোথাও আরও সূক্ষ্ম।
দৈনিক সিএসএস খবর
দৈনিক CSS নিউজ ডেমো একটি ম্যাগাজিন-স্টাইল লেআউট ব্যবহার করে এবং একাধিক গ্রিড এবং ফ্লেক্সবক্স কন্টেইনার জুড়ে CSS গ্যাপ সজ্জাকে সংজ্ঞায়িত করে।
ডানদিকে সুডোকু গেমটি লক্ষ্য করুন, যা একটি 9x9 গ্রিড এবং পুনরাবৃত্তি প্যাটার্ন ব্যবহার করে সারি এবং কলামের মধ্যে পাতলা এবং পুরু লাইন আঁকতে:
.sudoku {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 6px;
column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
column-rule-style: solid;
column-rule-color: var(--secondary);
row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
row-rule-style: solid;
row-rule-color: var(--secondary);
}
মতামতের জন্য কল করুন
CSS ফাঁক অলঙ্করণ চেষ্টা করার জন্য আমরা উত্তেজিত। আমরা মনে করি এটি একটি সাধারণ সমস্যার সমাধান করে এবং আমরা এটি সম্পর্কে আপনার প্রতিক্রিয়া শুনতে পছন্দ করব যাতে আমরা আপনার প্রয়োজনের সাথে মেলে বৈশিষ্ট্যটিকে পরিমার্জন করতে পারি৷
CSS ফাঁক সজ্জা বৈশিষ্ট্য এখনও Chromium এ প্রয়োগ করা হচ্ছে। আপনি যদি এটি পরীক্ষা করেন তবে সচেতন থাকুন যে আমরা এখনও এটিতে সক্রিয়ভাবে কাজ করছি এবং আপনি এমন ক্ষেত্রে সম্মুখীন হতে পারেন যেখানে এটি প্রত্যাশা অনুযায়ী আচরণ করে না। বর্তমান কিছু সীমাবদ্ধতার মধ্যে রয়েছে অ্যানিমেটিং গ্যাপ ডেকোরেশন এবং অনেক বড় সংখ্যক গ্রিড ট্র্যাক ব্যবহার করা।
যদি আপনি একটি বাগ খুঁজে পান, বা বৈশিষ্ট্য সম্পর্কে কোন চিন্তা থাকে, একটি নতুন Chromium বাগ খোলার মাধ্যমে আপনার প্রতিক্রিয়া শেয়ার করুন৷