প্রকাশিত: ১ মে, ২০২৫
CSS reading-flow এবং reading-order প্রোপার্টিগুলি Chrome 137 থেকে পাওয়া যায়। এই পোস্টে এই প্রোপার্টিগুলির ডিজাইনের কারণ এবং এগুলি দিয়ে শুরু করার জন্য কিছু সংক্ষিপ্ত বিবরণ ব্যাখ্যা করা হয়েছে।
গ্রিড এবং ফ্লেক্সের মতো লেআউট পদ্ধতিগুলি ফ্রন্টএন্ড ডেভেলপমেন্টকে রূপান্তরিত করেছে, তবে তাদের নমনীয়তা কিছু ব্যবহারকারীর জন্য সমস্যা তৈরি করতে পারে। এমন পরিস্থিতি তৈরি করা খুব সহজ যেখানে ভিজ্যুয়াল অর্ডার DOM ট্রিতে সোর্স ক্রমের সাথে মেলে না। যেহেতু আপনি যদি কীবোর্ড ব্যবহার করে সাইটটি নেভিগেট করেন তবে এই সোর্স ক্রমের অনুসরণ করে ব্রাউজার, তাই কিছু ব্যবহারকারী একটি পৃষ্ঠার চারপাশে নেভিগেট করার সময় অপ্রত্যাশিতভাবে এদিক-ওদিক লাফিয়ে পড়তে পারেন।
এই দীর্ঘস্থায়ী সমস্যাটি সমাধানের জন্য, reading-flow এবং reading-order বৈশিষ্ট্যগুলি CSS ডিসপ্লে স্পেসিফিকেশনে ডিজাইন এবং যুক্ত করা হয়েছে।
reading-flow
reading-flow সিএসএস প্রোপার্টি একটি ফ্লেক্স, গ্রিড বা ব্লক লেআউটের উপাদানগুলিকে অ্যাক্সেসিবিলিটি টুলের সংস্পর্শে আনার ক্রম এবং লিনিয়ার সিকোয়েন্সিয়াল নেভিগেশন পদ্ধতি ব্যবহার করে কীভাবে ফোকাস করা হয় তা নিয়ন্ত্রণ করে।
এটি একটি কীওয়ার্ড মান নেয়, যার ডিফল্ট normal থাকে, যা DOM ক্রমে ক্রমানুসারে উপাদানগুলির আচরণ বজায় রাখে। একটি flex কন্টেইনারের ভিতরে এটি ব্যবহার করতে, এর মান flex-visual অথবা flex-flow এ সেট করুন। একটি grid কন্টেইনারের ভিতরে এটি ব্যবহার করতে, এর মান grid-rows , grid-columns , অথবা grid-order এ সেট করুন।
reading-order
reading-order সিএসএস প্রপার্টি আপনাকে রিডিং ফ্লো কন্টেইনারের মধ্যে আইটেমের ক্রম ম্যানুয়ালি ওভাররাইড করতে দেয়। গ্রিড, ফ্লেক্স বা ব্লক কন্টেইনারের মধ্যে এই প্রপার্টিটি ব্যবহার করতে, কন্টেইনারের reading-flow মানকে source-order সেট করুন এবং প্রতিটি আইটেমের reading-order একটি পূর্ণসংখ্যার মান সেট করুন।
ফ্লেক্সবক্সে উদাহরণ
উদাহরণস্বরূপ, আপনার কাছে বিপরীত সারির ক্রমে তিনটি উপাদান সহ একটি ফ্লেক্স লেআউট কন্টেইনার থাকতে পারে, এবং আপনি সেই ক্রমটি পুনরায় সাজানোর জন্য order বৈশিষ্ট্যটি ব্যবহার করতেও চাইবেন।
<div class="box">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
.box {
display: flex;
flex-direction: row-reverse;
}
.box :nth-child(1) {
order: 2;
}
আপনি পরবর্তী ফোকাসযোগ্য উপাদানটি খুঁজে পেতে TAB কী এবং পূর্ববর্তী ফোকাসযোগ্য উপাদানটি খুঁজে পেতে TAB+SHIFT কী ব্যবহার করে এই উপাদানগুলিতে নেভিগেট করার চেষ্টা করতে পারেন। এটি উৎস ক্রম অনুসারে আইটেমগুলি অনুসরণ করে: এক, দুই, তিন।
ব্যবহারকারীর দৃষ্টিকোণ থেকে, এটি অর্থহীন এবং খুব বিভ্রান্তিকর হতে পারে। একই জিনিস ঘটে যদি আমরা পৃষ্ঠা জুড়ে নেভিগেট করার জন্য একটি অ্যাক্সেসিবিলিটি স্পেশিয়াল নেভিগেশন টুল ব্যবহার করি।
এটি ঠিক করতে, reading-flow বৈশিষ্ট্যটি সেট করুন:
.box {
reading-flow: flex-visual;
}
ফোকাস অর্ডার এখন হল: এক, তিন, দুই। বাম থেকে ডানে ইংরেজিতে পড়ার সময় আপনি যে ভিজ্যুয়াল অর্ডার পাবেন এটি তারই মতো।
পরিবর্তে, যদি আপনি ফোকাস ক্রমটি মূলত যেমনটি ছিল তেমনই রাখতে চান, তাহলে বিপরীত ক্রমে, আপনি সেট করতে পারেন:
.box {
reading-flow: flex-flow;
}
ফোকাস অর্ডারটি এখন বিপরীত ফ্লেক্স অর্ডার: দুই, তিন, এক। উভয় ক্ষেত্রেই, CSS order প্রোপার্টি হিসাব করা হয়।
গ্রিড লেআউট সহ উদাহরণ
একটি গ্রিডে এটি কীভাবে কাজ করে তা দেখতে, কল্পনা করুন যে আপনি বারোটি ফোকাসযোগ্য এলাকা সহ CSS গ্রিড স্বয়ংক্রিয়ভাবে স্থাপন করা আইটেমগুলির সাথে একটি লেআউট তৈরি করছেন।
<div class="wrapper">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
<a href="#">Five</a>
<a href="#">Six</a>
<a href="#">Seven</a>
<a href="#">Eight</a>
<a href="#">Nine</a>
<a href="#">Ten</a>
<a href="#">Eleven</a>
<a href="#">Twelve</a>
</div>
তুমি চাও পঞ্চম সন্তানটি একেবারে উপরে সবচেয়ে বড় জায়গা দখল করুক, তার পরে দ্বিতীয় সন্তানটি গ্রিডের মাঝখানে থাকুক। একটি কলাম টেমপ্লেট অনুসরণ করে অন্যান্য সকল সন্তান স্বয়ংক্রিয়ভাবে গ্রিডের মধ্যে স্থাপন করা যেতে পারে।
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
}
.wrapper a:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper a:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
পরবর্তী ফোকাসযোগ্য উপাদানটি খুঁজে পেতে TAB কী এবং পূর্ববর্তী ফোকাসযোগ্য উপাদানটি খুঁজে পেতে TAB+SHIFT কী ব্যবহার করে এই উপাদানগুলিতে নেভিগেট করার চেষ্টা করুন। এটি উৎস ক্রম অনুসারে আইটেমগুলি অনুসরণ করে: এক থেকে বারো।
এটি ঠিক করতে, reading-flow বৈশিষ্ট্যটি সেট করুন:
.wrapper {
reading-flow: grid-rows;
}
ফোকাস ক্রম এখন হল: পাঁচ, এক, তিন, দুই, চার, ছয়, সাত, আট, নয়, দশ, এগারো, বারো। এটি সারি সারি দৃশ্য ক্রম অনুসরণ করে।
যদি আপনি চান যে পঠন প্রবাহ কলামের ক্রম অনুসরণ করে, তাহলে আপনি grid-columns কীওয়ার্ড মান ব্যবহার করতে পারেন। এরপর ফোকাস ক্রমটি হয়ে যায় পাঁচ, ছয়, নয়, সাত, দশ, এক, দুই, এগারো, তিন, চার, আট, বারো।
.wrapper {
reading-flow: grid-columns;
}
আপনি grid-order ব্যবহার করার চেষ্টা করতে পারেন। ফোকাস অর্ডার এক থেকে বারো পর্যন্ত থাকে। এর কারণ হল কোনও আইটেমের উপর কোনও CSS অর্ডার সেট করা ছিল না।
reading-order ব্যবহার করে একটি ব্লক কন্টেইনার
reading-order প্রপার্টি আপনাকে reading-flow প্রোপার্টি দ্বারা সেট করা ক্রমকে ওভাররাইড করে রিডিং ফ্লোতে কখন কোন আইটেম পরিদর্শন করা উচিত তা নির্দিষ্ট করতে দেয়। এটি শুধুমাত্র একটি বৈধ রিডিং ফ্লো কন্টেইনারের উপর কার্যকর হয়, যখন reading-flow প্রোপার্টি normal না থাকে।
.wrapper {
display: block;
reading-flow: source-order;
}
.top {
reading-order: -1;
inset-inline-start: 50px;
inset-block-start: 50px;
}
নিচের ব্লক কন্টেইনারটিতে পাঁচটি আইটেম রয়েছে। উৎস ক্রম অনুসারে উপাদানগুলিকে পুনর্বিন্যাস করার জন্য কোনও লেআউট নিয়ম নেই, তবে একটি বহির্মুখী আইটেম আছে যা প্রথমে পরিদর্শন করা উচিত।
<div class="wrapper">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a class="top" href="#">Item 5</a>
</div>
এই আইটেমের reading-order -1 তে সেট করার মাধ্যমে, ফোকাস ক্রমটি প্রথমে এটি পরিদর্শন করে এবং বাকি পঠন প্রবাহ আইটেমগুলির জন্য উৎস ক্রমটিতে ফিরে আসে।
আপনি chrome.dev সাইটে আরও উদাহরণ পেতে পারেন।
ট্যাবিইনডেক্সের সাথে মিথস্ক্রিয়া
ঐতিহাসিকভাবে, ডেভেলপাররা HTML উপাদানগুলিকে ফোকাসযোগ্য করে তুলতে এবং ক্রমিক ফোকাস নেভিগেশনের জন্য আপেক্ষিক ক্রম নির্ধারণ করতে HTML tabindex গ্লোবাল অ্যাট্রিবিউট ব্যবহার করেছেন। তবে, এই অ্যাট্রিবিউটের অনেক অসুবিধা এবং অ্যাক্সেসিবিলিটি সংক্রান্ত উদ্বেগ রয়েছে। প্রধান উদ্বেগ হল যে ইতিবাচক tabindex ব্যবহার করে তৈরি করা tabindex-অর্ডার করা ফোকাস নেভিগেশন অ্যাক্সেসিবিলিটি ট্রি দ্বারা স্বীকৃত হয় না। ভুলভাবে ব্যবহার করা হলে, আপনার ফোকাস অর্ডারের অস্থিরতা দেখা দিতে পারে যা স্ক্রিন রিডারের অভিজ্ঞতার সাথে মেলে না। এটি ঠিক করতে, aria-owns HTML অ্যাট্রিবিউট ব্যবহার করে অর্ডার ট্র্যাক করুন।
পূর্ববর্তী flex উদাহরণে, reading-flow: flex-visual ব্যবহারের মতো একই ফলাফল পেতে, আপনি নিম্নলিখিতগুলি করতে পারেন।
<div class="box" aria-owns="one three two">
<a href="#" tabindex="1" id="one">One</a>
<a href="#" tabindex="3" id="two">Two</a>
<a href="#" tabindex="2" id="three">Three</a>
</div>
কিন্তু, যদি কন্টেইনারের বাইরে অন্য কোনও উপাদানে tabindex=1 থাকে তাহলে কী হবে? তারপর, পরবর্তী ক্রমবর্ধমান tabindex মানটিতে যাওয়ার আগে, tabindex=1 সহ সমস্ত উপাদান একসাথে পরিদর্শন করা হবে। এই অস্থির ক্রমিক নেভিগেশনের ফলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হবে। তাই, অ্যাক্সেসিবিলিটি বিশেষজ্ঞরা ইতিবাচক tabindex এড়িয়ে চলার পরামর্শ দেন । reading-flow ডিজাইন করার সময় আমরা এটি ঠিক করার চেষ্টা করেছি।
যে কন্টেইনারে reading-flow প্রোপার্টি সেট থাকে, সেটি ফোকাস স্কোপের মালিক হয়ে যায়। এর অর্থ হল এটি ওয়েব ডকুমেন্টের পরবর্তী ফোকাসযোগ্য এলিমেন্টে যাওয়ার আগে কন্টেইনারের ভিতরের প্রতিটি এলিমেন্ট পরিদর্শন করার জন্য ক্রমিক ফোকাস নেভিগেশনকে স্কোপ করে। তদুপরি, এর ডাইরেক্ট চাইল্ড্রেনগুলিকে রিডিং-ফ্লো প্রোপার্টি ব্যবহার করে অর্ডার করা হয় এবং অর্ডারের উদ্দেশ্যে পজিটিভ ট্যাবইনডেক্স উপেক্ষা করা হয়। একটি রিডিং-ফ্লো আইটেমের ডিসেন্ডেন্টের উপর পজিটিভ ট্যাবইনডেক্স সেট করা এখনও সম্ভব।
মনে রাখবেন যে, display: contents সহ একটি উপাদান যা তার লেআউট প্যারেন্ট থেকে reading-flow বৈশিষ্ট্যটি উত্তরাধিকার সূত্রে পায়, সেটিও একটি বৈধ reading flow ধারক হবে। আপনার সাইট ডিজাইন করার সময় এটি মনে রাখবেন। reading-flow এবং display: contents সম্পর্কে প্রতিক্রিয়ার জন্য আমাদের অনুরোধে এই সম্পর্কে আরও পড়ুন।
আমাদের জানান
এই পোস্টে এবং chrome.dev-এ reading-flow উদাহরণগুলিতে দেওয়া উদাহরণগুলি ব্যবহার করে দেখুন এবং আপনার সাইটগুলিতে এই CSS বৈশিষ্ট্যগুলি ব্যবহার করুন। যদি আপনার কোনও প্রতিক্রিয়া থাকে, তাহলে CSS Working Group GitHub repo- তে এটিকে একটি সমস্যা হিসেবে উত্থাপন করুন। যদি আপনার বিশেষভাবে tabindex এবং focus scoping আচরণ সম্পর্কে কোনও প্রতিক্রিয়া থাকে, তাহলে এটিকে HTML WHATNOT GitHub repo- তে একটি সমস্যা হিসেবে উত্থাপন করুন। এই বৈশিষ্ট্য সম্পর্কে আপনার প্রতিক্রিয়া আমরা উপভোগ করব।