CSSWG মিনিট টেলিকন (2024-12-04): শুধু গ্রিড ব্যবহার করুন বনাম। প্রদর্শন: রাজমিস্ত্রি

সিএসএস ওয়ার্কিং গ্রুপ (সিএসএসডব্লিউজি) সাপ্তাহিক (বা এর কাছাকাছি) তাদের সমস্যাগুলি নিয়ে আলোচনা এবং দ্রুত সমাধান করার জন্য বৈঠক করে গিটহাব যেটি অন্যথায় ফোরামের কথোপকথনের পিছনে পিছনে হারিয়ে যাবে। যদিও প্রতিটি মিটিং আকর্ষণীয় কথোপকথন নিয়ে আসে, এই গত বুধবার (ডিসেম্বর 4) বিশেষ ছিল। সিএসএসডব্লিউজি পাঁচ বছর ধরে চলমান একটি বিতর্ককে শেষ করে স্কোয়াশ করার চেষ্টা করে: রাজমিস্ত্রি গ্রিডের একটি অংশ বা একটি পৃথক সিস্টেম হওয়া উচিত কিনা।

আমি বিতর্কের বর্তমান অবস্থা সংক্ষিপ্ত করার চেষ্টা করব, কিন্তু আপনি যদি দীর্ঘ সংস্করণ খুঁজছেন, আমি পড়ার পরামর্শ দিচ্ছি CSS রাজমিস্ত্রি এবং CSS গ্রিড জিওফ এবং দ্বারা সিএসএস-এ একটি রাজমিস্ত্রির সিনট্যাক্স নির্বাচন করা মরিয়ম সুজান দ্বারা।

2017 সালে, এটি ছিল প্রায়শই জিজ্ঞাসা করা হয় গ্রিড রাজমিস্ত্রির লেআউট পরিচালনা করতে পারে কিনা; লেআউট যেখানে কলাম (বা সারি) মধ্যে ফাঁক ছাড়াই অসম আকারের আইটেম ধরে রাখতে পারে। যদিও এটি রাজমিস্ত্রির বিভিন্ন সম্ভাবনার মধ্যে একটি, আপনি Pinterest দ্বারা জনপ্রিয় করা লেআউট সম্পর্কে চিন্তা করতে পারেন:

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

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

ক লেখকদের জন্য শেখা সহজ এবং

খ. এই সিদ্ধান্ত কীভাবে এক বা উভয় মডেলের (বা সাধারণভাবে সিএসএস) সম্ভাব্য ভবিষ্যতের উন্নয়নকে প্রভাবিত করতে পারে।

মাঝখানে, W3C টেকনিক্যাল আর্কিটেকচার গ্রুপ (TAG) ছিল ইস্যুতে ইনপুট চাওয়া হয়েছে যা দুটি প্রস্তাবকে একত্রিত করার প্রচেষ্টাকে উদ্বুদ্ধ করেছে। উভয় পক্ষই একাধিক পোস্ট নিয়ে টেবিলে জোরালো যুক্তি এনেছে, এবং পরবর্তী বৈঠকে, ঐকমত্যে পৌঁছানোর আশায় তাদের আবারও একটি উপস্থাপনায় সেই যুক্তিগুলি রাখতে বলা হয়েছিল।

মনে রাখবেন যে আপনি সদস্যতা নিতে পারেন এবং পুরো মিনিট পড়তে পারেন W3C.org

পাওয়ারপয়েন্টের যুদ্ধ

অ্যালিসন মাহের গুগলের প্রতিনিধিত্ব করছেন এবং রাজমিস্ত্রির একটি নতুন ডিসপ্লে মান হিসাবে বাস্তবায়নের একজন উকিল, এর সাথে মিটিংটি শুরু করেছিলেন একটি উপস্থাপনা. প্রধান পয়েন্ট ছিল:

1. গাঁথনি এবং গ্রিডের মধ্যে বেশ কিছু বৈশিষ্ট্য ভিন্নভাবে আচরণ করে।
2. সেট করার সময় ভাল ডিফল্ট display: masonryকিছু যে র‍্যাচেল অ্যান্ড্রু সম্প্রতি এর পক্ষে যুক্তি দিয়েছেন.
3. বিরুদ্ধে যুক্তি ছিল display: masonry যেহেতু ফলব্যাকগুলি বাস্তবায়ন করা আরও দীর্ঘ হবে, যেখানে একটি গ্রিড-ইন্টিগ্রেটেডে ফলব্যাক টু গ্রিড ইতিমধ্যেই রয়েছে। অ্যালিসন মাহের এটিকে খণ্ডন করেছেন যেহেতু “একটি প্রয়োজন একটি অস্থায়ী সমস্যা, তাই (আমাদের) ভবিষ্যতের দিকে মনোনিবেশ করা উচিত,” এবং “বিস্ময় এড়াতে লেখকদের স্পষ্টভাবে ফলব্যাক করা উচিত।”
4. “গাঁথনিতে অবস্থান গ্রিডের চেয়ে সহজ, এটি 2টির পরিবর্তে শুধুমাত্র 1 অক্ষে স্থাপন করা হয়েছে।”
5. শর্টহ্যান্ডগুলি আরও ভাল: “গ্রিড শর্টহ্যান্ড জটিল, ব্যবহার করা কঠিন৷ রাজমিস্ত্রির শর্টহ্যান্ড সহজ কারণ অর্ডারটি মনে রাখার দরকার নেই।”
6. “গ্রিড বনাম রাজমিস্ত্রিতে প্লেসমেন্ট আলাদাভাবে কাজ করে” এবং “সারিবদ্ধকরণও খুব আলাদা”
7. “সাবম্যাসনরি/সাবগ্রিডের জন্য অন্যান্য পরিবর্তন হবে যা ভিন্নতার দিকে পরিচালিত করবে।”
8. “গ্রিডে গাঁথনি একত্রিত করা স্পেক ব্লোটকে নেতৃত্ব দেবে, শেখানো কঠিন হবে এবং বিকাশকারীকে বিভ্রান্তির দিকে নিয়ে যাবে।”

alisonmaher: “উপসংহার: রাজমিস্ত্রি একটি পৃথক প্রদর্শন প্রকার হওয়া উচিত”

জেন সিমন্স, ওয়েবকিট দলের প্রতিনিধিত্ব করছেন এবং “জাস্ট ইউজ গ্রিড” পদ্ধতির প্রবক্তা আরেকটি উপস্থাপনা. এই দিকে, প্রধান পয়েন্ট ছিল:

1. লেখক শেখার ক্ষেত্রে তির্যক হতে পারে যেহেতু “একটি নতুন লেআউট টাইপ আলাদা সিনট্যাক্স সহ একটি পৃথক টুল তৈরি করে যা একই রকম কিন্তু বিদ্যমান (…) এর মত নয়। তারা পরিচিত কিন্তু পুরোপুরি এক নয়”
2. Chrome প্রস্তাবটি প্রায় 10টি নতুন বৈশিষ্ট্য যুক্ত করবে। “আমরা বিশ্বাস করি না যে CSS-এ এত নতুন বৈশিষ্ট্য যুক্ত করার জন্য একটি বাধ্যতামূলক যুক্তি আছে।”

3. “ক্রোমিয়াম যুক্তি দেয় যে তাদের নতুন সিনট্যাক্স আরও বোধগম্য। আমরা একমত না, শুধু ব্যবহার grid-auto-flow“
4. “যখন আপনি গ্রিডে সারি লেআউট করেন, টেমপ্লেট সিনট্যাক্স একটু ভিন্ন হয় — আপনি সারির নামগুলিকে শারীরিকভাবে ডায়াগ্রাম করতে টেমপ্লেট নামগুলিকে স্ট্যাক করেন৷ জাস্ট ইউজ গ্রিড ঠিক এই সিনট্যাক্সটি পুনরায় ব্যবহার করে; কিন্তু নতুন রাজমিস্ত্রি লেআউট সারিগুলির জন্য কলাম সিনট্যাক্স ব্যবহার করে”
5. “অন্যান্য পার্থক্য হল স্বয়ংক্রিয়-প্রবাহ — গ্রিড প্রাথমিক ফিল দিক নির্দেশ করে, ক্রোম বিশ্বাস করে যে এটির কোন মানে হয় না এবং লাইনের অভিযোজন মেলে এটি পরিবর্তন করে”

6. “ক্রোম যুক্তি দেয় যে নতুন ডিসপ্লে টাইপ আরও ভাল ডিফল্টের অনুমতি দেয় — কিন্তু ডিফল্টগুলি প্রস্তাব করা ভাল নয় (…) এটি দাবি করা হিসাবে সহজে কাজ করে না (নিবন্ধ দেখুন) অটোসাইজ করার গভীর বোঝার প্রয়োজন”
7. “সুইচ করা সহজ, যেমন ব্রেকপয়েন্টে বা প্রগতিশীল বর্ধন”
8. “ইতিমধ্যে বিদ্যমান যা পুনরায় ব্যবহার করতে CSS ডিজাইন নীতি অনুসরণ করে”

TAG পর্যালোচনা

বাধ্যতামূলক যুক্তি সহ দুটি উপস্থাপনার পরে, Lea Verou (এছাড়াও TAG এর একজন সদস্য) এর সাথে অনুসরণ করলেন তাদের ইনপুট.

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

গুগলের আর্গুমেন্টের বড় অংশ হল ডিফল্ট, কিন্তু আমাদের আরও স্মার্ট ডিফল্ট থাকতে পারে — সিএসএস-এ এর নজির আছে যদি আমরা সিদ্ধান্ত নিই যে এটি এর্গোনমিক্সকে সাহায্য করবে আমরা একমত যে গ্রিড বনাম রাজমিস্ত্রির মধ্যে স্যুইচ করা সাধারণ। গ্রিড কিছু না হওয়ার চেয়ে কিছুটা ভাল ফলব্যাক হতে পারে, তবে ছোট যুক্তি কারণ লোকেরা ব্যবহার করতে পারে @supports. এই সমস্ত নতুন বৈশিষ্ট্যগুলি প্রবর্তন করা API পৃষ্ঠকে বৃদ্ধি করে যা লেখকদের শিখতে হবে। কম তারা ওভার পোর্ট করতে পারেন. এমনকি যদি আমরা বলি যে আমরা শৃঙ্খলাবদ্ধ হব, অভিজ্ঞতা দেখায় যে আমরা তা করব না। ইচ্ছাকৃত না হলেও আকস্মিক। DRY – সত্যের একাধিক উৎস নেই

গ্রিডে রাজমিস্ত্রির বিরুদ্ধে একটি যুক্তি হল যে গ্রিডগুলি 2D, কিন্তু আসলে গ্রাফিক ডিজাইনে গ্রিডগুলি প্রায়শই 1D ছিল। আমি একমত যে বেশিরভাগ রাজমিস্ত্রির ব্যবহারের ক্ষেত্রে সাধারণ গ্রিড ব্যবহারের ক্ষেত্রে সহজ গ্রিডের প্রয়োজন, কিন্তু এর মানে হল যে আমাদের সেই গ্রিডগুলিকে গ্রিড এবং রাজমিস্ত্রি উভয়ের জন্য সংজ্ঞায়িত করা সহজ করা উচিত। আমরা যতই এটির দিকে তাকাই, আমরা বুঝতে পারি যে 3টি ভিন্ন লেআউট মোড রয়েছে যা আপনাকে শিশুদের 2D বিন্যাস দেয়। আমরা সুপারিশ করেছি শুধু গাঁথনিকে গ্রিডের অংশ না করে, তবে আমাদের কাছে যা আছে তা একীভূত করার উপায় খুঁজে বের করার জন্য আমরা একটি সংক্ষিপ্ত হ্যান্ড নিয়ে আসতে পারি যা grid-auto-flow এবং flex-directionএবং সাধারণভাবে লেআউট দিকনির্দেশের জন্য যে প্রচার করবেন? তারপর লেখকদের শুধুমাত্র এটির জন্য একটি নিয়ন্ত্রণ শিখতে হবে।

বিতর্ক

সবকিছু টেবিলের উপর রাখা হয়েছিল, অন্য সদস্যদের যা বলার ছিল তা কেবল বাকি ছিল।

অরিওল: জেন সিমন্সের যুক্তিতে সমস্যা। তিনি বলেন, প্রস্তাবিত রাজমিস্ত্রি-দিকনির্দেশ সম্পত্তি হবে নতুন সিনট্যাক্স যা মেলে না grid-auto-flow সম্পত্তি, কিন্তু এই সম্পত্তি মেলে flex-direction সম্পত্তি তাই গ্রিডের কাছাকাছি হওয়ার চেষ্টা করার পরিবর্তে, ফ্লেক্সবক্সের কাছাকাছি হওয়ার চেষ্টা করে। গ্রিডের কাছাকাছি একটি পছন্দ, বিভিন্ন জিনিসের সাথে সামঞ্জস্যপূর্ণ হতে পারে।

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

ট্যাবঅ্যাটকিন্স: আমার জন্য এটি সেট আপ করার জন্য ধন্যবাদ, কারণ আমি TAG যুক্তি খণ্ডন করতে যাচ্ছি! আমি মনে করি তারা এই ক্ষেত্রে ভুল. আপনি গ্রিড এবং রাজমিস্ত্রি, এবং ফ্লেক্সবক্স এবং অন্যান্য কাল্পনিক লেআউটগুলির মধ্যে অনেকগুলি পৃষ্ঠ-স্তরের সংযোগগুলি আঁকতে পারেন তবে আপনি যখন বাস্তবে তারা কীভাবে কাজ করে, প্রতিটির আচরণের বিশদ বিবরণ দেখেন, আপনি যদি চেষ্টা করেন তবে সেগুলি বেশ স্বতন্ত্র। একসাথে একত্রিত হলে, এটি পরস্পরবিরোধী সীমাবদ্ধতার একটি অপবিত্র জগাখিচুড়ি হবে — যেমন রাজমিস্ত্রি বা গ্রিডের জিনিসগুলিতে নমনীয় হওয়া বা আপনার কাছে একটি অদ্ভুত এর মিশ-ম্যাশ, “2ডি লেআউট।

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

lea: আসলে, TAG যুক্তিটি ছিল যে লেআউটটি আসলে একটি ধারাবাহিকতা বলে মনে হয় এবং সিনট্যাক্সে দুটি চরমের (বর্তমান ফ্লেক্স বনাম বর্তমান গ্রিড) জোর করার পরিবর্তে এটিকে মিটমাট করা উচিত।

একটি সাধারণ উত্তর তারকাকে অনুসরণ করার চেষ্টা না হওয়া পর্যন্ত বিতর্ক চলতে থাকে।

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

জেনসিমন্স: গ্রিডে একটি সাধারণ রাজমিস্ত্রি-শৈলীর বিন্যাস তৈরি করতে, আপনার শুধুমাত্র 3 লাইনের কোড (একটি ফাঁক সহ 4) প্রয়োজন৷ এটা বেশ সহজ.

জায়াস্কিন: TAG ফিডব্যাকের সর্বাধিক ঐকমত্যের অংশ ছিল যখনই সম্ভব বৈশিষ্ট্যগুলি ভাগ করা৷ একই ‘ডিসপ্লে’ মান শেয়ার করার প্রয়োজন নেই; বিভিন্ন ‘প্রদর্শন’ মান সংজ্ঞায়িত করতে পারে তবে বৈশিষ্ট্যগুলি ভাগ করে নিতে পারে। ইউনিফাইড প্রস্তাবের ব্যাপারে একটা জিনিস আমরা পছন্দ করিনি grid-auto-flow একীভূত প্রস্তাবে, যেখানে কিছু মান উপেক্ষা করা হয়েছিল। হ্যাঁ, এই হল ব্যবহারযোগ্যতা বিন্দু যা আমি পাউন্ড করছি

আরেকটি বিভক্ত সিদ্ধান্ত

সবকিছু সত্ত্বেও, দেখে মনে হচ্ছিল কেউই দিচ্ছে না, এবং বিতর্ক আবার আটকে গেছে:

astearns: আমি এখনও এগিয়ে যাওয়ার পথ শুনছি না। এক পর্যায়ে, শিবিরগুলির একটিকে এটিকে এগিয়ে নিয়ে যাওয়ার জন্য স্বীকার করতে হবে।

lea: আমরা যদি একটা খড় পোল করি। সিদ্ধান্ত নেওয়ার জন্য নয়, তবে আমরা ঐক্যমত্য থেকে কত দূরে আছি?

ভোট দেওয়া হয়েছিল এবং ফলাফল ছিল… বিভক্ত।

florian: যদিও আমরা এখনও ঐকমত্যে পৌঁছাতে পারিনি, আমি উভয় পক্ষকে ধন্যবাদ জানাতে চাই স্পষ্ট যুক্তি উপস্থাপন করার জন্য, ঘনবসতিপূর্ণ, ভালভাবে বিতরণ করা। আমি উপস্থাপনাগুলিতে ফিরে যাব, এবং কিছু পয়েন্ট পুনর্বিবেচনা করব, এটি যেভাবে ছিল তা উপস্থাপন করা সত্যিই তথ্যপূর্ণ ছিল।

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

আরও পড়া

প্রাসঙ্গিক সমস্যা