এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

লজিক্যাল ক্রমিক ফোকাস নেভিগেশনের জন্য CSS রিডিং-ফ্লো ব্যবহার করুন, লজিক্যাল ক্রমিক ফোকাস নেভিগেশনের জন্য CSS রিডিং-ফ্লো ব্যবহার করুন, লজিক্যাল ক্রমিক ফোকাস নেভিগেশনের জন্য CSS রিডিং-ফ্লো ব্যবহার করুন, লজিক্যাল ক্রমিক ফোকাস নেভিগেশনের জন্য CSS রিডিং-ফ্লো ব্যবহার করুন

Di Zhang

Rachel Andrew

প্রকাশিত: মে 1, 2025

CSS reading-flow এবং reading-order বৈশিষ্ট্যগুলি Chrome 137 থেকে পাওয়া যায়৷ এই পোস্টটি এই বৈশিষ্ট্যগুলির ডিজাইনের পিছনে কারণগুলি এবং আপনাকে সেগুলির সাথে শুরু করার জন্য কিছু সংক্ষিপ্ত বিবরণ ব্যাখ্যা করে৷

গ্রিড এবং ফ্লেক্সের মতো বিন্যাস পদ্ধতিগুলি ফ্রন্টএন্ড বিকাশকে রূপান্তরিত করেছে, তবে তাদের নমনীয়তা কিছু ব্যবহারকারীদের জন্য সমস্যা সৃষ্টি করতে পারে। এমন পরিস্থিতি তৈরি করা খুবই সহজ যেখানে ভিজ্যুয়াল অর্ডারটি DOM ট্রিতে সোর্স অর্ডারের সাথে মেলে না। যেহেতু আপনি একটি কীবোর্ড ব্যবহার করে সাইটটি নেভিগেট করলে ব্রাউজারটি এই উৎসের ক্রমটি অনুসরণ করে, তাই কিছু ব্যবহারকারী একটি পৃষ্ঠার চারপাশে নেভিগেট করার সময় অপ্রত্যাশিতভাবে লাফিয়ে পড়ার সম্মুখীন হতে পারেন।

reading-flow এবং reading-order বৈশিষ্ট্যগুলি ডিজাইন করা হয়েছে এবং CSS ডিসপ্লে স্পেসিফিকেশনে যোগ করা হয়েছে, এই দীর্ঘস্থায়ী সমস্যাটি সমাধান করার জন্য।

`reading-flow`

reading-flow সিএসএস প্রপার্টি নিয়ন্ত্রণ করে যে ফ্লেক্স, গ্রিড বা ব্লক লেআউটের উপাদানগুলি অ্যাক্সেসিবিলিটি টুলের সংস্পর্শে আসে এবং কীভাবে তারা রৈখিক অনুক্রমিক নেভিগেশন পদ্ধতি ব্যবহার করে ফোকাস করে।

এটি normal একটি ডিফল্ট সহ একটি কীওয়ার্ড মান নেয়, যা DOM ক্রমানুসারে উপাদানগুলিকে অর্ডার করার আচরণ রাখে। এটি একটি ফ্লেক্স কন্টেইনারের ভিতরে ব্যবহার করতে, এর মানটি হয় flex-visual বা flex-flow এ সেট করুন। এটি একটি গ্রিড কন্টেইনারের ভিতরে ব্যবহার করতে, এর মান হয় grid-rows , grid-columns বা grid-order সেট করুন।

`reading-order`

reading-order CSS প্রপার্টি আপনাকে রিডিং ফ্লো কন্টেইনারের মধ্যে আইটেমগুলির ক্রম ম্যানুয়ালি ওভাররাইড করতে দেয়। একটি গ্রিড, ফ্লেক্স, বা ব্লক কন্টেইনারের ভিতরে এই বৈশিষ্ট্যটি ব্যবহার করতে, কন্টেইনারে reading-flow মানকে source-order সেট করুন এবং পৃথক আইটেমের reading-order একটি পূর্ণসংখ্যা মান সেট করুন।

flexbox মধ্যে উদাহরণ

উদাহরণস্বরূপ, আপনার বিপরীত সারি ক্রমে তিনটি উপাদান সহ একটি ফ্লেক্স লেআউট কন্টেইনার থাকতে পারে এবং সেই ক্রমটি পুনরায় এলোমেলো করতে অর্ডার সম্পত্তি ব্যবহার করতে চান।

<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 সম্পত্তির জন্য হিসাব করা হয়।

গ্রিড লেআউট সহ উদাহরণ

এটি একটি গ্রিডে কীভাবে কাজ করে তা দেখতে, কল্পনা করুন যে আপনি বারোটি ফোকাসযোগ্য এলাকা সহ সিএসএস গ্রিড স্বয়ংক্রিয়ভাবে স্থাপন করা আইটেমগুলির সাথে একটি লেআউট তৈরি করছেন৷

<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 গ্লোবাল অ্যাট্রিবিউট ব্যবহার করেছেন। যাইহোক, এই বৈশিষ্ট্যটির অনেক ত্রুটি এবং অ্যাক্সেসযোগ্যতার উদ্বেগ রয়েছে। প্রধান উদ্বেগের বিষয় হল যে ট্যাবিনডেক্স-অর্ডারযুক্ত ফোকাস নেভিগেশন ইতিবাচক ট্যাবিনডেক্স ব্যবহার করে তৈরি করা অ্যাক্সেসিবিলিটি ট্রি দ্বারা স্বীকৃত নয়। ভুলভাবে ব্যবহার করা হলে, আপনি জম্পি ফোকাস অর্ডার দিয়ে শেষ করতে পারেন যা স্ক্রিন রিডারের অভিজ্ঞতার সাথে মেলে না। এটি ঠিক করতে, aria-owns HTML অ্যাট্রিবিউট ব্যবহার করে অর্ডার ট্র্যাক করুন।

পূর্ববর্তী ফ্লেক্স উদাহরণে, 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=1 সহ সমস্ত উপাদান একসাথে পরিদর্শন করা হবে, আমরা পরবর্তী বর্ধিত ট্যাবিনডেক্স মানের দিকে যাওয়ার আগে। এই ঝাঁঝালো ক্রমিক নেভিগেশনের ফলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হবে। তাই, অ্যাক্সেসিবিলিটি বিশেষজ্ঞরা ইতিবাচক ট্যাবিনডেক্স এড়ানোর পরামর্শ দেন । reading-flow ডিজাইন করার সময় আমরা এটি ঠিক করার চেষ্টা করেছি।

reading-flow প্রোপার্টি সেট আছে এমন একটি কন্টেইনার ফোকাস স্কোপের মালিক হয়ে যায়। এর মানে এটি একটি ওয়েব নথিতে পরবর্তী ফোকাসযোগ্য উপাদানে যাওয়ার আগে কন্টেইনারের ভিতরে প্রতিটি উপাদান দেখার জন্য অনুক্রমিক ফোকাস নেভিগেশনকে স্কোপ করে। আরও, এর প্রত্যক্ষ শিশুদের রিডিং-ফ্লো সম্পত্তি ব্যবহার করে অর্ডার করা হয় এবং অর্ডারের উদ্দেশ্যে পজিটিভ ট্যাবিন্ডেক্স উপেক্ষা করা হয়। একটি পঠন-প্রবাহ আইটেমের বংশধরদের উপর একটি ইতিবাচক ট্যাবিন্ডেক্স সেট করা এখনও সম্ভব।

মনে রাখবেন যে display: contents যা এর লেআউট প্যারেন্ট থেকে reading-flow বৈশিষ্ট্য উত্তরাধিকারসূত্রে পাওয়া যায় সেটিও একটি বৈধ পঠন প্রবাহ ধারক হবে। আপনার সাইট ডিজাইন করার সময় এটি মনে রাখবেন। reading-flow এবং display: contents ।

আমাদের জানান

এই পোস্টে এবং chrome.dev-এ reading-flow উদাহরণগুলিতে উদাহরণগুলি চেষ্টা করুন এবং আপনার সাইটে এই CSS বৈশিষ্ট্যগুলি ব্যবহার করুন৷ আপনার যদি কোনো প্রতিক্রিয়া থাকে, CSS ওয়ার্কিং গ্রুপ GitHub রেপোতে একটি সমস্যা হিসাবে এটি উত্থাপন করুন। আপনার যদি বিশেষভাবে ট্যাবিনডেক্স এবং ফোকাস স্কোপিং আচরণ সম্পর্কে প্রতিক্রিয়া থাকে তবে এটিকে HTML WHATNOT GitHub রেপোর সাথে একটি সমস্যা হিসাবে উত্থাপন করুন। আমরা এই বৈশিষ্ট্য আপনার প্রতিক্রিয়া পছন্দ হবে.

Di Zhang

Rachel Andrew

প্রকাশিত: মে 1, 2025

`reading-flow`

`reading-order`

flexbox মধ্যে উদাহরণ

<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;
}

এটি ঠিক করতে, reading-flow বৈশিষ্ট্য সেট করুন:

.box {
  reading-flow: flex-visual;
}

.box {
  reading-flow: flex-flow;
}

গ্রিড লেআউট সহ উদাহরণ

<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;
}

এটি ঠিক করতে, reading-flow বৈশিষ্ট্য সেট করুন:

.wrapper {
  reading-flow: grid-rows;
}

.wrapper {
  reading-flow: grid-columns;
}

`reading-order` ব্যবহার করে একটি ব্লক কন্টেইনার

.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>

আপনি chrome.dev সাইটে আরও উদাহরণ পেতে পারেন।

ট্যাবিনডেক্সের সাথে মিথস্ক্রিয়া

পূর্ববর্তী ফ্লেক্স উদাহরণে, 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>

আমাদের জানান

Di Zhang

Rachel Andrew

প্রকাশিত: মে 1, 2025

`reading-flow`

`reading-order`

flexbox মধ্যে উদাহরণ

<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;
}

এটি ঠিক করতে, reading-flow বৈশিষ্ট্য সেট করুন:

.box {
  reading-flow: flex-visual;
}

.box {
  reading-flow: flex-flow;
}

গ্রিড লেআউট সহ উদাহরণ

<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;
}

এটি ঠিক করতে, reading-flow বৈশিষ্ট্য সেট করুন:

.wrapper {
  reading-flow: grid-rows;
}

.wrapper {
  reading-flow: grid-columns;
}

`reading-order` ব্যবহার করে একটি ব্লক কন্টেইনার

.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>

আপনি chrome.dev সাইটে আরও উদাহরণ পেতে পারেন।

ট্যাবিনডেক্সের সাথে মিথস্ক্রিয়া

পূর্ববর্তী ফ্লেক্স উদাহরণে, 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>

আমাদের জানান

Di Zhang

Rachel Andrew

প্রকাশিত: মে 1, 2025

`reading-flow`

`reading-order`

flexbox মধ্যে উদাহরণ

<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;
}

এটি ঠিক করতে, reading-flow বৈশিষ্ট্য সেট করুন:

.box {
  reading-flow: flex-visual;
}

.box {
  reading-flow: flex-flow;
}

গ্রিড লেআউট সহ উদাহরণ

<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;
}

এটি ঠিক করতে, reading-flow বৈশিষ্ট্য সেট করুন:

.wrapper {
  reading-flow: grid-rows;
}

.wrapper {
  reading-flow: grid-columns;
}

`reading-order` ব্যবহার করে একটি ব্লক কন্টেইনার

.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>

আপনি chrome.dev সাইটে আরও উদাহরণ পেতে পারেন।

ট্যাবিনডেক্সের সাথে মিথস্ক্রিয়া

পূর্ববর্তী ফ্লেক্স উদাহরণে, 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>

আমাদের জানান

এই পোস্টে এবং chrome.dev-এ reading-flow উদাহরণগুলিতে উদাহরণগুলি চেষ্টা করুন এবং আপনার সাইটে এই CSS বৈশিষ্ট্যগুলি ব্যবহার করুন৷ আপনার যদি কোনো প্রতিক্রিয়া থাকে, CSS ওয়ার্কিং গ্রুপ GitHub রেপোতে একটি সমস্যা হিসাবে এটি উত্থাপন করুন। আপনার যদি বিশেষত ট্যাবিনডেক্স এবং ফোকাস স্কোপিং আচরণে প্রতিক্রিয়া থাকে তবে এটি এইচটিএমএল হোয়াট নট গিটহাব রেপোর সাথে একটি সমস্যা হিসাবে উত্থাপন করুন। আমরা এই বৈশিষ্ট্যটিতে আপনার প্রতিক্রিয়া পছন্দ করব।

reading-flow

reading-order

flexbox মধ্যে উদাহরণ

গ্রিড লেআউট সহ উদাহরণ

reading-order ব্যবহার করে একটি ব্লক কন্টেইনার

ট্যাবিনডেক্সের সাথে মিথস্ক্রিয়া

আমাদের জানান

reading-flow

reading-order

flexbox মধ্যে উদাহরণ

গ্রিড লেআউট সহ উদাহরণ

reading-order ব্যবহার করে একটি ব্লক কন্টেইনার

ট্যাবিনডেক্সের সাথে মিথস্ক্রিয়া

আমাদের জানান

reading-flow

reading-order

flexbox মধ্যে উদাহরণ

গ্রিড লেআউট সহ উদাহরণ

reading-order ব্যবহার করে একটি ব্লক কন্টেইনার

ট্যাবিনডেক্সের সাথে মিথস্ক্রিয়া

আমাদের জানান

reading-flow

reading-order

flexbox মধ্যে উদাহরণ

গ্রিড লেআউট সহ উদাহরণ

reading-order ব্যবহার করে একটি ব্লক কন্টেইনার

ট্যাবিনডেক্সের সাথে মিথস্ক্রিয়া

আমাদের জানান

`reading-flow`

`reading-order`

`reading-order` ব্যবহার করে একটি ব্লক কন্টেইনার

`reading-flow`

`reading-order`

`reading-order` ব্যবহার করে একটি ব্লক কন্টেইনার

`reading-flow`

`reading-order`

`reading-order` ব্যবহার করে একটি ব্লক কন্টেইনার

`reading-flow`

`reading-order`

`reading-order` ব্যবহার করে একটি ব্লক কন্টেইনার