প্রকাশিত: ১২ নভেম্বর, ২০২৬
AI কোডিং এজেন্টকে টুলটিপ বা মোডাল ডায়ালগ তৈরি করতে বলুন এবং এটি যে কোড লেখে তা ভালভাবে দেখুন। বেশিরভাগ সময়, ব্রাউজারে বিল্ট-ইন ফিচার আবার তৈরি করতে এজেন্ট জাভাস্ক্রিপ্ট ব্যবহার করে। আপনি যদি এজেন্টকে এর পরিবর্তে নতুন CSS বা HTML ফিচার ব্যবহার করার জন্য প্রম্পট করেন, তাহলে এটি প্রায়শই ফিচার শনাক্তকরণ এবং ফলব্যাক এড়িয়ে যায়। এই বাদ দেওয়ার ফলে, যেসব ব্যবহারকারী কাজ করে না এমন ব্রাউজার ব্যবহার করেন, তারা ভাঙা পৃষ্ঠা দেখতে পান।
মডার্ন ওয়েব নির্দেশিকা প্রতিটি সাজেশনে ব্রাউজার কম্প্যাটিবিলিটি তৈরি করে। প্রতিটি গাইডে বেসলাইন সাপোর্ট ডেটা এবং যাচাই করা ফলব্যাক প্যাটার্ন সহ আধুনিক ওয়েব ফিচার রয়েছে। এই পোস্টে দেখানো হয়েছে যে কীভাবে আপনার এজেন্ট আধুনিক, ক্রস-ব্রাউজার কোড লিখতে সেই ডেটা ব্যবহার করে।
কেন কোডিং এজেন্টরা নির্দেশিকা ছাড়া ব্রাউজার সাপোর্ট ভুল করে
কোনও নির্দেশিকা না থাকলে, কোডিং এজেন্টরা কোড লেখার আগে আপনার প্রোজেক্টের জন্য কোন ব্রাউজার প্রয়োজন তা খুব কমই চেক করে। পরিবর্তে, তারা দুটি চরমের একটিতে পড়ে যায়:
- ডিফল্ট হিসেবে লিগেসি কোড ব্যবহার করা: মডেল ট্রেনিং ডেটা লিগেসি প্যাটার্নে ভর্তি এবং মডার্ন ওয়েব নির্দেশিকা মূল্যায়ন থেকে দেখা যায় যে মডেল এখনও এইসব প্যাটার্নের অনেকগুলি সাজেস্ট করে। বিল্ট-ইন HTML বা CSS ফিচার দিয়ে কাজ হয়ে গেলেও, এজেন্টরা প্রায়ই জটিল জাভাস্ক্রিপ্ট লেখেন বা এক্সটার্নাল লাইব্রেরি যোগ করেন।
- কোনও সেফটি নেট ছাড়াই নতুন ফিচার ব্যবহার করা: আপনি যখন কোনও এজেন্টকে নতুন ওয়েব ফিচার ব্যবহার করতে বলেন, তখন এটি সাধারণত ব্রাউজারকে সাপোর্ট করার জন্য কোড লেখে এবং সেখানেই থেমে যায়। এটি ফিচার শনাক্তকরণ এড়িয়ে যায় এবং ফলব্যাক বাদ দেয়, যার ফলে যেসব ব্রাউজারে ফিচার কাজ করে না সেখানে পৃষ্ঠা ভেঙে যায়।
মডার্ন ওয়েব নির্দেশিকা মূল্যায়ন স্যুট থেকে পাওয়া ডেটা দেখায় যে এই ব্যবধান কতটা সাধারণ। যেসব ফিচার এখনও সব প্রধান ব্রাউজার জুড়ে কাজ করে না, সেগুলির জন্য মূল্যায়ন স্যুট ফিচার শনাক্তকরণ, @supports নিয়ম, ফলব্যাক বা শর্তসাপেক্ষ পলিফিল পরীক্ষা করে। গাইড করা হয়নি এমন মডেল মাত্র ৪৩% ক্ষেত্রে এই চেক পাস করে। মডার্ন ওয়েব নির্দেশিকা চালু থাকলে, পাস রেট ৮৭% পর্যন্ত বেড়ে যায়।
বেসলাইন ডেটা কীভাবে প্রতিটি সাজেশনকে গাইড করে
কোনও ওয়েব ফিচারের জন্য কখন ফলব্যাক প্রয়োজন তা নির্ধারণ করতে, মডার্ন ওয়েব নির্দেশিকা বেসলাইন-এর উপর নির্ভর করে। বেসলাইন, তিনটি স্ট্যাটাস সহ মূল ব্রাউজার সেট (ডেস্কটপ ও মোবাইলে Chrome, Edge, Firefox ও Safari) জুড়ে ট্র্যাক করে:
- বেসলাইন ব্যাপকভাবে উপলভ্য: ফিচারটি কমপক্ষে ৩০ মাস ধরে সব মূল ব্রাউজার জুড়ে কাজ করেছে।
- বেসলাইন নতুন উপলভ্য: ফিচারটি সব মূল ব্রাউজার জুড়ে কাজ করে, শেষ ব্রাউজারটি যে তারিখ থেকে সাপোর্ট যোগ করেছে সেই তারিখ থেকে শুরু করে।
- সীমিত উপলভ্যতা: ফিচারটি এখনও সব প্রধান ব্রাউজারে কাজ করে না।
প্রতিটি মডার্ন ওয়েব নির্দেশিকা গাইডে web-features প্যাকেজ থেকে বিল্ট-ইন বেসলাইন স্ট্যাটাস এবং ব্রাউজার ভার্সন ডেটা অন্তর্ভুক্ত থাকে। আপনার কোডিং এজেন্ট কোনও গাইড লোড করলে, এটি ফিচারটির সঠিক সাপোর্ট স্ট্যাটাস, রিলিজের তারিখ এবং ব্রাউজার ভার্সনের পাশাপাশি প্রয়োগ করার নির্দেশাবলীও পায়। যেমন:
Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.
সাধারণত, মডার্ন ওয়েব নির্দেশিকা সেই ডেটার উপর ভিত্তি করে দুটি নিয়ম অনুসরণ করে:
- বেসলাইন ব্যাপকভাবে উপলভ্য ফিচার: আপনার এজেন্ট অতিরিক্ত ফিচার শনাক্তকরণ বা ফলব্যাক কোড ছাড়াই সরাসরি এইসব ফিচার ব্যবহার করে। এই নিয়ম আপনার কোডবেসকে লিন রাখে এবং অপ্রয়োজনীয় ওয়ার্কঅ্যারাউন্ড এড়িয়ে যায়।
- বেসলাইন নতুন উপলভ্য এবং সীমিত উপলভ্যতা ফিচার: এইসব ফিচারের জন্য গাইডে যাচাই করা ফলব্যাক স্ট্র্যাটেজি অন্তর্ভুক্ত থাকে। আপনার এজেন্ট যেখানে কাজ করে সেখানে আধুনিক ফিচার ব্যবহার করে এবং অন্যান্য ব্রাউজারের জন্য একটি ক্লিন ফলব্যাক প্রদান করে।
চারটি ফলব্যাক প্যাটার্ন যা মডার্ন ওয়েব নির্দেশিকা প্র্যাক্টিসে ব্যবহার করে
প্রতিটি ওয়েব ফিচারের জন্য একই ধরনের ফলব্যাক প্রয়োজন হয় না। অসমর্থিত ব্রাউজারে ফিচারটি কীভাবে কাজ করে তার উপর ভিত্তি করে মডার্ন ওয়েব নির্দেশিকা প্রতিটি ফিচারকে চারটি ফলব্যাক পদ্ধতির একটির সাথে ম্যাচ করে:
| ফলব্যাক প্যাটার্ন | মডার্ন ওয়েব নির্দেশিকা কখন এটি ব্যবহার করে |
|---|---|
| কোনও ফলব্যাক কোড ছাড়াই প্রোগ্রেসিভ এনহ্যান্সমেন্ট | সাজসজ্জা বা অতিরিক্ত ফিচার যা কাজ করে না এমন ব্রাউজার লেআউট বা আচরণ না ভেঙে নিরাপদে উপেক্ষা করে। |
@supports নিয়মের মাধ্যমে CSS ফিচার শনাক্তকরণ |
ভিজ্যুয়াল বা লেআউট স্টাইল যা নতুন CSS ফিচারের উপর নির্ভর করে এবং আংশিকভাবে প্রয়োগ করা হলে তা ভেঙে যেতে পারে। |
| লাইটওয়েট কাস্টম জাভাস্ক্রিপ্ট | ইন্টার্যাক্টিভ HTML অ্যাট্রিবিউট বা API যেগুলির পুরনো ব্রাউজারে আচরণ রেপ্লিকেট করার জন্য ছোট, জিরো-ডিপেন্ডেন্সি স্ক্রিপ্ট প্রয়োজন। |
| শর্তসাপেক্ষে লোড করা পলিফিল | বৃহত্তর CSS বা জাভাস্ক্রিপ্ট ফিচার যার জন্য নেটিভ সাপোর্ট না থাকলে শুধুমাত্র ডাইনামিকভাবে লোড করা একটি যাচাই করা পলিফিল প্রয়োজন। |
কোনও ফলব্যাক কোড ছাড়াই প্রোগ্রেসিভ এনহ্যান্সমেন্ট
কিছু আধুনিক ফিচার পৃষ্ঠার কাজ করার পদ্ধতি পরিবর্তন না করেই টাইপোগ্রাফি, অ্যানিমেশন বা পৃষ্ঠা লোড হওয়ার স্পিড উন্নত করে। কোনও ব্রাউজার এইসব ফিচার শনাক্ত করতে না পারলে, সেগুলি উপেক্ষা করে এবং পৃষ্ঠার বাকি অংশ স্বাভাবিকভাবে রেন্ডার করে।
যেমন, text-wrap: balance CSS ডিক্লারেশন (বেসলাইন নতুন উপলভ্য) হেডিংয়ের লাইনের দৈর্ঘ্য সমান করে।
.balanced {
text-wrap: balance;
}
Speculation Rules API (সীমিত উপলভ্যতা) আসন্ন পৃষ্ঠা প্রিফেচ বা প্রিরেন্ডার করে। যেসব ব্রাউজারে এটি কাজ করে না সেগুলি নিরাপদে <script type="speculationrules"> ব্লক ও অপরিচিত CSS ডিক্লারেশন এড়িয়ে যায়।
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
এই আচরণের কারণে, আপনার এজেন্ট কোনও অতিরিক্ত ফলব্যাক কোড ছাড়াই সরাসরি এইসব ফিচার যোগ করতে পারে।
@supports নিয়মের মাধ্যমে CSS ফিচার শনাক্তকরণ
অন্যান্য CSS ফিচার, স্ক্রিনে কোনও এলিমেন্টের পজিশন বা স্টাইল পরিবর্তন করে। আপনি যদি স্টাইলের অংশ শর্তহীনভাবে প্রয়োগ করেন, তাহলে কাজ করে না এমন ব্রাউজার ভুল জায়গায় এলিমেন্ট রেন্ডার করতে পারে।
যেমন, পজিশন করা টুলটিপে অ্যাঙ্কর করা কন্টেনার কোয়েরি (container-type: anchored, সীমিত উপলভ্যতা) ভিউপোর্টের কিনারার কাছাকাছি ফ্লিপ করার সময় টুলটিপের তীর ফ্লিপ করতে দেয়। যেসব ব্রাউজারে অ্যাঙ্কর করা কন্টেনার কোয়েরি কাজ করে না, সেখানে তীরচিহ্নটি ফ্লিপ শনাক্ত করতে পারে না এবং ভুল দিকে নির্দেশ করতে পারে। মডার্ন ওয়েব নির্দেশিকা আপনার এজেন্টকে @supports (container-type: anchored) নিয়মে তীরচিহ্নের স্টাইল র্যাপ করার নির্দেশ দেয় যাতে ডিফল্ট তীরচিহ্ন শুধুমাত্র সেইসব ব্রাউজারে দেখা যায় যেগুলি @container anchored() ফ্লিপ নিয়মও সাপোর্ট করে।
@supports (container-type: anchored) {
.tooltip-content::before {
content: "▼";
position: absolute;
inset-block-end: 0;
}
}
@container anchored(fallback: flip-block) {
.tooltip-content::before {
content: "▲";
inset-block-start: 0;
inset-block-end: auto;
}
}
লাইটওয়েট কাস্টম জাভাস্ক্রিপ্ট
কোনও ইন্টার্যাক্টিভ HTML ফিচার সব মূল ব্রাউজারে কাজ না করলে, থার্ড-পার্টি লাইব্রেরি পুল করা অপ্রয়োজনীয় হতে পারে। সেল্ফ-কন্টেনড ইন্টার্যাকশনের জন্য, মডার্ন ওয়েব নির্দেশিকা ফিচার চেক করার পিছনে একটি ছোট, জিরো-ডিপেন্ডেন্সি জাভাস্ক্রিপ্ট ফলব্যাক প্রদান করে।
যেমন, <dialog> এলিমেন্টে (সীমিত উপলভ্যতা) closedby="any" অ্যাট্রিবিউট ব্যবহারকারীদের ব্যাকড্রপে ক্লিক করে মোডাল ডায়ালগ বন্ধ করতে দেয়। যেসব ব্রাউজারে closedby অ্যাট্রিবিউট কাজ করে না, সেগুলির জন্য গাইডে একটি ছোট ক্লিক লিসনার অন্তর্ভুক্ত থাকে যা প্রথমে HTMLDialogElement.prototype অবজেক্ট চেক করে:
const dialog = document.querySelector('dialog');
if (!('closedBy' in HTMLDialogElement.prototype)) {
dialog.addEventListener('click', (event) => {
if (event.target !== dialog) return;
const rect = dialog.getBoundingClientRect();
const clickedInDialog =
rect.top <= event.clientY &&
event.clientY <= rect.top + rect.height &&
rect.left <= event.clientX &&
event.clientX <= rect.left + rect.width;
if (!clickedInDialog) {
dialog.close();
}
});
}
শর্তসাপেক্ষে লোড করা পলিফিল
CSS অ্যাঙ্কর পজিশনিং (সীমিত উপলভ্যতা) বা Temporal API (সীমিত উপলভ্যতা)-এর মতো বড় প্ল্যাটফর্ম ফিচারের জন্য, ম্যানুয়ালি কাস্টম ফলব্যাক লেখা বাস্তবসম্মত নয়। একই সাথে, প্রত্যেক ব্যবহারকারীর জন্য পলিফিল বান্ডেল করলে, যেসব ব্রাউজারে ফিচারটি আগে থেকেই কাজ করে, সেগুলির জন্য অতিরিক্ত ডাউনলোড খরচ যোগ হয়।
এইসব ক্ষেত্রে, মডার্ন ওয়েব নির্দেশিকা আপনার এজেন্টকে প্রথমে সহায়তা চেক করতে এবং আপনার বান্ডলার বা CDN থেকে import() এক্সপ্রেশনের মাধ্যমে ডায়নামিকভাবে একটি যাচাই করা পলিফিল লোড করতে নির্দেশ দেয়। যেসব ব্রাউজার এটি সাপোর্ট করে সেগুলি কোনও অতিরিক্ত কোড ডাউনলোড করে না, তবে পুরনো ব্রাউজারগুলি প্রয়োজন অনুযায়ী পলিফিল ফেচ করে।
if (!CSS.supports('anchor-name: --a')) {
await import('@oddbird/css-anchor-positioning');
}
আপনার প্রোজেক্টের ব্রাউজার সাপোর্ট টার্গেট কাস্টমাইজ করুন
ডিফল্ট হিসেবে, মডার্ন ওয়েব নির্দেশিকা বেসলাইন ব্যাপকভাবে উপলভ্য ফিচারকে ফলব্যাক ছাড়াই ব্যবহার করার জন্য নিরাপদ হিসেবে বিবেচনা করে। বেসলাইন নতুন উপলভ্য এবং সীমিত উপলভ্য ফিচারের জন্য এটিতে ফলব্যাক প্রয়োজন।
আপনার প্রোজেক্টের জন্য আলাদা ব্রাউজার সংক্রান্ত প্রয়োজনীয়তা থাকতে পারে। যেমন, আপনি নির্দিষ্ট কোনও বেসলাইন বছর টার্গেট করতে পারেন, Electron অ্যাপের জন্য তৈরি করতে পারেন অথবা বান্ডেল ছোট রাখতে পলিফিল বাদ দিতে পারেন।
আপনার প্রোজেক্টের AGENTS.md বা CLAUDE.md ফাইলে কাস্টম ব্রাউজার সাপোর্ট নীতি নির্ধারণ করতে পারবেন:
## Browser support policy
- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.
প্রতিটি গাইডে বেসলাইন স্ট্যাটাস, রিলিজের তারিখ এবং প্রতিটি ফিচারের জন্য ন্যূনতম ব্রাউজার ভার্সন অন্তর্ভুক্ত থাকে। আপনার এজেন্ট কোড লেখার আগে এই কম্প্যাটিবিলিটি ডেটার সাথে আপনার নীতি তুলনা করে। কোনও ফিচার আগে থেকেই আপনার লক্ষ্য পূরণ করলে, এজেন্ট আধুনিক কোড লেখে এবং ফলব্যাক কোড এড়িয়ে যায়।
আধুনিক ও ফলব্যাক পাথ, দুটিই পরীক্ষা করুন
ক্রস-ব্রাউজার কোড লেখা হল কাজের অর্ধেক। এছাড়াও, আপনাকে আসল ব্রাউজারে আধুনিক কোড পাথ ও ফলব্যাক পাথ, দুটিই পরীক্ষা করতে হবে।
আপনি যখন একটি ব্রাউজারে পরীক্ষা করেন, তখন আপনি আপনার কোডের শুধুমাত্র একটি শাখা যাচাই করেন। যেমন, Chrome ও Firefox ব্রাউজার <dialog> এলিমেন্টে নেটিভ closedby="any" অ্যাট্রিবিউট রান করে, যেখানে Safari ব্রাউজার জাভাস্ক্রিপ্ট ক্লিক-আউটসাইড ফলব্যাক রান করে। আপনি যদি শুধু Chrome-এ ডায়ালগটি পরীক্ষা করেন, তাহলে আপনার পরীক্ষার সময় সেই ফলব্যাক লিসেনার কখনই রান করে না।
দুটি কোড পাথই যাচাই করতে, একই সময়ে একাধিক ব্রাউজার ইঞ্জিনে আপনার কোডিং এজেন্ট কানেক্ট করুন:
- এজেন্টের জন্য Chrome DevTools: লেআউট, কনসোল লগ ও রানটাইম আচরণ পরীক্ষা করতে, Chrome-এর সাথে আপনার এজেন্ট কানেক্ট করুন।
- Firefox DevTools MCP: WebDriver BiDi-এর মাধ্যমে আপনার এজেন্টকে লাইভ Firefox ইনস্ট্যান্সের সাথে কানেক্ট করুন।
- Safari MCP সার্ভার: বিল্ট-ইন
safaridriver --mcpকমান্ডের মাধ্যমে আপনার এজেন্টকে Safari-র সাথে কানেক্ট করুন।
তিনটি টুলই কানেক্ট করা থাকলে, আপনার এজেন্ট Chrome, Firefox ও Safari জুড়ে একটিই ওয়ার্কফ্লোতে আপনার পৃষ্ঠা খুলতে পারবে। এটি তখন নিশ্চিত করতে পারে যে নেটিভ ফিচার এবং ফলব্যাক অভিজ্ঞতা উভয়ই প্রত্যাশা অনুযায়ী কাজ করে।
মডার্ন ওয়েব নির্দেশিকা ব্যবহার শুরু করা
আপনার প্রোজেক্টে মডার্ন ওয়েব নির্দেশিকা যোগ করতে, আপনার প্রোজেক্ট ডিরেক্টরি থেকে ইন্ট্যার্যাক্টিভ ইনস্টলার রান করুন:
npx modern-web-guidance@latest install
আপনার কাছে আগের ভার্সন ইনস্টল করা থাকলে, ভার্সন ১.০-এ আপগ্রেড করতে আপডেট কমান্ড রান করুন:
npx modern-web-guidance@latest update
এছাড়াও, আপনি Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code ও Grok-এর জন্য প্লাগ-ইন মার্কেটপ্লেসের মাধ্যমে মডার্ন ওয়েব নির্দেশিকা ইনস্টল করতে পারবেন।
আরও জানতে, এইসব রিসোর্স এক্সপ্লোর করুন: