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

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

Rachel Andrew

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

সমস্যা

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

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

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

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

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

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

reading-order: auto

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

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

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

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

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

অথরিং টুল এই বৈশিষ্ট্যগুলি প্রয়োগ করা উচিত?

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

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

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

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

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