প্রকাশিত: 7 মে, 2025, শেষ আপডেট: সেপ্টেম্বর 17, 2025
ফ্রন্টএন্ড কোড বেসগুলিতে ন্যূনতম সমর্থিত ব্রাউজার সংস্করণগুলি কনফিগার করার জন্য ব্রাউজারলিস্ট অন্যতম জনপ্রিয় সরঞ্জাম। বিকাশকারীরা তাদের package.json ফাইলে একটি browserslist কোয়েরি যোগ করে (বা ব্রাউজারলিস্টের জন্য অন্যান্য কনফিগারেশন পয়েন্ট, যেমন একটি .browserslistrc ফাইল) এবং ব্রাউজারলিস্ট ন্যূনতম সমর্থিত ব্রাউজারগুলির একটি তালিকা প্রকাশ করে। ব্রাউজারলিস্টটি জনপ্রিয় লিন্টিং, পলিফিলিং এবং প্যাকেজিং সরঞ্জামগুলির বিস্তৃত পরিসরের সাথে ব্যবহার করা যেতে পারে, যার মধ্যে রয়েছে:
- অটোপ্রিফিক্সার
- Babel ব্যবহার করে
@babel/preset-env - পোস্টসিএসএস
postcss-preset-envব্যবহার করে - ESLint
eslint-plugin-compatব্যবহার করে - Stylelint ব্যবহার করে
stylelint-no-unsupported-browser-features - ওয়েবপ্যাক
বেসলাইন টার্গেট
আপনি যখন বেসলাইন ব্যবহার করার সিদ্ধান্ত নেন, তখন আপনার ব্যবহারকারীর ভিত্তি বিবেচনা করা উচিত এবং আপনি কোন বেসলাইন বৈশিষ্ট্য সেটকে লক্ষ্য করতে চান তা নির্ধারণ করা উচিত:
- বেসলাইন ব্যাপকভাবে উপলব্ধ সমস্ত ওয়েব বৈশিষ্ট্যগুলিকে অন্তর্ভুক্ত করে যা অতীতে 30 বা তার বেশি মাস বেসলাইন কোর ব্রাউজার দ্বারা সম্পূর্ণরূপে সমর্থিত ছিল৷
- বেসলাইন বছরের বৈশিষ্ট্য সেট, উদাহরণস্বরূপ বেসলাইন 2020 , নির্দিষ্ট বছরের শেষে নতুনভাবে উপলব্ধ সমস্ত বৈশিষ্ট্য অন্তর্ভুক্ত করে।
আপনার ব্যবহারকারীর ভিত্তির উপর নির্ভর করে, আপনি ব্যাপকভাবে উপলব্ধ বেসলাইন টার্গেট করতে সক্ষম হতে পারেন, অথবা আপনাকে একটি পুরানো বেসলাইন বছর লক্ষ্য করতে হতে পারে। আপনার ব্যবহারকারীদের কোন ব্রাউজার সংস্করণ রয়েছে তা বোঝার জন্য আপনার বিশ্লেষণ বা RUM সরঞ্জামগুলির সাথে পরামর্শ করুন৷
নতুনভাবে বা ব্যাপকভাবে উপলব্ধ বেসলাইনকে কীভাবে লক্ষ্য করা যায়
বেসলাইনের জন্য সমর্থন কয়েকটি ভিন্ন প্রশ্নের মাধ্যমে ব্রাউজারলিস্টে তৈরি করা হয়েছে। আপনি যদি বেসলাইন নতুনভাবে উপলব্ধ ব্রাউজারগুলিকে লক্ষ্য করতে চান, আপনার ব্রাউজারলিস্ট কনফিগারেশনে baseline newly available নির্দিষ্ট করার চেষ্টা করুন:
{
...
"browserslist": [
"baseline newly available"
]
...
}
আপনি একটি প্রশ্ন হিসাবে baseline widely available নির্দিষ্ট করতে পারেন, এছাড়াও:
{
...
"browserslist": [
"baseline widely available"
]
...
}
কিভাবে বেসলাইন বছর টার্গেট
আপনি যদি একটি বেসলাইন বছরের বৈশিষ্ট্য সেট টার্গেট করতে চান, আপনি একটি প্রশ্নে বছরটি নির্দিষ্ট করুন, যেমন baseline 2024 যদি আপনি 2024 বৈশিষ্ট্য সেটকে লক্ষ্য করতে চান:
"browserslist": "baseline 2024"
আপনি baseline 2015 থেকে বর্তমান বছর পর্যন্ত বছর নির্দিষ্ট করতে পারেন।
ডাউনস্ট্রিম ব্রাউজারগুলি কীভাবে নির্দিষ্ট করবেন
বেসলাইন কোর ব্রাউজার সেটে রয়েছে ক্রোম, এজ, ফায়ারফক্স এবং সাফারি। অন্যান্য ব্রাউজারগুলি ক্রোম এবং এজ-ক্রোমিয়াম-এর মতো একই ওপেন সোর্স কোডের উপর ভিত্তি করে তৈরি করা হয় এবং ক্রোমিয়ামের যে কোনও সংস্করণ প্রয়োগ করে সেই একই বৈশিষ্ট্য সেট সমর্থন করা উচিত। আপনার বেসলাইন কনফিগারেশনে এই ব্রাউজারগুলিকে অন্তর্ভুক্ত করতে, আপনার বেসলাইন কোয়েরির পরে with downstream যোগ করুন। উদাহরণস্বরূপ, ব্যাপকভাবে উপলব্ধ বেসলাইনের অংশ হিসাবে ডাউনস্ট্রিম ব্রাউজারগুলিকে লক্ষ্য করতে, baseline widely available with downstream নির্দিষ্ট করুন:
"browserslist": "baseline widely available with downstream"
baseline newly available with downstream হল আরেকটি বৈধ প্রশ্ন, যেমনটি বার্ষিক লক্ষ্যে with downstream যোগ করা হচ্ছে:
"browserslist": "baseline 2024 with downstream"
কর্মে বেসলাইন প্রশ্নের উদাহরণ
প্যাকেজিং সরঞ্জামগুলিতে
আপনার প্রোজেক্টে ব্রাউজারলিস্টের দেওয়া বেসলাইন কোয়েরি ব্যবহার করলে তাৎক্ষণিক প্রভাব পড়তে পারে। ব্যাবেল জাভাস্ক্রিপ্ট প্যাকেজ করার জন্য একটি জনপ্রিয় বিল্ড টুল। আপনি যদি @babel/preset-env প্যাকেজ ডিফল্ট ব্যবহার করেন, অনেক আধুনিক জাভাস্ক্রিপ্ট API এবং পদ্ধতিগুলি পুরানো ব্রাউজারগুলির জন্য প্রয়োজনীয় আরও ভার্বোস সিনট্যাক্স দিয়ে প্রতিস্থাপিত হবে:
যাইহোক, baseline 2020 এর একটি ক্যোয়ারী ব্যবহার করে 2020 ফিচার সেটকে লক্ষ্য করার জন্য একই উদাহরণ প্রকল্পে নাটকীয়ভাবে এই জাভাস্ক্রিপ্টের আউটপুট আকার হ্রাস করে, কারণ কম সিনট্যাক্স রূপান্তর প্রয়োজন:
Google Chrome Labs বেসলাইন-ডেমো রিপোজিটরিতে উদাহরণ কোড ব্যবহার করে নিজের জন্য এটি চেষ্টা করুন।
লিন্টারে
কিছু লিন্টার ইতিমধ্যেই ব্রাউজারলিস্টের সাথে কাজ করে, বা একটি সামঞ্জস্য মডিউল ব্যবহার করে ব্রাউজারলিস্টের সাথে কাজ করা যেতে পারে। উদাহরণস্বরূপ, স্টাইললিন্ট স্টাইলিন্ট-ব্রাউজার-কম্প্যাট মডিউল ব্যবহার করে একটি browserslist কনফিগারেশন গ্রহণ করতে পারে। আপনার পছন্দের বেসলাইন কোয়েরি ব্যবহার করতে আপনার stylelint.config.js ফাইল সেট করুন:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['baseline widely available'],
},
],
},
};
Stylelint এখন CSS ফ্ল্যাগ করবে যা বর্তমানে বেসলাইনের অংশ নয় ব্যাপকভাবে উপলব্ধ:
স্টাইলিন্ট একটি প্লাগইনও প্রদান করে যা আপনাকে সরাসরি বেসলাইন নিয়ম সেট করতে দেয়, কিন্তু আপনি যদি ইতিমধ্যেই আপনার কনফিগারেশন পরিচালনা করতে ব্রাউজারলিস্ট ব্যবহার করেন, তাহলে ব্রাউজারলিস্ট অফার করে এমন অন্তর্নির্মিত বেসলাইন প্রশ্নগুলি ব্যবহার করে একটি কার্যকর সমাধান।