ক্রস ব্রাউজার কি, কেন ,এবং ক্রস ব্রাউজার সাপোর্ট করানোর জন্য কিছু টিপস—- ক্রস ব্রাউজার কি→ ক্রস ব্রাউজার বলতে সহজে বলা যায় যে ওয়েব-অ্যাপ্লিকেশান বা আমাদের করা কাজ গুলো সকল ব্রাউজার এর সকল ভার্সনে সঠিক ভাবে দেখানোকে। যদি তা সঠিকভাবে না দেখায় তাহলে বুঝতে হবে আমাদের করা কাজ গুলো ক্রস ব্রাউজার কম্পাটিবল নয়। ক্রস ব্রাউজার কেন ব্রাউজার কম্পাটিবল সমস্যা হয়→ ধরুন,আমরা এইচটিএমএল ৫ ভার্সন এবং সিএসএস ৩ দিয়ে একটা ওয়েবসাইট করলাম এবং সঠিক ভাবে সকল তথ্যও দিলাম, কিন্তু সেটি যদি আমরা গুগল ক্রম এর 1.0.154 ভার্সনটিতে চালু করি তাহলে দেখব গুগল ক্রম আমাদের সাইটটিকে সঠিক ভাবে দেখাতে পারছে না। কারন এইচটিএমএল ৫ ভার্সন অথবা সিএসএস ৩ আবিস্কার হবার আগেই গুগল ক্রম 1.0.154 ভার্সনটির জন্ম হয়েছে। তাই স্বাভাবিকভাবেই সে এইচটিএমএল ৫ ভার্সন এবং সিএসএস ৩ এর নতুন কোডগুলো সম্পর্কে অবগত নয়। যার ফলে গুগল ক্রম এইচটিএমএল এবং সিএসএস এর যেসব কোড সম্পর্কে অবগত সেগুলোই সে সঠিক ভাবে দেখাচ্ছে আর বাকি নতুন বিষয় গুলো সে ঠিক ভাবে দেখাতে পারছে না। উপরের উদাহরনটি শুধুমাত্র গুগল ক্রম দিয়ে বুঝানো হল, তাছাড়া এ ধরনের সকল পুরাতন ব্রাউজার এর ক্ষেত্রেই এ রকম সমস্যা কম-বেশি হয়ে থাকে। শুধু পুরাতন ব্রাউজার হলেই যে ক্রস ব্রাউজার সমস্যা হয় তা নয়, সকল ব্রাউজারই তার নিজস্ব ধর্ম অনুযায়ী চলে,আর এই সব ব্রাউজারে বিভিন্ন ধরনের বাগ থাকার কারনে তারা আমাদের সাইটটিকে বা কোড গুলোকে পুরোপুরি সঠিক ভাবে দেখাতে পারে না। কিন্তু পরবর্তীতে ব্রাউজার এর বাগ গুলো ফিক্স করে নতুন ভার্সন বের করলে ব্রাউজার গুলো আমাদের সাইটটিকে পূর্বের তুলনায় সঠিক ভাবে দেখাতে সক্ষম হয়। এই সমস্যা গুলো মুলত মাইক্রোসফট এর ইন্টারনেট-এক্সপ্লোরার (IE) এ বেশি দেখা দেয়। কারন এই ব্রাউজারটি অন্যান্য ব্রাউজার এর তুলনায় আপডেট কম হয়, এবং কোডিং এর সচ্ছতার ব্যাপারে এই ব্রাউজারটি খুবই কঠোর। তাই কোডিং এ আমাদের কোন ভুল হলে বা ভুলে আমরা যদি কোন তথ্য না দেই তাহলে ইন্টারনেট-এক্সপ্লোরারে ক্রস ব্রাউজার সমস্যায় পরতে হয় আমাদের। তাছাড়া ইন্টারনেট-এক্সপ্লোরার এর নিজস্ব কিছু বাগ থাকার কারনেও ক্রস ব্রাউজার সমস্যায় পরতে হতে পারে আমাদের। নিচে ক্রস ব্রাউজার সাপোর্ট করানোর জন্য কিছু টিপস দেয়া হল→ ১. ক্রস ব্রাউজার সাপোর্ট করানোর জন্য অন্যতম প্রধান শর্ত হল আমাদের এইচটিএমএল ডকুমেন্ট ও সিএসএস ডকুমেন্ট গুলো পরিপূর্ণভাবে w3c ভ্যালিডেট থাকা। যেভাবে ভ্যালিডেট করতে হবে→ এইচটিএমএল ডকুমেন্ট ভ্যালিডেট এর জন্য ⇒ এখানে ভিসিট করুন সিএসএস ডকুমেন্ট ভ্যালিডেট এর জন্য ⇒ এখানে ভিসিট করুন → W3C ভ্যালিডেশন সম্পর্কে আরও বিস্তারিত জানতে ⇒ এখানে ভিসিট করুন ২. আমাদেরকে অবশ্যই সঠিক ডকটাইপ ডিকলার করতে হবে। কারন সঠিক ডকটাইপ ব্রাউজারকে বলে যে আমাদের কোডটি আমরা কোন রুলে/ভার্সনে ব্যাবহার করছি , এবং ব্রাউজার সে অনুযায়ী ভিসিটরকে আমাদের ওয়েবসাইটটি রেন্ডার করে দেখাবে। → আমরা ডকটাইপ কোথা থেকে পাব/ডিকলার করবো তা জানতে ⇒ এখানে ভিসিট করুন সংক্ষেপে ডকটাইপ কি→ Doctype এর পুর্ণরুপ হচ্ছে Document Type । এইচটিএমএল ফাইল ব্রাউজারে লোড হলে ডকটাইপ সহজেই তা ইন্টারপ্রেট করতে পারে। একটি ডকুমেন্টের শুরুতেই অবশ্যই ডিকলার করতে হবে, কারন এর দ্বারা ব্রাউজার সহজেই বুঝতে পারে যে আমাদের ডকুমেন্টটি HTML/ XHTML এর কোন ভার্সনে লেখা হয়েছে। ৩. ডিফল্টভাবে ব্রাউজার গুলো তাদের নিজস্ব সিএসএস রুল অনুযায়ী আমাদের ওয়েবসাইটটিকে দেখায়, আর তাই আমরা সকল ব্রাউজারকে একই বিহেভিয়র (behavior) করার জন্যে বা আমাদের করা ওয়েব ডিজাইনটি সঠিক ভাবে দেখানোর জন্য CSS এ প্রথমেই কিছু কোড ব্যবহার করে থাকি যাদেরকে Reset Code বলা হয়। যেমনঃ *{margin:0;padding:0} → এখানে সিএসএস রিসেট কোড গুলোর কিছু সোর্স দেয়া হল ⇒ Css reset codes ৪. এইচটিএমএল এ কিছু কিছু ট্যাগ বাতিল বা deprecated করা হয়েছে সেসব ট্যাগ গুলা ব্যাবহার করা থেকে বিরত থাকতে হবে। যেমনঃ এইচটিএমএল ৪.০১ এর ট্যাগটি সকল আপডেটেড ব্রাউজার গুলোতে এখন আর দেখায় না। এইচটিএমএল এর Deprecated ট্যাগ এবং অ্যাট্রিবিউট গুলো সম্পর্কে একটি রিসোর্স পাবেন⇒ এখানে ৫. আমাদের এমন ধরনের ফন্ট ব্যাবহার করতে হবে যা সকল ভিজিটর এর কম্পিউটারে থাকে। যেমনঃ ’sans-serif’ । অন্যথায় ভিন্ন ধরনের ফন্ট ব্যাবহার করতে হলে বা যেসব ফন্ট ইউজার এর কম্পিউটার এ না থাকার সম্ভাবনা বেশি সেসব ফন্টগুলো গুগল এর ‘গুগল ফন্ট’ সেবার মাধ্যমে ব্যাবহার করা সর্বাধিক উত্তম। ৬. ব্রাউজার গুলো সাধারনত তাদের নিজস্ব রুল বা ধর্ম অনুযায়ী লাইন-হাইট, ফন্ট-সাইজ, ফন্ট-ফ্যামিলি, ইত্যাদি দেখিয়ে থাকে, তাই ক্রস ব্রাউজার সমস্যায় না পরার জন্য সিএসএস এ আমদেরকে অবশ্যই লাইন-হাইট, ফন্ট-সাইজ, ফন্ট-ফ্যামিলি, ইত্যাদি নির্দিষ্ট করে দিতে হবে। ৭. ক্রস ব্রাউজার সাপোর্ট করানোর জন্য প্রয়োজন ছাড়া কোন ধরনের স্ক্রিপ্ট ব্যাবহার যেমনঃ জাভাস্ক্রিপ্ট ব্যবহার না করাই উত্তম। কারন ভিসিটর এর ব্রাউজারে জাভাস্ক্রিপ্ট ডিফল্ট ভাবে অথবা ইউজার নিজেই তা ডিজেবল করে রাখতে পারে। তাছাড়া, জাভাস্ক্রিপ্ট এর ফলে সাইট loading এ কিছুটা দেরি হতে পারে। ৮. সিএসএস এ ইমেজের সাইজ কত বাই কত হবে তা উল্লেখ করে দেয়া উত্তম এবং এইচটিএমএল এ ইমেজ ট্যাগ এর মধ্যে অবশ্যই alt অ্যাট্রিবিউট ব্যাবহার করা। তাছাড়া, ইমেজ () ট্যাগ এর জন্য সিএসএস এ {border:none} property ব্যাবহার করা । ৯. সিএসএস৩ প্রিফিক্স করানোর উপায় → সিএসএস প্রিফিক্সার (prefixer) কি → সিএসএস প্রিফিক্সার (prefixer) হল এমন এক ধরনের পদ্ধতি যা সিএসএস ৩ এর নতুন features গুলো সম্পর্কে ব্রাউজারকে জানান দেয়। সিএসএস প্রিফিক্স করতে হলে আমাদেরকে ব্রাউজারের রেন্ডারিং (rendering) ইঞ্জিন এর কোড গুলো সম্পর্কে জানতে হবে। বিভিন্ন ব্রাউজারের রেন্ডারিং (rendering) ইঞ্জিনের কোডগুলো বিভিন্ন ধরনের হতে পারে। যেমন- -webkit- এই কোডটি Google Chrome, Safari, Opera,ios, Android ইত্যাদি ব্রাউজারের প্রিফিক্সার হিসেবে কাজ করে, -moz- এই কোডটি mozilla ব্রাউজারের প্রিফিক্সার হিসেবে কাজ করে, -ms- এই কোডটি ইন্টারনেট এক্সপ্লোরার ব্রাউজারের প্রিফিক্সার হিসেবে কাজ করে, উদাহরণ⇒ ধরি , Mozilla, Chrome, Safari,Opera, IE, ইত্যাদি ব্রাউজারের লেটেস্ট ভার্সনগুলোতে সিএসএস ৩ এর transition: all 4sease; এই প্রপার্টি টি কাজ করছে না বা ঠিকভাবে শো করছে না। তাহলে এটি ঠিক ভাবে দেখানোর জন্য আমাদেরকে ব্রাউজারের রেন্ডারিং ইঞ্জিনের কোড গুলো ব্যাবহার করে সিএসএস প্রিফিক্স করতে হবে। যেভাবে প্রিফিক্স করতে হবে → transition:all 4s ease; -moz-transition: all 4s ease; -webkit-transition: all 4s ease; -ms-transition: all 4s ease; অর্থাৎ,আমাদের সিএসএস ৩ এর যে প্রপার্টি টি ব্রাউজারে কাজ করছে না সেটি কাজ করানোর জন্য আমাদেরকে ঐসব ব্রাউজারের রেন্ডারিং ইঞ্জিন এর কোড গুলো দিতে হবে। এখানে -webkit- , -moz- , -ms- , এগুলো হল বিভিন্ন ব্রাউজারের রেন্ডারিং ইঞ্জিন কোড। সিএসএস প্রিফিক্স সম্পর্কে আরও জানতে ⇒ এখানে ভিসিট করুন আপনারা হয়তো ভাবছেন সিএসএস ৩ এর এতগুলো কোড লিখতেই সময় চলে যায় ,আবার প্রিফিক্স করতে তো আরও ২ গুন বেশি সময় লেগে যাবে। তাই, আপনাদের সময় কমানোর জন্য এবং সহজে cross browser compatible করার জন্য নিচে একটি সাইটের ঠিকানা দিলাম, এখানে আপনারা আপনাদের stylesheet(CSS) এর সকল কোড গুলো কপি-পেস্ট করুণ এবং প্রয়োজনীয় option সিলেক্ট করে “ prefix ” বাটন এ ক্লিক করলেই আপনি প্রিফিক্সড (prefixed) কোডটি পেয়ে যাবেন। সাইটের ঠিকানা ⇒ prefixmycss ১০. সিএসএস ৩ এর বিভিন্ন কোড গুলো ইন্টারনেট-এক্সপ্লোরার (IE) 6 - 9 ভার্সন পর্যন্ত সহজেই ক্রস ব্রাউজার কম্পাটিবল করার জন্য এ সাইটটি খুবই উপযোগী ⇒ css3pie ১১. সিএসএস ৩ এর border-radius, box-shadow ইত্যাদি প্রোপার্টিকে (property) ম্যানুয়ালি জেনারেট করার জন্য নিচের সাইট গুলো খুবই উপযোগী - ⇒ border-radius generator ⇒ box-shadow generator ১২. এইচটিএমএল, সিএসএস এর বিভিন্ন কোড গুলো কোন কোন ব্রাউজারে সাপোর্ট করবে আর কোন কোন ব্রাউজারে সাপোর্ট করবে না তার একটি চমৎকার তালিকা পাবার জন্য নিচের সাইটটিতে ভিসিট করুন। সাইটের ঠিকানা ⇒ Caniuse → ক্রস ব্রাউজার কম্পাবিলিটি টেস্ট করার জন্য কিছু রিসোর্স--- 1. Cross Browser Testing resources 2. Browsershots 3. IE Tester
Posted on: Thu, 25 Dec 2014 18:26:04 +0000
Trending Topics
Recently Viewed Topics
© 2015