ক্রস-ব্রাউজার কম্প্যাটিবিলিটি নিশ্চিত করা: সকল ব্রাউজারে সহজে কাজ করে এমন ওয়েবসাইট বানান

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

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

"মনে রাখবেন যে আপনি আপনার ইউজার নন—শুধু কারণ আপনার সাইট আপনার MacBook Pro বা হাই-এন্ড Galaxy Nexus-এ কাজ করে, সেটি আপনার সব ইউজারের জন্য কাজ করবে না!" – MDN Web Docs

সূচিপত্র

ক্রস-ব্রাউজার কম্প্যাটিবিলিটি কী?
সাধারণ ক্রস-ব্রাউজার ইস্যু এবং সমাধান
ক্রস-ব্রাউজার কম্প্যাটিবিলিটির জন্য সেরা অনুশীলন
উপসংহার

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

ব্রাউজারগুলো ভিন্ন ইঞ্জিন ব্যবহার করে, তাই ডিফল্টভাবে সেগুলো ওয়েবসাইট ভিন্নভাবে রেন্ডার করে। আপনার ওয়েবসাইটগুলো যেন একইভাবে দেখাও এবং কাজ করো无论 ইউজারের ব্রাউজার কী, সেটি বুঝতে হলে ইউনিক ব্রাউজার ক্যাপাবিলিটি বুঝতে হয়।

ক্রস-ব্রাউজার কম্প্যাটিবিলিটি বলে যে, আদর্শভাবে, একটি ওয়েবসাইট একইভাবে দেখাও এবং কাজ করো উচিত যেন কেউ সেটি Chrome, Microsoft Edge এবং Opera-তে (Blink ইঞ্জিন চালিত), Firefox-এ (Gecko ইঞ্জিন চালিত), বা Safari-তে (WebKit ইঞ্জিন চালিত) দেখে।

ক্রস-ব্রাউজার কম্প্যাটিবিলিটির সুবিধা:

ব্যাপক পৌঁছানোর সুযোগ—আপনার ওয়েবসাইট বেশি ইউজারের কাছে অ্যাক্সেসিবল, তাদের ব্রাউজার কী সেটি উপেক্ষা করে।
কনসিস্টেন্ট ইউজার অভিজ্ঞতা—আপনার ওয়েবসাইট প্ল্যাটফর্ম জুড়ে একই লুক এবং ফাংশনালিটি রাখে।
ভালো সার্চ ইঞ্জিন অপ্টিমাইজেশন (SEO)—আপনার ওয়েবসাইট বেশি ইউজার-ফ্রেন্ডলি হয়ে হাইয়ার র‍্যাঙ্কিং পায়।

সাধারণ ক্রস-ব্রাউজার ইস্যু এবং সমাধান

Infographic showing test results of a web page on different browsers. Image credit Browserstack

ফর্ম এলিমেন্ট

<input>, <select>, <textarea>, এবং <button>-এর মতো ফর্ম এলিমেন্টের চেহারা এবং আচরণ ব্রাউজার জুড়ে উল্লেখযোগ্যভাবে ভিন্ন হতে পারে। এটি ভিজ্যুয়াল অ্যাসপেক্ট এবং ফর্মের ব্যবহারযোগ্যতা দুটোই প্রভাবিত করে, যার মধ্যে ইউজার কীভাবে সেগুলোর সাথে ইন্টারঅ্যাক্ট করে (উদাহরণস্বরূপ, ক্লিক করা, ফোকাস করা, এবং টাইপ করা)।

উদাহরণস্বরূপ, <input> ফিল্ডে প্লেসহোল্ডার টেক্সট একটি ব্রাউজারে ফींকা দেখাতে পারে এবং অন্যটিতে বেশি প্রনাঙ্গ হতে পারে, যা রিডেবিলিটি ইস্যু সৃষ্টি করে।

এটি সমাধান করতে:

CSS ব্যবহার করে ফর্ম এলিমেন্টের চেহারা যতটা সম্ভব স্ট্যান্ডার্ডাইজ করুন।
প্লেসহোল্ডারের জন্য, ব্রাউজার জুড়ে কনট্রাস্ট এবং লেজিবিলিটি নিশ্চিত করুন:

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #909090;
  opacity: 1; /* Firefox */
}
input.studentid:-ms-input-placeholder { /* Microsoft Edge */
  color: #909090;
}

উপরের CSS কোড ব্রাউজার জুড়ে ইনপুট ফিল্ডের প্লেসহোল্ডার টেক্সট টার্গেট করে, তাদের কালার #909090 সেট করে, এবং কনসিস্টেন্ট ভিজিবিলিটির জন্য পূর্ণ অপাসিটি নিশ্চিত করে (Microsoft Edge-র জন্য স্পেসিফিক রুলসহ)।

ফন্ট

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

একটি ফন্ট Chrome-এ পাতলা এবং বেশি স্পেসড দেখাতে পারে Edge-এ তুলনায়, যা রিডেবিলিটি এবং ডিজাইন কনসিস্টেন্সি প্রভাবিত করে।

এটি সমাধান করতে:

আপনার CSS-এ একটি বেস ফন্ট সাইজ ডিফাইন করুন এবং টেক্সট সাইজিং-এর জন্য রিলেটিভ ইউনিট (যেমন em বা rem) ব্যবহার করুন নিচের কোডে দেখানোমত। এটি স্কেলেবিলিটি এবং কনসিস্টেন্সি বজায় রাখতে সাহায্য করে।

html {
  font-size: 16px; /* Define a base font size */
}
body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  color: #333;
}
h1, h2, h3, p {
  margin: 2rem;;
  padding: 1.5rem;
}

ওয়েব ফন্ট ব্যবহার করার সময়, নিশ্চিত করুন সেগুলো সব ব্রাউজারে সঠিকভাবে লোড হচ্ছে Google Fonts-এর মত সার্ভিস ব্যবহার করে, যা ক্রস-ব্রাউজার কম্প্যাটিবল ফন্ট লোডিং প্রদান করে:

<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

নিচের কোড নিশ্চিত করে যে 'Open Sans' ফন্ট আমাদের ওয়েবসাইটে একই দেখাবে, কোনো ব্রাউজার হোক না কেন। এটি প্রথমে ফন্টের একটি ভার্সন ব্যবহার করে যা ইতিমধ্যে আপনার কম্পিউটারে থাকতে পারে দ্রুত লোড করার জন্য। অন্যথায়, এটি ইন্টারনেট থেকে নেয় কিন্তু লোড হওয়ার ইন্টারিমে একটি ডিফল্ট ফন্ট স্ব্যাপ করে।

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
}

স্ক্রোলবার

স্ক্রোলবার স্টাইলিং দীর্ঘদিন ধরে ওয়েব ডেভেলপারদের জন্য একটি চ্যালেঞ্জ কারণ বিভিন্ন ব্রাউজারের মধ্যে ইনকনসিস্টেন্ট সাপোর্ট। Chrome, Safari, এবং Edge-এ CSS ব্যবহার করে স্ক্রোলবার কাস্টমাইজ করার উপায় থাকলেও, সাপোর্টের লেভেল এবং ইমপ্লিমেন্টেশন পদ্ধতি ভিন্ন।

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

Chrome, Edge, এবং Firefox-এর জন্য, আপনি CSS scrollbar-width এবং scrollbar-color প্রপার্টি ব্যবহার করতে পারেন স্ক্রোলবারের চেহারা কাস্টমাইজ করতে। এগুলো একটি nieu স্ট্যান্ডার্ডের অংশ যেটি ব্রাউজার জুড়ে স্ক্রোলবার স্টাইল করার একটি আরও কনসিস্টেন্ট উপায় প্রদান করার লক্ষ্যে।

/* For Chrome, Firefox, and Edge */
scrollbar-width: thin;
scrollbar-color: #c0c0c0 #f0f0f0;

Safari-এর জন্য, যা WebKit রেন্ডারিং ইঞ্জিন ব্যবহার করে, আপনাকে ::-webkit-scrollbar সিউডো-এলিমেন্ট ব্যবহার করতে হবে সিমিলার স্টাইলিং অর্জনের জন্য। এই মেথড WebKit-বেসড ব্রাউজারদের জন্য স্পেসিফিক।

/* For Safari */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}

উপরের CSS কোড সেই ব্রাউজার জুড়ে স্ক্রোলবারের চেহারা কাস্টমাইজ করে তাদের সাইজ এবং কালার অ্যাডজাস্ট করে।

তবে সব ব্রাউজারে কনসিস্টেন্সির জন্য, আপনাকে আপনার ওয়েব পেজ ডিজাইন করতে হবে এমনভাবে যে ডিফল্ট স্ক্রোলবার চেহারা আপনার ডিজাইনকে নেতিবাচকভাবে প্রভাবিত না করে।

ক্রস-ব্রাউজার কম্প্যাটিবিলিটির জন্য সেরা অনুশীলন

Infographic showing measuring tools. Image credit Creative Bloq

Doctype ডিফাইন করুন

আপনার HTML ডকুমেন্ট <!DOCTYPE> ডিক্লেরেশন দিয়ে শুরু করুন যাতে স্ট্যান্ডার্ডস মোড এক্টিভেট হয়।

এটি গুরুত্বপূর্ণ কারণ এটি ওয়েব ব্রাউজারকে বলে যে পেজটি কোন HTML ভার্সনে লেখা হয়েছে। এর বিনা, ব্রাউজাররা পেজটি "quirks mode"-এ রেন্ডার করতে পারে—যেখানে ব্রাউজার ধরে নেয় আপনি পুরনো, নন-স্ট্যান্ডার্ড কোড লিখেছেন। এটি চূড়ান্তে অনপ্রেডিক্টেবল স্টাইলিং এবং লেআউট ইস্যুতে লিড করে কারণ মডার্ন ওয়েব স্ট্যান্ডার্ড পুরোপুরি অ্যাপ্লাই হয় না।

HTML5-এ <!DOCTYPE> ডিক্লেরেশন আপনার HTML ফাইলের একদম শুরুতে এভাবে দেখাবে:

<!DOCTYPE html>

CSS Reset ব্যবহার করুন

CSS রিসেট মূলত কমন এলিমেন্ট টার্গেট করে এমন একসেট রুল যোগ করা যাতে তাদের ডিফল্ট স্টাইলিং রিমুভ হয়, ব্রাউজার-ডিফল্ট ডিসক্রেপ্যান্সি কমিয়ে দেয়।

বিভিন্ন ব্রাউজার HTML এলিমেন্টের জন্য ভিন্ন ইনহেরেন্ট স্টাইল রাখে—মার্জিন, প্যাডিং, ফন্ট সাইজ, ইত্যাদি। তাই CSS রিসেট ইমপ্লিমেন্ট করলে নিশ্চিত হয় যে শুধু আপনার লিখা স্টাইলই ইফেক্ট নেবে। এটি বিভিন্ন ব্রাউজার জুড়ে আপনার ওয়েবপেজ স্টাইল করার জন্য একটি কনসিস্টেন্ট বেসলাইন তৈরি করে।

কিছু ডেভেলপার নিজের থেকে লিখতে পছন্দ করেন। আর আমার মতো অন্যদের Eric Meyer-এর জনপ্রিয় এবং ফ্রি CSS রিসেট ব্যবহার করে, নিচের কোডে দেখানোমত:

/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

আরেক গ্রুপ ডেভেলপার Normalize.css ব্যবহার করে, যা আপনি npm-এর মত প্যাকেজ ম্যানেজার দিয়ে ইনস্টল করে আপনার CSS-এ ইম্পোর্ট করতে পারেন।

npm install normalize.css

CSS প্রপার্টি সাপোর্ট রিভিউ করুন

অ্যাডভান্সড CSS ফিচার ব্যবহার করার আগে, Can I Use-এর মত ওয়েবসাইটে তাদের কম্প্যাটিবিলিটি চেক করুন। সেখানে আপনি HTML, CSS, এবং জাভাস্ক্রিপ্ট ফিচারের বিস্তারিত কম্প্যাটিবিলিটি টেবিল পাবেন বিভিন্ন ব্রাউজার এবং ভার্সন জুড়ে। এটি আপনাকে ইনফরমড ডিসিশন নিতে সাহায্য করবে কোন টেকনোলজি ব্যবহার করবেন এবং কখন ফলব্যাক ইমপ্লিমেন্ট করবেন।

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

Browser compatibility for CSS Grid.

রেসপন্সিভ ওয়েবসাইট তৈরি করুন

আমরা যে মাল্টি-ডিভাইস ওয়ার্ল্ডে বাস করছি সেটি ডিমান্ড করে যে, ওয়েব ডেভেলপার হিসেবে, আমরা রেসপন্সিভনেসকে প্রায়োরিটি দিই।

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

রেসপন্সিভ ডিজাইনের সেরা অনুশীলন এবং কীভাবে ইমপ্লিমেন্ট করবেন সে সম্পর্কে একটি নিবন্ধ এখানে।

ক্রস-ব্রাউজার টেস্টিং করুন

টেস্টিং প্রোগ্রামিং-এ последেও একটি বাজওয়ার্ড হয়ে গেছে, কিন্তু এর কারণ এটি খুব গুরুত্বপূর্ণ আপনার লিখা কোড প্রত্যাশা অনুযায়ী কাজ করছে কিনা নিশ্চিত করতে।

এটি শুধু চেক করা নয় যে আপনার TypeScript কোড স্মूदলি রান করছে। এমনকি সিম্পল ওয়েব প্রজেক্টও থারো টেস্টিং চায়।

ক্রস-ব্রাউজার টেস্টিং মানে আপনার ওয়েব পেজগুলো বিভিন্ন ব্রাউজার এবং ডিভাইসে ট্রাই করা যাতে সেগুলো একইভাবে দেখাও এবং কাজ করো সব জায়গায়।

উপসংহার

ক্রস-ব্রাউজার কম্প্যাটিবিলিটি উচ্চারণ করা কিছুটা কঠিন। কিন্তু যemon দেখেছি, এটি ওয়েবসাইট বানাতে অত্যন্ত জরুরি। এবং আপনি ধীরে ধীরে আপনার ওয়েবসাইটগুলো কম্প্যাটিবল করতে পারেন টেস্টিং এবং কোড টুইক করলে এবং উপরের পাঁচটি সেরা অনুশীলন ইমপ্লিমেন্ট করলে।

তাই, আপনার পরবর্তী ওয়েবসাইট বা ওয়েব অ্যাপে পর্দা আঁকার আগে, মনে রাখবেন চেক করতে আপনার Chrome, Firefox, Safari, এবং অন্যান্য ব্রাউজারের ইউজাররা একই জিনিস দেখছেন এবং অভিজ্ঞতা পাচ্ছেন কিনা।

কিছু হেল্পফুল রিসোর্স:

MDN Web Docs on Cross-browser compatibility
Codepaper on Significance of Cross-browser compatibility
Eric Meyer on CSS Reset

ফ্রি কোড ক্যাম্পের ওপেন সোর্স কারিকুলাম ৪০,০০০+ মানুষকে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন।