দূরত্ব কমানো হচ্ছে

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

Rachel Andrew

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

Flexbox গ্যাপ

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

ব্রাউজারে গ্রিড লেআউট আসার ঠিক পরেই, প্রপার্টির নাম পরিবর্তন করে gap করা হয়, সাথে row-gap ও column-gap-ও করা হয়। তারপর এটি ফ্লেক্স লেআউটেও কাজ করার জন্য নির্দিষ্ট করা হয়েছিল। নাম পরিবর্তন করার অর্থ হল, একই কাজ করে এমন একাধিক প্রপার্টি আমাদের কাছে নেই।

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

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

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

সহায়তার ক্ষেত্রে কেন ফাঁক থেকে যায়?

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

বেশিরভাগ ফিচারের প্রোটোটাইপ একটি ব্রাউজারে তৈরি করা হবে। যেমন, গ্রিড লেআউট স্পেসিফিকেশন প্রথমে Microsoft তৈরি করেছিল এবং Internet Explorer 10-এ প্রাথমিক ফর্মে প্রয়োগ করা হয়েছিল। Mozilla-র একজন ইঞ্জিনিয়ার সাবগ্রিডের আচরণ কেমন হওয়া উচিত তা বোঝার জন্য অনেক কাজ করেছেন এবং তাই এই ফিচারটি প্রথমে Firefox-এ এসেছে। আমরা দেখছি যে Safari কিছু নতুন কালার ফাংশন নিয়ে এসেছে।

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

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

সমস্যাগুলি

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

দ্বিতীয়টি হল মেসেজিং সংক্রান্ত সমস্যা। সহায়তার ক্ষেত্রে কোথায় ফাঁক থেকে যাচ্ছে তা আমরা কীভাবে স্পষ্ট করতে পারি? আমরা কীভাবে নতুন ফিচার শেয়ার করব যাতে প্রত্যেককে প্রতিটি জিনিস ভালোভাবে রিসার্চ করে দেখতে না হয় যে সেটি কতটা ভালোভাবে কাজ করে?

ইন্টারঅপারেবিলিটি

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

আপনি Interop 2022 ড্যাশবোর্ড থেকে অগ্রগতি ফলো করতে পারবেন।

মেসেজিং

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

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

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

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

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1.

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

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