CSS লেআউট এবং সোর্স অর্ডার ডিসকানেক্ট সমাধান করা

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

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

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

সমস্যাটি

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

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

`order` প্রপার্টি ব্যবহার করে ট্যাব অর্ডারটি লেআউট অর্ডার থেকে কীভাবে সংযোগ বিচ্ছিন্ন করা হয়েছে তা দেখতে উদাহরণ এবং চারপাশের ট্যাবে ক্লিক করুন।

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

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

একজন ডেভেলপার উৎসে নির্দেশিত ক্রমে ভিন্ন ক্রমে গ্রিডে আইটেম স্থাপন করেও এই সংযোগ বিচ্ছিন্ন করতে পারে।

গ্রিড প্লেসমেন্ট বৈশিষ্ট্য ব্যবহার করে ট্যাব ক্রমটি লেআউট ক্রম থেকে কীভাবে সংযোগ বিচ্ছিন্ন করা হয়েছে তা দেখতে উদাহরণ এবং চারপাশের ট্যাবে ক্লিক করুন।

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

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

reading-order: auto

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

নিম্নলিখিত 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 ব্যবহার করে একটি flex লেআউট দেখানো হয়েছে। flex আইটেমগুলিতে reading-order: auto এবং flex container 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;
}

এর মানে কি এই যে সোর্স অর্ডার কোন ব্যাপার না?

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

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

লেখার সরঞ্জামগুলিতে কি এই বৈশিষ্ট্যগুলি প্রয়োগ করা উচিত?

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

এই প্রস্তাব সম্পর্কে আপনার মতামত জানান।

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

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

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