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

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

Rachel Andrew

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

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

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

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

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

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

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

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

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

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

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

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

সমস্যাগুলো

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

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

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

আন্তঃঅপারেবিলিটি সমস্যা সমাধানের জন্য ব্রাউজারগুলি ইতিমধ্যে একসাথে কাজ করছে। গত বছর কম্প্যাট 2021 ফ্লেক্স লেআউটে গ্যাপ প্রপার্টি সহ বেশ কয়েকটি বৈশিষ্ট্যের সমর্থনের ফাঁক বন্ধ করতে সাহায্য করেছিল। এই বছর ইন্টারপ 2022 প্রচেষ্টা 15টি বৈশিষ্ট্যের উপর ফোকাস করছে এবং এর মধ্যে কয়েকটির উপর ইতিমধ্যেই আন্দোলন হয়েছে।

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

মেসেজিং

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

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

• সিএসএস শিখুন
• ফর্ম শিখুন
• ডিজাইন শিখুন
• PWA শিখুন

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

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

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

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

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