ক্রস-ব্রাউজার সামঞ্জস্য নিশ্চিত করা:সমস্ত ব্রাউজার জুড়ে নির্বিঘ্নে কাজ করে এমন ওয়েবসাইট তৈরি করুন

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

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

"মনে রাখবেন যে আপনি আপনার ব্যবহারকারী নন — আপনার সাইটটি আপনার MacBook প্রো বা হাই-এন্ড গ্যালাক্সি নেক্সাসে কাজ করে, এর মানে এই নয় যে এটি আপনার সমস্ত ব্যবহারকারীর জন্য কাজ করবে!" – MDN ওয়েব ডক্স

সূচিপত্র

• ক্রস-ব্রাউজার সামঞ্জস্য কি?
• সাধারণ ক্রস-ব্রাউজার সমস্যা এবং সমাধান
• ক্রস-ব্রাউজার সামঞ্জস্যের জন্য সর্বোত্তম অনুশীলনগুলি
• উপসংহার

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

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

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

ক্রস-ব্রাউজার সামঞ্জস্যের সুবিধা:

1. বিস্তৃত নাগাল – আপনার ওয়েবসাইটগুলি আরও ব্যবহারকারীদের কাছে অ্যাক্সেসযোগ্য, তারা যে ব্রাউজার ব্যবহার করুক না কেন৷
2. সামঞ্জস্যপূর্ণ ব্যবহারকারীর অভিজ্ঞতা – আপনার ওয়েবসাইটের প্ল্যাটফর্ম জুড়ে একটি অভিন্ন চেহারা এবং কার্যকারিতা রয়েছে।
3. বেটার সার্চ ইঞ্জিন অপ্টিমাইজেশান (SEO) – আপনার ওয়েবসাইটগুলি আরও ব্যবহারকারী-বান্ধব হওয়ার কারণে উচ্চতর র‍্যাঙ্কিং পায়৷

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

বিভিন্ন ব্রাউজারে একটি ওয়েব পৃষ্ঠার পরীক্ষার ফলাফল দেখানো ইনফোগ্রাফিক৷ ইমেজ ক্রেডিট ব্রাউজারস্ট্যাক

ফর্ম উপাদান

<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-এর জন্য নির্দিষ্ট নিয়ম সহ)।

ফন্ট

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

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

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

• আপনার 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 ফন্টের মতো পরিষেবাগুলি ব্যবহার করে সমস্ত ব্রাউজারে সঠিকভাবে লোড হয়েছে তা নিশ্চিত করুন, যা ক্রস-ব্রাউজার সামঞ্জস্যপূর্ণ ফন্ট লোডিং প্রদান করে:

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

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

@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 স্ক্রলবারের চেহারা কাস্টমাইজ করার বৈশিষ্ট্য। এটি একটি নতুন স্ট্যান্ডার্ডের অংশ যা এটি সমর্থন করে এমন ব্রাউজার জুড়ে স্ক্রলবারগুলিকে স্টাইল করার আরও সামঞ্জস্যপূর্ণ উপায় প্রদান করার লক্ষ্যে।

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

সাফারির জন্য , যা 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 কোডটি ব্রাউজার জুড়ে স্ক্রলবারগুলির আকার এবং রঙ সামঞ্জস্য করে তাদের চেহারা কাস্টমাইজ করে৷

কিন্তু সমস্ত ব্রাউজার জুড়ে সামঞ্জস্যের জন্য, আপনাকে আপনার ওয়েব পৃষ্ঠাগুলিকে এমনভাবে ডিজাইন করতে হবে যাতে ডিফল্ট স্ক্রলবারের উপস্থিতি আপনার ডিজাইনকে নেতিবাচকভাবে প্রভাবিত না করে৷

ক্রস-ব্রাউজার সামঞ্জস্যের জন্য সর্বোত্তম অনুশীলন

ইনফোগ্রাফিক পরিমাপের টুল দেখাচ্ছে। ইমেজ ক্রেডিট ক্রিয়েটিভ ব্লক

একটি ডকটাইপ সংজ্ঞায়িত করুন

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

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

একটি <!DOCTYPE> HTML5-এ ঘোষণা আপনার HTML ফাইলের একেবারে শুরুতে এরকম দেখায়:

<!DOCTYPE html>

একটি CSS রিসেট ব্যবহার করুন

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

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

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

/* http://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 গ্রিড অনুসন্ধান করেছি এবং অবিলম্বে বিভিন্ন ব্রাউজার এবং তাদের সংস্করণগুলি দেখতে পেয়েছি যা এটি সমর্থন করে। তাই আমার ওয়েব পৃষ্ঠায় CSS গ্রিড প্রয়োগ করার আগে, এটি যে ব্রাউজারগুলির সাথে কাজ করে সে সম্পর্কে আমার ধারণা আছে৷

CSS গ্রিডের জন্য ব্রাউজার সামঞ্জস্য।

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

আমরা বর্তমানে যে মাল্টি-ডিভাইস ওয়ার্ল্ডে বাস করি তার দাবি, ওয়েব ডেভেলপার হিসেবে, আমরা প্রতিক্রিয়াশীলতাকে অগ্রাধিকার দিয়ে থাকি।

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

প্রতিক্রিয়াশীল ডিজাইনের জন্য কিছু সর্বোত্তম অনুশীলন এবং কীভাবে সেগুলি বাস্তবায়ন করা যায় সে সম্পর্কে এখানে একটি নিবন্ধ রয়েছে৷

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

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

যদিও আপনার টাইপস্ক্রিপ্ট কোড সহজে চলে কিনা তা পরীক্ষা করার জন্য নয়। এমনকি সহজ ওয়েব প্রকল্পের পুঙ্খানুপুঙ্খ পরীক্ষার প্রয়োজন।

ক্রস-ব্রাউজার টেস্টিং এর অর্থ হল বিভিন্ন ব্রাউজার এবং ডিভাইসে আপনার ওয়েব পৃষ্ঠাগুলিকে চেষ্টা করা যাতে তারা দেখতে এবং বোর্ড জুড়ে ধারাবাহিকভাবে কাজ করে।

উপসংহার

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

সুতরাং, আপনি আপনার পরবর্তী ওয়েবসাইট বা ওয়েব অ্যাপে পর্দা আঁকার আগে, Chrome, Firefox, Safari এবং অন্যান্য ব্রাউজারে আপনার ব্যবহারকারীরা একই জিনিসগুলি দেখছেন এবং অনুভব করছেন কিনা তা পরীক্ষা করতে ভুলবেন না৷

এখানে কিছু সহায়ক সংস্থান রয়েছে:

• ক্রস-ব্রাউজার সামঞ্জস্যের উপর MDN ওয়েব ডক্স
• ক্রস-ব্রাউজার সামঞ্জস্যের তাত্পর্যের উপর কোডপেপার
• সিএসএস রিসেটে এরিক মেয়ার

বিনামূল্যে কোড শিখুন. freeCodeCamp-এর ওপেন সোর্স পাঠ্যক্রম 40,000-এরও বেশি লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন