প্রকাশিত: ১৫ মে, ২০২৬
ক্রোম এবং এজ-এর ১৪৯ সংস্করণ থেকে CSS গ্যাপ ডেকোরেশন পাওয়া যাচ্ছে। বর্ডার বা সিউডো-এলিমেন্ট ব্যবহার না করেই গ্রিড, ফ্লেক্সবক্স এবং মাল্টি-কলাম লেআউটের মাঝের ফাঁকা স্থান স্টাইল করুন। এই ফিচারটি মাইক্রোসফট এজ এবং গুগল ক্রোম টিমের যৌথ সহযোগিতায় তৈরি করা হয়েছে।
সমস্যাটি
লেআউটের আইটেমগুলোর মাঝের ফাঁকা স্থান স্টাইল করার জন্য সবসময়ই বিকল্প পদ্ধতির প্রয়োজন হয়েছে। যেমন—প্রতিটি আইটেমের চারপাশে বর্ডার, সিউডো-এলিমেন্ট, বা ব্যাকগ্রাউন্ডে বিভিন্ন কৌশল ব্যবহার করা। এই পদ্ধতিগুলোর কিছু অসুবিধাও আছে:
- এগুলো কাঠামোর উপর নির্ভর করে। একটি ভিজ্যুয়াল সেপারেটর যোগ করার অর্থ হলো আপনার মার্কআপ পরিবর্তন করা অথবা নির্দিষ্ট আইটেমগুলোর জন্য সিলেক্টর লেখা।
- এগুলো অ্যাক্সেসিবিলিটিতে বাধা সৃষ্টি করে। অপ্রয়োজনীয় অতিরিক্ত DOM এলিমেন্টগুলো অ্যাক্সেসিবিলিটি ট্রি-তে প্রদর্শিত হয়।
- এগুলো রক্ষণাবেক্ষণ করা কঠিন। রেসপন্সিভ লেআউটগুলো আপনার গ্যাপ স্টাইলিং যে ধারণাগুলোর ওপর ভিত্তি করে তৈরি হয়েছিল, সেগুলোকে ভেঙে দেয়।
- এগুলো পারফরম্যান্সের ক্ষতি করে। যত বেশি DOM নোড, তত বেশি লেআউটের কাজ।
- তাদের লেখার স্বাচ্ছন্দ্য ভালো ছিল না। সবকিছু সঠিকভাবে কাজ করানোর জন্য প্রায়শই জটিল জ্যামিতিক গণনার প্রয়োজন হতো।
column-rule প্রপার্টিটি একাধিক কলামের লেআউটের জন্য ফাঁকা স্থানের সজ্জা নিয়ন্ত্রণ করে, কিন্তু `grid` এবং `flexbox`-এ আগে এর সমতুল্য কার্যকারিতা ছিল না।
সমাধান
গ্রিড এবং ফ্লেক্সবক্স কন্টেইনার এখন column-rule গ্রহণ করে। একটি নতুন row-rule প্রপার্টি আনুভূমিক ফাঁকা স্থান পরিচালনা করে। এই সজ্জাগুলো সম্পূর্ণরূপে দৃশ্যগত এবং বিদ্যমান লেআউটকে প্রভাবিত করে না। আপনি যদি একাধিক কলামের লেআউটে column-rule প্রপার্টি ব্যবহার করেন, তবে বিদ্যমান আচরণ একই থাকবে।
উদাহরণস্বরূপ, এখানে তিনটি প্যানেল সহ একটি ফ্লেক্স কন্টেইনার রয়েছে যা তার কলাম এবং সারি নিয়মগুলির জন্য স্টাইলের একটি তালিকা ব্যবহার করে:
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
এই উদাহরণে যেমন দেখানো হয়েছে, row-rule এবং column-rule উভয়ই প্রস্থ, স্টাইল এবং রঙের জন্য একই শর্টহ্যান্ড গ্রহণ করে। উভয়টি একসাথে সেট করতে rule শর্টহ্যান্ড ব্যবহার করুন।
নতুন সম্পত্তি
তবে, আমরা শুধু অন্যান্য লেআউট মোডে column-rule এনে এর row সংস্করণটিই যোগ করিনি। আমরা আপনার ডেকোরেশনগুলোকে সূক্ষ্মভাবে সমন্বয় করার জন্য কন্ট্রোলও চালু করেছি: যেমন— ছেদবিন্দুতে সেগুলো কীভাবে ভাঙবে, গ্যাপের প্রান্ত থেকে কতটা ভেতরে ঢুকবে, আইটেমগুলোর সাপেক্ষে কখন সেগুলো প্রদর্শিত হবে, এবং গ্যাপ জুড়ে স্টাইল কীভাবে পরিবর্তন করা যাবে। রুলের প্রস্থ, রঙ এবং ইনসেট—এই সবকিছুই অ্যানিমেট করা যায়।
repeat() সিনট্যাক্স
গ্যাপ ডেকোরেশন তাদের width, style, এবং color ভ্যালুগুলোর জন্য repeat() সাপোর্ট করে। এটি আপনাকে গ্রিডে ট্র্যাক ডেফিনিশনের জন্য ব্যবহৃত repeat() সিনট্যাক্সের মতোই, সংক্ষিপ্ত আকারে গ্যাপ জুড়ে ডেকোরেশনে বৈচিত্র্য আনতে দেয়:
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
এটি প্রথম দুটি সারির ফাঁকে ১ পিক্সেলের এবং তৃতীয়টিতে ৪ পিক্সেলের একটি রুল দেয়, এবং মানের চেয়ে ফাঁক বেশি হলে এটি পর্যায়ক্রমে পরিবর্তিত হয়। আপনি repeat() ব্যবহার না করেও সরাসরি একাধিক মান দিতে পারেন। উদাহরণস্বরূপ, একটি ক্যালেন্ডারে ঘণ্টা এবং আধ-ঘণ্টার সীমানার জন্য পর্যায়ক্রমে সারির রুল স্টাইল ব্যবহার করা:
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
সাজসজ্জার বিরতি নিয়ন্ত্রণ করুন
column-rule-break এবং row-rule-break প্রপার্টিগুলো গ্যাপের ছেদবিন্দুতে ডেকোরেশন কীভাবে কাজ করবে তা নিয়ন্ত্রণ করে:
-
normal(ডিফল্ট): আচরণ কন্টেইনারের ধরনের উপর নির্ভর করে। আরও তথ্য স্পেসিফিকেশনে রয়েছে। -
none: সজ্জাগুলি ছেদবিন্দু বরাবর অবিচ্ছিন্নভাবে চলে। -
intersection: যেখানে সারি ও কলামের ফাঁকগুলো ছেদ করে, সেখানে অলঙ্করণ ভেঙে যায়।
উদাহরণস্বরূপ, যদি আপনি একটি গ্রিড কন্টেইনারে rule-break কে intersection এ সেট করেন, তাহলে নিয়মগুলি ফাঁকের ছেদবিন্দুতে ভেঙে যায়, এর মধ্য দিয়ে চলতে থাকে না:
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
যদি আপনি rule-break none এ সেট করেন, তাহলে নিয়মগুলো ছেদবিন্দুগুলোতে অবিচ্ছিন্নভাবে চলতে থাকে:
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
আপনি ইন্টারেক্টিভ প্লেগ্রাউন্ডে এই মানটি চেষ্টা করে দেখতে পারেন।
সাজসজ্জা প্রসারিত বা সংকুচিত করুন
column-rule-inset এবং row-rule-inset প্রোপার্টিগুলো একটি ফাঁকের মধ্যে ডেকোরেশন কতদূর পর্যন্ত বিস্তৃত হবে তা নিয়ন্ত্রণ করে। আপনি শর্টহ্যান্ড ব্যবহার করে একবারে সব দিকে ইনসেট সেট করতে পারেন, অথবা column-rule-inset-cap (যেসব প্রান্তবিন্দুর মধ্যে কোনো ছেদকারী ফাঁক নেই তাদের জন্য) এবং column-rule-inset-junction (যেসব প্রান্তবিন্দু অন্য ফাঁকের সাথে ছেদ করে তাদের জন্য) ব্যবহার করে অপ্রতিসমভাবে ইনসেট প্রয়োগ করতে পারেন।
মানগুলো হতে পারে দৈর্ঘ্য, শতাংশ, অথবা overlap-join কীওয়ার্ড, যা ফাঁকা অংশের ডেকোরেশনগুলোকে কোণায় যুক্ত করে। উদাহরণস্বরূপ, rule-inset-কে 5px সেট করলে সমস্ত ডেকোরেশন 5px ভেতরের দিকে সংকুচিত হয়:
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
rule-inset-cap কে 0px এবং rule-inset-junction কে 10px সেট করলে ডেকোরেশনগুলো কন্টেইনারের কিনারায় ফ্লাশ থাকে কিন্তু ছেদবিন্দুতে ভেতরের দিকে ঢোকানো থাকে। পূর্বে দেখানো ড্যাশবোর্ড ডেমোটি এই পদ্ধতি ব্যবহার করে, এবং হোভার করলে ভেতরের দিকে ঢোকানো অংশগুলো অ্যানিমেট হয়:
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
দৃশ্যমানতা
column-rule-visibility-items এবং row-rule-visibility-items প্রপার্টিগুলো আইটেমের সন্নিধির উপর ভিত্তি করে নিয়মগুলো কখন প্রদর্শিত হবে তা নিয়ন্ত্রণ করে:
-
normal(ডিফল্ট): কন্টেইনারের ধরনের উপর নির্ভরশীল। -
all: প্রতিটি ফাঁকে, এমনকি খালি জায়গাতেও নিয়ম দেখা যায়। -
around: যেখানেই এক বা একাধিক সংলগ্ন আইটেম থাকে, সেখানেই নিয়মগুলো প্রদর্শিত হয়। -
between: নিয়মগুলো শুধুমাত্র দুটি সংলগ্ন আইটেমের মধ্যে প্রদর্শিত হয়।
rule-visibility-items শর্টহ্যান্ডটি একবারে দুটিই সেট করে। rule-visibility-items ` between এ সেট করলে শুধুমাত্র পাশাপাশি থাকা আইটেমগুলোর মাঝের নিয়মগুলো দেখানো হবে:
section {
rule: 2px solid black;
rule-visibility-items: between;
}
অন্যদিকে, rule-visibility-items all এ সেট করলে প্রতিটি ফাঁকা জায়গায় নিয়মগুলো দেখানো হবে, এমনকি যেগুলোর পাশে কোনো আইটেম নেই সেগুলোও:
section {
rule: 2px solid black;
rule-visibility-items: all;
}
পার্থক্য দেখতে লাইভ ডেমোতে মানটি টগল করুন!
সাজসজ্জা সচল করুন
রুলের প্রস্থ, রঙ এবং ইনসেট অ্যানিমেট করা যায়। হোভার বা অন্য যেকোনো অবস্থার পরিবর্তনে আপনি এগুলোর ট্রানজিশন ঘটাতে পারেন। পূর্বে দেখানো ড্যাশবোর্ড ডেমোটি হোভারের সময় রুলের রঙ এবং ইনসেট পরিবর্তন করে:
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
ডেমো
এই পোস্টে দেখানো সমস্ত ডেমো এজ ডেমো সাইটে পাওয়া যাবে।
ডেভেলপার ট্রায়াল ব্লগ পোস্টে আরও বেশ কয়েকটি ডেমো অন্তর্ভুক্ত রয়েছে, যার মধ্যে আছে একটি ইন্টারেক্টিভ প্লেগ্রাউন্ড , একটি বার্গার মেনু , একটি নোটবুক লেআউট এবং সুডোকু গ্রিডসহ একটি ম্যাগাজিন-স্টাইলের লেআউট ।
ডেভেলপার ট্রায়ালের পর থেকে পরিবর্তনসমূহ
আপনি যদি ডেভেলপার ট্রায়ালের (ক্রোম ১৩৯) সময় গ্যাপ ডেকোরেশন ব্যবহার করে থাকেন, তাহলে নিম্নলিখিত পরিবর্তনগুলো লক্ষ্য করুন:
- ফিচারটি ডিফল্টরূপে উপলব্ধ; কোনো ফ্ল্যাগের প্রয়োজন নেই।
- সর্বশেষ স্পেসিফিকেশনের সাথে সামঞ্জস্য রাখতে কিছু প্রপার্টির নাম আপডেট করা হয়েছে (উদাহরণস্বরূপ,
column-rule-outsetএবংrow-rule-outsetপরিবর্তেcolumn-rule-insetএবংrow-rule-insetহয়েছে)। -
column-rule-visibility-itemsএবংrow-rule-visibility-itemsপ্রপার্টিগুলো যোগ করা হয়েছে। - অ্যানিমেশন সাপোর্ট যোগ করা হয়েছে।
আজ ফাঁকের সজ্জা ব্যবহার করুন
সংস্করণ ১৪৯ থেকে ক্রোম এবং এজ-এ গ্যাপ ডেকোরেশন কাজ করে। যদি আপনার গ্যাপ ডেকোরেশনগুলো শুধুমাত্র আলংকারিক হয়, তবে এই ফিচারটি একটি প্রগতিশীল উন্নয়ন; যেসব ব্রাউজারে এর সাপোর্ট নেই, সেখানে গ্যাপগুলো কোনো দৃশ্যমান ডেকোরেশন ছাড়াই স্বাভাবিকভাবে রেন্ডার হয়। যেসব ব্রাউজারে এখনও সাপোর্ট নেই, সেগুলোর জন্য একটি পলিফিল তৈরি করা হচ্ছে।
ক্রোমিয়াম ইস্যু ট্র্যাকারে বাগ রিপোর্ট করুন। আরও বিস্তারিত জানতে, CSS Gap Decorations স্পেসিফিকেশন দেখুন।