ফাঁক গণনার জমকালো অনুষ্ঠান

ওয়েবের জন্য তৈরি করা সহজ করে তোলা।

Rachel Andrew

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

ফ্লেক্সবক্স ফাঁক

একটি সমস্যাযুক্ত প্রপার্টির উদাহরণ হিসেবে, gap প্রপার্টি আপনাকে গ্রিড বা ফ্লেক্স আইটেমের মধ্যে, অথবা একটি মাল্টিকল কন্টেইনারের কলামের মধ্যে ফাঁক তৈরি করতে দেয়। যদিও আমরা দীর্ঘদিন ধরে মাল্টিকলের মধ্যে column-gap ব্যবহার করে আসছি, তবে প্রপার্টিটি প্রথমে গ্রিড লেআউটে grid-gap হিসাবে grid-column-gap এবং grid-row-gap এর সাথে দেখা গেছে।

ব্রাউজারে গ্রিড লেআউট আসার পরপরই, প্রোপার্টিটির নাম পরিবর্তন করে gap রাখা হয়, সাথে row-gap এবং column-gap ও রাখা হয়। এরপর এটিকে flex layout-এও কাজ করার জন্য নির্দিষ্ট করা হয়। পুনঃনামকরণের অর্থ হল আমাদের একই কাজ করার জন্য একাধিক প্রোপার্টি নেই।

.box {
  display: flex;
  gap: 1em;
}

Firefox ২০১৮ সালের অক্টোবরে ফ্লেক্স লেআউটের জন্য প্রপার্টিটি পাঠিয়েছিল। এটি ২০২০ সালের জুলাই পর্যন্ত Chrome-এ দেখা যায়নি, এরপর ২০২১ সালের এপ্রিলে Safari আসে। এর অর্থ হল gap ব্যবহার করার আগে দুই বছর ছয় মাস সময় লেগেছিল। বাস্তবে, বেশিরভাগ ডেভেলপারদের জন্য অপেক্ষা করতে অনেক বেশি সময় লেগেছিল, কারণ তাদের সর্বশেষ সংস্করণের চেয়ে পুরনো ব্রাউজার ভার্সন সমর্থন করতে হয়। flex layout-এ সাপোর্টিং gap আরও সমস্যাযুক্ত হয়ে ওঠে কারণ আমরা flex layout-এ gap সাপোর্ট সনাক্ত করতে ফিচার কোয়েরি ব্যবহার করতে পারি না। যেহেতু gap প্রপার্টি গ্রিডে সাপোর্টেড, তাই @supports (gap:1em) true ফিরে আসবে।

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

সমর্থনে কেন ফাঁক রয়েছে?

এটি কোনও একটি ব্রাউজারকে ধীরগতির জন্য আঙুল তোলার পোস্ট নয়। আপনি যদি বিভিন্ন প্ল্যাটফর্ম বৈশিষ্ট্যগুলি দেখেন, তাহলে আপনি দেখতে পাবেন যে বিভিন্ন ব্রাউজার বিভিন্ন বৈশিষ্ট্যের ক্ষেত্রে নেতৃত্ব দেয়।

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

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

তবে যখন কোনও বৈশিষ্ট্য বাস্তবায়নের কথা আসে, তখন সেই ব্রাউজারের জন্য অন্যান্য সম্ভাব্য বৈশিষ্ট্যগুলির পাশাপাশি এটিকে অগ্রাধিকার দেওয়া প্রয়োজন। এবং, কখনও কখনও ব্রাউজারটিকে আরও উন্নত করার জন্য প্রয়োজনীয় অন্যান্য কাজের পিছনে জিনিসগুলি আটকে থাকে। এর একটি দুর্দান্ত উদাহরণ হল Chromium-এ RenderingNG কাজ। এটি সাবগ্রিড বাস্তবায়নের পথ প্রশস্ত করেছে; তবে, Firefox এবং Chromium শিপিং সাবগ্রিডের মধ্যে দীর্ঘ ব্যবধানের কারণ হল নতুন রেন্ডারিং ইঞ্জিনে প্রথমে গ্রিড লেআউট পুনরায় বাস্তবায়ন করা প্রয়োজন।

সমস্যাগুলো

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

দ্বিতীয়টি হলো বার্তা প্রেরণের সমস্যা। সহায়তার ক্ষেত্রে কোথায় ফাঁক আছে তা আমরা কীভাবে স্পষ্ট করতে পারি? কীভাবে আমরা নতুন বৈশিষ্ট্যগুলি ভাগ করে নেব যাতে প্রত্যেককে প্রতিটি জিনিস সাবধানে গবেষণা করে বুঝতে না হয় যে এটি কতটা ভালভাবে সমর্থিত?

আন্তঃকার্যক্ষমতা

ইন্টারঅপারেবিলিটি সমস্যা সমাধানের জন্য ব্রাউজারগুলি ইতিমধ্যেই একসাথে কাজ করছে। গত বছর কম্প্যাট ২০২১ বেশ কয়েকটি বৈশিষ্ট্যের সমর্থনে ঘাটতি পূরণ করতে সাহায্য করেছে, যার মধ্যে ফ্লেক্স লেআউটের গ্যাপ প্রপার্টিও রয়েছে। এই বছর ইন্টারপ ২০২২ প্রচেষ্টা ১৫টি বৈশিষ্ট্যের উপর দৃষ্টি নিবদ্ধ করছে এবং এর মধ্যে কয়েকটির উপর ইতিমধ্যেই আন্দোলন শুরু হয়েছে।

আপনি ইন্টারপ ২০২২ ড্যাশবোর্ডে অগ্রগতি অনুসরণ করতে পারেন।

মেসেজিং

দ্বিতীয় সমস্যাটি হল web.dev এবং developer.chrome.com- এ বৈশিষ্ট্যগুলি নিয়ে আলোচনা করার সময় আমি আপনাকে সাহায্য করতে আগ্রহী। আমি চাই আপনি যখন আমাদের বিষয়বস্তু পড়বেন তখন বৈশিষ্ট্যগুলির অবস্থা সত্যিই স্পষ্ট হোক এবং আমরা সহায়তা সমস্যাগুলি নেভিগেট করার জন্য ব্যবহারিক উপায়গুলি প্রদান করি।

আমরা বেশ কিছু মৌলিক কোর্স চালু করেছি, আরও অনেক কোর্স আসছে। এই কোর্সগুলি আপনাকে মূল ওয়েব প্ল্যাটফর্ম প্রযুক্তি ব্যবহার করে আধুনিক ওয়েবের জন্য কীভাবে তৈরি করতে হয় তা শিখতে সাহায্য করবে। দেখুন:

• সিএসএস শিখুন
• ফর্ম শিখুন
• ডিজাইন শিখুন
• পিডব্লিউএ শিখুন

আমরা এই সাইটের আমাদের কন্টেন্টগুলিকে সেই জিনিসগুলির উপর কেন্দ্রীভূত করার জন্য কাজ করছি যা আপনি নিরাপদে ব্যবহার করতে পারেন। আমরা এখনও সম্পূর্ণরূপে সেখানে পৌঁছাইনি; তবে, আগামী মাসগুলিতে আপনি ব্যবহারিক দিকে কিছুটা পরিবর্তন দেখতে শুরু করবেন।

আমরা Open Web Docs প্রকল্পের সহায়তার মাধ্যমে ওপেন ওয়েব ডকুমেন্টেশনেও অবদান রাখি। এটি নিশ্চিত করে যে আমাদের কাছে MDN- এর উপর প্রথম-শ্রেণীর ডকুমেন্টেশন রয়েছে, সাথে হালনাগাদ ব্রাউজার সামঞ্জস্যের ডেটাও রয়েছে। এরপর আমরা বৈশিষ্ট্যগুলির জন্য সমর্থন দেখানোর জন্য web.dev-এ এই ডেটা ব্যবহার করি। ফ্লেক্স লেআউটের gap বর্তমান সমর্থন এখানে।

যদি আপনি ওয়েবের জন্য Chrome এর দৃষ্টিভঙ্গি সম্পর্কে আরও জানতে চান, Origin এবং Developer ট্রায়ালগুলিতে আমরা কী কী পরীক্ষা-নিরীক্ষা করছি, তাহলে আপনি আমাদের সহযোগী সাইট - developer.chrome.com - এ সেই কন্টেন্টটি ক্রমবর্ধমানভাবে পাবেন। সেখানকার কন্টেন্টটি পরীক্ষামূলক হতে পারে, অথবা বর্তমানে শুধুমাত্র Chrome-এ সমর্থিত হতে পারে, তবে আমরা চাই আপনি এটি অন্বেষণ করুন এবং প্রতিক্রিয়া জানান।

ওয়েবের জন্য এখন সত্যিই একটি উত্তেজনাপূর্ণ সময়। আমরা আশা করি আমরা আপনার কাছে মূল বৈশিষ্ট্যগুলি আরও দ্রুত পৌঁছে দিতে এবং বিদ্যমান ফাঁকগুলি সম্পর্কে স্পষ্টভাবে জানতে সাহায্য করতে পারব, যা ওয়েব ডেভেলপমেন্টকে আরও মজাদার এবং কম হতাশাজনক করে তুলবে।

ছবি: ক্রিস্টোফার ম্যাক্সিমিলিয়ান ।