ইন্টারপ 2022: ডেভেলপারদের জন্য ওয়েবকে উন্নত করতে ব্রাউজার একসাথে কাজ করছে

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

এটি সব 2019 সালে শুরু হয়েছিল

2019 সালে Mozilla, Google এবং অন্যরা MDN ডেভেলপার নিডস অ্যাসেসমেন্ট সার্ভে এবং ডিপ-ডাইভ ব্রাউজার কম্প্যাটিবিলিটি রিপোর্টের আকারে ডেভেলপারদের ব্যথার বিষয়গুলি বোঝার জন্য একটি বড় প্রচেষ্টা শুরু করে। এই প্রতিবেদনগুলি ওয়েব প্ল্যাটফর্মের সাথে বিকাশকারীদের জন্য শীর্ষ চ্যালেঞ্জগুলি মোকাবেলা করার জন্য আমাদের বিস্তারিত এবং কার্যকরী তথ্য দিয়েছে এবং Compat 2021 প্রচেষ্টার দিকে পরিচালিত করেছে।

অন্যান্য বিষয়ের মধ্যে, কম্প্যাট 2021 শক্তিশালী বৈশিষ্ট্যগুলির জন্য একটি শক্ত ভিত্তি তৈরি করেছে যেমন CSS গ্রিড ( 12% ব্যবহার এবং ক্রমবর্ধমান বৃদ্ধি ) এবং CSS ফ্লেক্সবক্স ( 77% ব্যবহার ), ফ্লেক্সবক্সের gap প্রপার্টি সহ, যা একটি শীর্ষ ব্যথার সমস্যা সমাধান করে বিকাশকারীরা যখন নতুন লেআউট পদ্ধতি গ্রহণ করে।

2021-এর শেষে সমস্ত বাস্তবায়নে 90%-এর বেশি স্কোরে পৌঁছতে পেরে আমরা আনন্দিত!

ইন্টারপ 2022 কি?

ইন্টারপ 2022 হল একটি বেঞ্চমার্ক, যা তিনটি প্রধান ব্রাউজার বাস্তবায়নের প্রতিনিধিদের দ্বারা সম্মত, এবং সমর্থক Apple , Bocoup , Google, Igalia , Microsoft , এবং Mozilla এর কাছ থেকে ইনপুট সহ পাবলিক মনোনয়ন এবং পর্যালোচনার একটি প্রক্রিয়ার মাধ্যমে বিকশিত হয়েছে৷

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

ফোকাস 15 ক্ষেত্র

নিম্নলিখিত বৈশিষ্ট্যগুলি ইন্টারপ 2022-এর ফোকাস হবে। এর মধ্যে 10টি নতুন এলাকা অন্তর্ভুক্ত রয়েছে, এছাড়াও 5টি কমপ্যাট 2021 থেকে নেওয়া হয়েছে। ফোকাসের নতুন ক্ষেত্রগুলি হল:

ক্যাসকেড স্তর

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

কালার স্পেস এবং CSS কালার ফাংশন

একটি ডিজাইন সিস্টেমে রঙ ফাংশন ব্যবহার করার জন্য, আপনাকে বর্তমানে HSL মানগুলিতে Sass, PostCSS বা calc() এর উপর নির্ভর করতে হবে। সিএসএস-এ নির্মিত রঙ ফাংশন মানে রঙগুলি গতিশীলভাবে আপডেট করা যেতে পারে, এবং নতুন রঙের স্থানগুলি sRGB স্বরগ্রামের সীমাবদ্ধতা এবং HSL-এর উপলব্ধিগত সীমাবদ্ধতাগুলিকে সরিয়ে দেয়।

CSS কালার লেভেল 5 এ দুটি ফাংশন সংজ্ঞায়িত করা হয়েছে যা ওয়েব প্ল্যাটফর্মে আরও গতিশীল থিমিং সক্ষম করে:

  • color-mix() : দুটি রঙ নেয় এবং একটি নির্দিষ্ট রঙের জায়গায় একটি নির্দিষ্ট পরিমাণে মিশ্রিত করার ফলাফল প্রদান করে।
  • color-contrast() : রঙের তালিকা থেকে একটি নির্দিষ্ট একক রঙের সর্বোচ্চ বৈসাদৃশ্য সহ রঙ নির্বাচন করে।

এই ফাংশনগুলি প্রসারিত রঙের স্থানগুলিকে সমর্থন করে (ল্যাব, এলসিএইচ, এবং পি 3), এবং এইচএসএল এবং এসআরজিবি ছাড়াও, এগুলি অভিন্ন LCH রঙের জায়গায় ডিফল্ট করে।

নতুন ভিউপোর্ট ইউনিট

MDN ব্রাউজার কম্প্যাটিবিলিটি রিপোর্ট 2020 এবং নতুন স্টেট অফ CSS 2021 সমীক্ষা উভয় ক্ষেত্রেই ভিউপোর্ট সাইজিং নিয়ে সমস্যাগুলি প্রকট। CSS মান এবং ইউনিট লেভেল 4 বৃহত্তম, ক্ষুদ্রতম, এবং গতিশীল ভিউপোর্ট আকার, lv* , sv* , এবং dv* এর জন্য নতুন ইউনিট যোগ করে। এই ইউনিটগুলি লেআউট তৈরি করা সহজ করে তুলবে যা মোবাইল ডিভাইসে দৃশ্যমান ভিউপোর্ট পূরণ করে ঠিকানা বারকে বিবেচনায় নিয়ে।

প্রতিটি ধরনের ভিউপোর্ট ইউনিটের জন্য ভিউপোর্টের বিভিন্ন অংশ।

উপরন্তু, ইন্টারপ 2022-এর পিছনে ক্রস ভেন্ডর দল বিদ্যমান vh ইউনিট সহ বিদ্যমান ভিউপোর্ট পরিমাপ বৈশিষ্ট্যগুলির আন্তঃকার্যক্ষমতার অবস্থার গবেষণা এবং উন্নতিতে সহযোগিতা করবে।

স্ক্রোলিং

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

আমরা নতুন স্ক্রোল স্ন্যাপ বৈশিষ্ট্য প্রস্তাবগুলিও অন্বেষণ করছি৷

সাবগ্রিড

grid-template-columns এবং grid-template-rows subgrid মান মানে হল যে একটি গ্রিড আইটেম যেটিতে display: grid প্রয়োগ করা হয়েছে সেটি প্যারেন্ট গ্রিডের যে অংশের উপরে স্থাপন করা হয়েছে সেখান থেকে ট্র্যাক সংজ্ঞা উত্তরাধিকার সূত্রে পেতে পারে।

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

একটি তিনটি কার্ড উপাদান যেখানে শিরোনাম এবং পাদচরণগুলি কার্ডগুলির মধ্যে সারিবদ্ধ থাকে৷
কোডপেনে এটি দেখুন

এছাড়াও অন্তর্ভুক্ত

  • CSS কন্টেনমেন্ট (সম্পত্তি contain )
  • <dialog> উপাদান
  • ফর্ম নিয়ন্ত্রণ
  • টাইপোগ্রাফি এবং এনকোডিং: font-variant-alternates , font-variant-position , ic ইউনিট এবং সিজেকে টেক্সট এনকোডিং সহ
  • ওয়েব কম্প্যাট, যেটি ব্রাউজারগুলির মধ্যে পার্থক্যগুলির উপর ফোকাস করে যা শেষ ব্যবহারকারীদের প্রভাবিত করে সাইট সামঞ্জস্যের সমস্যা সৃষ্টি করেছে

কম্প্যাট 2021 প্রকল্পের মাধ্যমে নিম্নলিখিত ক্ষেত্রগুলি দুর্দান্ত অগ্রগতি করেছে, তবে উন্নতির জন্য এখনও জায়গা রয়েছে। তাই, বাকি সমস্যাগুলো যাতে সমাধান করা যায় তার জন্য তাদের ইন্টারপ 2022-এ অন্তর্ভুক্ত করা হয়েছে।

  • আনুমানিক অনুপাত
  • ফ্লেক্সবক্স
  • গ্রিড
  • স্টিকি পজিশনিং
  • রূপান্তরিত করে

তদন্ত প্রচেষ্টা

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

  • সম্পাদনা, contenteditable এবং execCommand
  • পয়েন্টার এবং মাউস ইভেন্ট
  • ভিউপোর্ট পরিমাপ

ব্রাউজার বিক্রেতা এবং অন্যান্য স্টেকহোল্ডাররা এই ক্ষেত্রগুলির জন্য পরীক্ষা এবং স্পেসিফিকেশন উন্নত করতে সহযোগিতা করবে, যাতে তারা এই প্রচেষ্টার ভবিষ্যতের পুনরাবৃত্তিতে অন্তর্ভুক্ত হতে পারে।

সাফল্য পরিমাপ এবং অগ্রগতি ট্র্যাকিং

ব্রাউজার প্রতি স্কোর - Chrome এবং Edge-এর জন্য 71, Firefox-এর জন্য 74, Safari প্রযুক্তি প্রিভিউ-এর জন্য 73৷

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

অনুসরণ করতে এবং অগ্রগতি ট্র্যাক করতে, ইন্টারপ 2022 ড্যাশবোর্ড দেখুন। সারা বছর ধরে, আপনি অনুসরণ করতে পারেন এবং দেখতে পারেন যে আপনি যে প্ল্যাটফর্মটি তৈরি করছেন তার উন্নতি হচ্ছে।

সমস্ত প্রধান ওয়েব ব্রাউজারগুলির জন্য অনেকগুলি ক্ষেত্রের স্কোর সহ একটি টেবিলের একটি চিত্র৷
wpt.fyi/interop-2022-এ ফোকাস এলাকা প্রতি সমস্ত ব্রাউজার স্কোর দেখুন।

ডেভেলপারদের জন্য এই সব মানে কি হবে?

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

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

আপনি কি ভাবছেন আমাদের জানান

আপনার যদি Compat 2021-এর সময় করা উন্নতি বা ইন্টারপ 2022-এ অন্তর্ভুক্ত যেকোনও বৈশিষ্ট্যের বিষয়ে প্রতিক্রিয়া থাকে, আমরা আপনার কাছ থেকে শুনতে চাই। এই বৈশিষ্ট্যগুলির মধ্যে কোনটি আপনার কাজে সবচেয়ে বেশি পার্থক্য আনবে? আপনি কি সম্পর্কে সত্যিই উত্তেজিত? GitHub রেপোর জন্য সমস্যা ফাইল করুন বা টুইটারে আমাদের জানান

ইন্টারপ 2022 সম্পর্কে আরও তথ্য থেকে: