রিডিং-ফ্লো এবং ডিসপ্লে সহ উপাদানগুলিতে বিকাশকারীর প্রতিক্রিয়ার জন্য অনুরোধ: বিষয়বস্তু

Rachel Andrew

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

প্রস্তাবের আপডেট

CSS Display Level 4 স্পেসিফিকেশনে এখন ড্রাফ্ট স্পেসিফিকেশন টেক্সট রয়েছে। এটি reading-flow নামে একটি নতুন প্রোপার্টি প্রবর্তন করে। এই প্রোপার্টিটি ফ্লেক্স বা গ্রিড লেআউটের জন্য ( display: grid বা display: flex সহ এলিমেন্ট) ধারণকারী এলিমেন্টে যোগ করা হয়।

সম্পত্তিটি নিম্নলিখিত মানগুলি গ্রহণ করে:

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

উদাহরণস্বরূপ, যদি আপনার একটি কন্টেইনারে তিনটি ফ্লেক্স আইটেম থাকে এবং তাদের flex-direction row-reverse তে সেট করা থাকে, তাহলে তারা flex কন্টেইনারের শেষ থেকে লাইন আপ করবে এবং ট্যাব অর্ডার ডান থেকে বামে যাবে।

.flex {
  display: flex;
  flex-direction: row-reverse;
}

flex-flow: visual তারপর রিডিং ফ্লো ইংরেজিতে ভিজ্যুয়াল ক্রম অনুসরণ করবে, তাই বাম থেকে ডানে।

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

গ্রিড লেআউটে উৎস ক্রম অনুসরণ না করে ভিজ্যুয়াল সারি বা কলাম অনুসরণ করার জন্য reading-flow ব্যবহার করা হয়। নিম্নলিখিত উদাহরণে রিডিং ফ্লো সারি অনুসরণ করে।

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
                       "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

চেষ্টা করে দেখো

এই CSS বৈশিষ্ট্যটি বর্তমানে পরীক্ষামূলক, তবে পরীক্ষার জন্য এটি সক্ষম করা সম্ভব। এটি চেষ্টা করার জন্য, Chrome Dev অথবা Canary সংস্করণ 128 বা উচ্চতর ইনস্টল করুন এবং রানটাইম ফ্ল্যাগ CSSReadingFlow সক্ষম করুন। শুরু করার জন্য কিছু উদাহরণ রয়েছে, যা সমস্ত ফ্ল্যাগ সক্ষম থাকা অবস্থায় ক্যানারিতে কাজ করে।

display: contents cases এর আচরণ এখনও কাজধীন এবং এই পোস্টের নিম্নলিখিত বিভাগটি পড়ার পরে আপনার দেওয়া প্রতিক্রিয়ার উপর ভিত্তি করে পরিবর্তিত হতে পারে।

display: contents এবং ওয়েব উপাদান

reading-flow সহ একটি উপাদানের সন্তানদের মধ্যে একটিতে display: contents থাকে, এবং একইভাবে যদি আইটেমটি <slot> হয়, তাহলে পরিস্থিতি কীভাবে মোকাবেলা করতে হবে তা নির্ধারণ করতে CSS ওয়ার্কিং গ্রুপের জন্য একটি অমীমাংসিত সমস্যা রয়েছে।

নিম্নলিখিত উদাহরণে, <div> উপাদানগুলিতে display: contents আছে। এর ফলে, সমস্ত <button> উপাদানগুলিকে ফ্লেক্স লেআউটে অংশগ্রহণের জন্য উন্নীত করা হয়, এবং তাই reading-flow তাদের ক্রম বিবেচনা করে।

 .wrapper {
   display: flex;
   reading-flow: flex-visual;
 }

<div class="wrapper">
   <div style="display: contents" id="contents1">
     <button style="order: 3" id="o3">3</button>
     <button style="order: 1" id="o1">1</button>
     <div style="display: contents" id=contents2>
       <button style="order: 4" id="o4">4</button>
       <button style="order: 2" id=o2>2</button>
     </div>
   </div>
 </div>

আমরা জানতে চাই যে আপনার কাছে এমন কোন বাস্তব উদাহরণ আছে কি যা এই উদাহরণে দেখা পরিস্থিতির কারণ। display:contents আছে এমন কোনও উপাদানের ভিতরে থাকা আইটেমগুলিকে display: contents আছে এমন আইটেমের সাথে পুনরায় সাজানোর প্রয়োজন কি, কারণ এটি display: contents আছে এমন আইটেমের সহোদর।

এছাড়াও, display: contents সম্পর্কিত সমস্যাগুলি সমাধান করার জন্য আমরা যখন কাজ করছি, তখন display: contents সহ reading-flow বৈশিষ্ট্যটি ব্যবহার করার জন্য আপনি যে কোনও উদাহরণ দেখতে সহায়ক হবে। আপনার কাছে থাকা বাস্তব-বিশ্বের ব্যবহারের কেসগুলি বোঝা আমাদের আপনার চাহিদা পূরণ করে এমন একটি সমাধান ডিজাইন করতে সহায়তা করবে।

CSS ওয়ার্কিং গ্রুপ ইস্যুতে ব্যবহারের কেস যোগ করুন। যদি আপনার লাইভ সাইটগুলিতে উদাহরণ থাকে অথবা CodePen বা JSFiddle-এ একটি ডেমো তৈরি করতে পারেন যা আমরা যখন এই সমস্যাটি নিয়ে একটি গ্রুপ হিসাবে আলোচনা করব তখন অবিশ্বাস্যভাবে কার্যকর হবে। আপনি কী ঘটবে বলে আশা করেন সে সম্পর্কে যদি আপনার কোন চিন্তাভাবনা থাকে, তবে তাও কার্যকর। তবে, সবচেয়ে গুরুত্বপূর্ণ বিষয় হল আসল ব্যবহারের কেসগুলি দেখা।