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

রাচেল অ্যান্ড্রু

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

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

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

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

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

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

.flex {
  display: flex;
  flex-direction: row-reverse;
}
row-reverse সহ ফ্লেক্স আইটেমগুলির ডিফল্ট প্রবাহ।

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

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}
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; }
reading-flow: grid-rows ।

চেষ্টা করে দেখুন

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

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

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

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

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

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