CSS লেআউট ও সোর্স অর্ডার ডিসকানেক্ট সংক্রান্ত সমস্যার সমাধান করা

লেআউট পদ্ধতি আইটেমগুলিকে এমন ক্রমে সাজানোর সমস্যা সমাধানের জন্য একটি প্রস্তাবিত সমাধান সম্পর্কে আপনার মতামত প্রয়োজন যা ডকুমেন্টের সোর্সের সাথে ডিসকানেক্ট করা হয়েছে।

Rachel Andrew Technical Writer

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

সমস্যাটি

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

যেমন, ফ্লেক্স আইটেমে order প্রপার্টি ব্যবহার করলে লেআউট অর্ডার পরিবর্তন হয়ে যায়, কিন্তু সোর্সে অর্ডার পরিবর্তন হয় না।

গ্রিড লেআউট ব্যবহার করে, বেছে নেওয়া লেআউট পদ্ধতির পক্ষে ট্যাব অর্ডার এলোমেলো করা সম্ভব, যেমন grid-auto-flow: dense ব্যবহার করার সময়, যা আইটেমগুলির একটি এলোমেলো লেআউট অর্ডার তৈরি করে।

এছাড়াও, সোর্সে যেভাবে বলা হয়েছে তার থেকে আলাদা ক্রমে গ্রিডে আইটেম প্লেস করার মাধ্যমে কোনও ডেভেলপার এই ডিসকানেক্টের কারণ হতে পারেন।

প্রস্তাবিত সমাধান

CSS ওয়ার্কিং গ্রুপ এই সমস্যার একটি সমাধান প্রস্তাব করছে এবং এই পদ্ধতির ব্যাপারে ডেভেলপার ও অ্যাক্সেসিবিলিটি কমিউনিটির মতামত পেলে তারা খুশি হবে।

reading-order: auto সহ র‌্যান্ডমাইজ করা লেআউট অনুসরণ করা

র‍্যান্ডমাইজড লেআউট অর্ডার তৈরি করে এমন পরিস্থিতিতে, যেমন গ্রিড লেআউটে ঘন প্যাকিং ব্যবহার করার সময়, আপনি সম্ভবত চান যে ব্রাউজারটি সোর্স অর্ডারের পরিবর্তে লেআউটটি অনুসরণ করুক। এটি ঘটাতে, ফ্লেক্স বা গ্রিড আইটেমে auto ভ্যালু সহ reading-order প্রপার্টি থাকতে হবে।

নিম্নলিখিত CSS-এর কারণে, grid-auto-flow: dense-এর জন্য ঘনভাবে প্যাক করা আইটেমের প্লেসমেন্ট অনুযায়ী পড়ার ক্রম সেট করা হবে।

.cards {
  display: grid;
  grid-auto-flow: dense;
}

.cards li {
  grid-column: auto / span 2;
  reading-order: auto;
}

reading-order-items সহ নিম্নলিখিত নন-র‍্যান্ডমাইজড লেআউট

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

নিচের উদাহরণে row-reverse ব্যবহার করে একটি ফ্লেক্স লেআউট দেখানো হয়েছে। ফ্লেক্স আইটেমে reading-order: auto এবং ফ্লেক্স কন্টেনারে reading-order-items: flex flow আছে, এর অর্থ হল আমরা চাই যে রিডিং অর্ডারও flex-flow দিকনির্দেশ অনুসরণ করুক, ভিজ্যুয়াল অর্ডার (যা আমরা flex visual দিয়ে বোঝাতে পারি) অনুসরণ না করুক।

.cards {
  display: flex;
  flex-flow: row-reverse;
  reading-order-items: flex flow;
}

.cards li {
  reading-order: auto;
}

পরবর্তী এই উদাহরণে, grid-template-areas ব্যবহার করে একটি গ্রিড লেআউট তৈরি করা হয়েছে এবং আইটেমগুলিকে সোর্স অর্ডারের থেকে আলাদা লেআউট অর্ডারে প্লেস করা হয়েছে। reading-order-items প্রপার্টি ব্যবহার করে বোঝানো হয় যে আমাদের লেআউট ক্রম অনুসরণ করা উচিত, পরের সারিতে যাওয়ার আগে প্রতিটি সারি ট্রাভার্স করা উচিত। (grid column বিপরীত দিক নির্দেশ করবে)।

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a a b b b b"
    "c c d d e e"
    "f f g g h h";
  reading-order-items: grid rows;
}

.a {
  grid-area: a;
  reading-order: auto;
}

Does this mean that source order doesn't matter?

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

এইসব প্রপার্টি ব্যবহার করার সময়, এমন একটি ক্রম ব্যবহার করে সোর্স ডকুমেন্ট তৈরি করুন যা CSS ছাড়া পৃষ্ঠা রেন্ডার করা হলে অর্থপূর্ণ হবে। যেসব জায়গা ও ব্রেকপয়েন্টে এগুলি প্রয়োজন, শুধুমাত্র সেখানেই এই প্রপার্টি যোগ করুন।

অথরিং টুল কি এইসব প্রপার্টি প্রয়োগ করবে?

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

এই প্রস্তাবের ব্যাপারে আপনার মতামত শেয়ার করুন

এই বিষয়ে আপনার মতামত জানতে আমরা খুবই আগ্রহী। বিশেষ করে, আপনার যদি এমন কোনও ব্যবহারের কেস থাকে যা আপনি মনে করেন যে এটি সমাধান করবে না, বা পদ্ধতির সাথে অ্যাক্সেসিবিলিটি সংক্রান্ত উদ্বেগ থাকে, তাহলে CSS ওয়ার্কিং গ্রুপকে জানান।

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

Patrick Tomasso-এর তৈরি থাম্বনেল ছবি। মতামত ও পর্যালোচনার জন্য ক্রিস হ্যারেলসন, ট্যাব অ্যাটকিন্স এবং ইয়ান কিলপ্যাট্রিককে ধন্যবাদ।