১:২৩ PM
আমরা যারা ওয়েব ডিজাইন কাজ করি বা শিকতেছি তারা প্রায় আমাদের কাজটা যখন বিভিন্ন ব্রাউজারে পরীক্ষা করি তখন একই রকম দেখাই না আর এর সংখ্যা একটু মনে হই বেশিই। আর বিশেষত যদি কাজটা একটু বেশি মডার্ন ডিজাইন বা ফিচার্ড থাকে তাহলে হওয়ার স্মভবনা অনেক বেশি !
কিন্তু যদি অতিরিক্ত মডার্ন ডিজাইন/ফিচার্ড দ্বারা কি সাইট তৈরি হয় না এবং সেগুলা কি সকল ব্রাউজারে একই রকম দেখাই না ? অবশ্যই। তবে খুব বেশি ফিচার্ড যুক্ত কাজ সকল প্লাটফর্মে সমান পারফর্মেন্স করানো একটুত কষ্ট সাধ্য বিষয় আমার মতে। এবং ব্যাক্তিগত ভাবে অনেক প্রিমিয়াম থিম যা অনেক বেশি ফিচার্ড যুক্ত ওগুলা পুরাতন ব্রাউজারে চেক করে দেখেছি খুব একটা সুবিধা করতে পারে না।
যাই হোক এটা আমাদের আলোচ্য বিষয় নয়। আজকে মুটামুটি মডার্ন ডিজাইন/ফিচার্ড এবং নরমাল সাইট/টেমপ্লেট কিভাবে ক্রস প্লাটফর্মের জন্যে উপযুক্ত করা যাই তাই দেখবো। আর আমি যা ইনফরমেশন শেয়ার করবো এর ভিতরে কিছু আমার ব্যাক্তিগত মতামতের ভিত্তিরে আর কিছু অনলাইন থেকে নেওয়া তাই আমার ব্যাক্তিগত মতামত থেকে ইনফরমেশন গুলার সাথে যদি কেও একমত না হতে পারেন তাহলে আমি আগেই এই জন্যে দুঃখ প্রকাশ করতেছি এবং সকলকে নিজে ভাল ভাবে জেনে প্রয়োজনে এই গুলা ব্যাবহার করার জনে অনুরোধ করতেছি। তাহলে শুরু করা যাক ঃ-
১. ক্রস ব্রাউজার এর অন্যতম প্রধান বা আমার কাছে প্রথম শর্ত সেটা হল মার্কআপ(HTML) ও স্টাইল(CSS) পরিপূর্ণ ভ্যালিডেশন থাকা। এখানে মার্কআপ(HTML) এ কোন প্রকার এরোর বা ওয়ার্নিং থাকা যাবে না এবং স্টাইল(CSS) এর ক্ষেত্রে ওয়ার্নিং গুলা না হলেও এরোর গুলা অবশ্যই ঠিক করতে হবে এবং আপনার যত স্টাইল(CSS) ফাইল থাকবে সব গুলাই চেক করবেন। এখানে একটা কথা বলে রাখি সকল এরোর বা ভুল কিন্তু এই কাজে ততটা হেল্প করে না তবে এটা একটা স্ট্যান্ডার্ড প্র্যাকটিস এবং সবচেয়ে বড় বিষয় এটা SEO এর জন্যে অনেক সাহায্য করে। কারণ প্রধান সার্চইঞ্জিন গুলা ভ্যালিডেশন রিকমান্ড করে ।
যা দ্বারা করবেনঃ
HTML Validation -> http://validator.w3.org/
or use for html validation for mozila -> https://addons.mozilla.org/en-US/firefox...validator/
CSS Validation -> http://jigsaw.w3.org/css-validator/
2. HTML এবং CSS প্রতিনিয়ত আপডেট হইতেছে এবং তার সাথে পাল্লা দিয়ে ব্রাউজার গুলাও এই সব নতুন নতুন ইন্টারফেস তাদের সাথে যুক্ত করছে। কিন্তু এটা তো পাওয়া যাই নতুন ব্রাউজার গুলাতে কিন্তু পুরাতন ব্রাউজার গুলা কি ভাবে বুজতে পারবে যে এই নতুন কোড গুলো কি এবং এর কাজ কি ? তখন স্বাভাবিক ভাবে সেটা কাজ করা থেকে বিরত থাকবে। আর এই জন্যে আমরা সাধারণত নতুন কোড গুলা CSS বা Javascript দিয়ে তা ব্রাউজারকে বুজানোর চেষ্টা করি। নোটঃ টেমপ্লেটে বা সাইটকে ক্রস বাউজার সাপোর্ট করতে চাইলে খুব খুব বেশি প্রয়োজন না হলে Javascript ব্যাবহার থেকে বিরত থাকতে হবে (ব্যাগ্তিগত মতামত) । আসলে এই বিষয়টা নিয়ে অনেক বিতর্ক আছে তবে আমি এটা সব সময় এড়িয়ে চলি আর এর প্রধান কারণ হল ব্রাউজারে অনেকেই Javascript ইন্টারফেস ডিজাবল করে রাখে বা কারও ব্রাউজারে করা থাকে তখন ওই ইউজারের ব্রাউজারে আপনার কাজটা যদি Javascript দ্বারা হই স্বাভাবিক ভাবে সেটা সেখানে কাজ করবে না এবং এটা সাইটকে অনেক বেশি ভারি করে ফেলে। যাই হোক আমাদের ব্রাউজারকে আমাদের HTML ও CSS নতুত্ত বুজানোর জন্যে CSS ব্যাবহার করা ভাল।
যেমনঃ header, footer, aside, nav, article {display: block;} এগুলা দ্বারা আমরা ব্রাউজারকে জানিয়ে দিলাম যে এই সব এলিমেন্ট সব block এলিমেন্ট। প্রত্যেক বাউজার তাদের নিজের নিজের ধরণ ও তা প্রকাশ ভিন্ন ভিন্ন ভাবে করে থাকে। তাই প্রত্যেক বাউজার এর জন্যে আলাদা আলাদা CSS লিখা অনেক কষ্ট সাধ্যের তাই আমরা সকল ব্রাউজার কে একই behaviour করার জন্যে আমরা আমাদের CSS প্রথমেই একটা বা একগুলা কোড ব্যবহার করে থাকি এগুলাকে Reset Code বলা হইয়ে ত্থাকে। এখন আবার এই জাইগাই অনেক তর্ক বিতর্ক কোন Reset Code টা ভাল। তবে আমার জানা মতে দুইটা রিসেট কোড সবাই তাদের পছন্দের প্রথমে রেখেছে। সেগুলা হল ->
1. Universal Reset Code .কোড *{margin:0;padding:0}
2. Meyer Reset . রিসেট কোড প্যাক http://meyerweb.com/eric/tools/css/reset/
৩. Normalize রিসেট কোড প্যাক http://necolas.github.io/normalize.css/
কিন্তু আমার মতে এবং বর্তমানে অনেক বড় বড় কম্পানি এবং ওয়েব পোর্টাল সবাই Normalize টা বেশি ব্যবহার করতেছে আমি নিজেও করি তাতে পূর্বের থেকে অনেক কম ফিক্সিং করা লাগে সকল ব্রাউজার এর জন্যে, Bootstrap 3, tympanus.net , html5boilerplate ইত্যাদি জনপ্রিয় ফ্রেময়াক এবং সাইট গুলা এই Normalize রিসেট কোডটা বর্তমানে ব্যবহার করে ।
৩. আমাদের টেম্পলেট টা মুটামুটি সব মডার্ন ব্রাউজারেই ভাল ভাবে দেখাই তবে সব চেয়ে বেশি সমস্যা হই ইন্টারনেট এক্সপ্লোরারে। আসলে এর নাম সুনলেই জ্বর এসে যাই । তবে আমি ব্যাগ্তিগত এটাকে ভেলিডেটের হিসাবে ব্যাবহার করি । মানে এখানে আপনার কোন সমস্যা না থাকলে বুজবেন আপনার কাজে কোন বড় রকম ভুল নাই। কিন্তু অনেক সময় সব ঠিক থাকার ও পরেও এটাতে সমস্যা করে বিভিন্ন জাইগাই। আসলে এটাতে অনেক বাগ আছে তার ভিতরে আমি কিছু আলোচনা করবো । আলোচনাই ঠিক না শুধুমাত্র কইটা সাধারন টিপস দিবো যেগুলা অনেক সমস্যার সমাধান অটো মসাধান দিয়ে দিবে আর আলাদা আলাদা ভাবে আলোচনা করতে গেলে সবাই পোস্টটি না পড়েই দৌড় মারবে । টিপস গুলোঃ
#ক্রসব্রাউজার এর জন্যে এই মেটা ট্যাগ অনেক হেল্প ফুল
দুইটাই দিতে হবে । তবে প্রথমটা w3 Validation এ এরোর দেখাই এর কি কারণ আমি অনেক চেষ্টা করেছি জানার তবে তা জানতে পারি নাই। কারও জানা থাকলে দয়াকরে আমাকে অবহিত কইরেন।
# কোড গুলা যতটুকু সম্ভব সিম্পল রাখুন কম div বা কম মার্কআপে যদি কাজ করা যাই তাই করুন এবং কোড গুলা পরিষ্কার রাখুন এবং অপ্রয়োজনীয় কোড ব্যাবহার থেকে বিরত থাকুন। অনেকেই form filed এর কাজ করে নাই তার পরেও সিএসএস এর প্রথমেই তা স্টাইলের জনে ডিক্লার করে রাখে এই গুলা পরিত্যাগ করুন। যেমন কেও তার টেম্পলেট বা ফাইলে কোন filed কাজ করে নাই কিন্তু প্রথমে
input[type=text],input[type=password],input[type=email], textarea{} এভাবে প্রতিনিয়ত ডিক্লায়ার করে রাখে । এটা না প্রয়োজন হলে ব্যাবহার করার কোন কারনই নাই। এরকম অপ্রয়োজনীয় কোড ব্যাবহার থেকে বিরত থাকুন।
যেটা লাগবে সেটাই ব্যাবহার করুন।
# nested elements কম ব্যাবহার এর অভ্যাস করুন। তবে সব nested elements কে আমি বুজাই নাই যেমন ধরেন
কোড:
This is my sentence of text.
এটা একটা খারাপ স্ট্রাকচার । অর্থাৎ গ্রুপিং nested elements ব্যাবহার না করাই ইন্টারনেট ইক্সপ্লোরারের জন্যে ভাল। এটাতে অনেক সময় সমস্যা করে।
# সিএসএস এতে img{border:none} ব্যাবহার করুন এতে ইন্টারনেট এক্সপ্লোরার এর একটা বাগ যেটা অটো png ইমেজের বর্ডার দেখাই টা আর করবে না।
# খুব বেশি প্রয়োজন না হলে ইমেজ html অথবা css দিয়ে রিসাইজ কইরেন না। এটা ইন্টারনেট এক্সপ্লোরার এর পুরাতন ভার্সনে অনেক সমস্যা করে এমনকি আমি একদিন IE9 এবং সাফারি তেও এই জন্যে সমস্যাই পড়েছিলাম। অর্থাৎ আপনি যদি কোন ইমেজ ব্যাবহার করেন তাহলে টা আগে সাইজ করে ব্যাবহার করেন কিন্তু যদি html অথবা css দিয়ে সাইজ করেন তাহলে অনেক সময় টা ইন্টারনেট এক্সপ্লোরে সমস্যা করে । তবে আমার জানা মতে এই html অথবা css দিয়ে ইমেজ রিসাইজ করা সাটের লোদিং ঠিক থাকে এবং এসইওর জন্যেও এটা উপকারি। তবে কিছু পাওয়ার জন্যে কিছু হারাইলে সমস্যা নাই তবে সব সময় এই মেথড ব্যাবহার করার দরকার নাই । যদি কখন ইমেজ সাইজ এর সমস্যা হই IEতে তাহলে মেথডটা ব্যাবহার করবেন।
# আর টেমপ্লেট এর কাজ করার সময় অবশ্যই মডার্ন ব্রাউজার ব্যাবহার করবেন । কারণ তাহলে ওটা একদম স্টান্ডার্ট কোডিং প্র্যাকটিস এবং টা সিউর হতে পারবেন। আর আমার জানা মতে সব চেয়ে মডার্ন ব্রাউজার এর দৌরে মিজিলা সবার আগে আছে তাই এটা ব্যাবহার করেই সাইট এর কাজ করা উত্তম।
# ইন্টারনেট ইক্সপ্লোরারের বাগ গুলা মধ্য অন্যতম হচ্ছে Floating Problem এবং Double Margin on Floated Elements এই সমস্যাই পরে নাই এমন লোক কমই আছে তবে এটা খুব সহজেই সমাধান করা যাই জধুমাত্র যেই div কে Floating করা হই তাতে display:inline and overflow:hidden যুক্ত রাখলেই হবে।
#টেমপ্লেট পরিক্ষার জন্যে যত সম্ভব ব্রাউজার এবং ভার্সন ব্যাবহার করেন আর যেহেতু IE তে সমস্যা বেশি হই তাই সম্ভব হলে এক্তাদিন ভার্সন IE তে চেস্ট করে । আর যেহেতু এক পিসিতে একাধিক ইনটারনেট এক্সপ্লোরার ব্যাবহার করা যাই না তাই এটা http://tredosoft.com/Multiple_IE অথবা http://utilu.com/IECollection/ দ্বারা করতে পারবেন তবে টা বাধ্যতামূলক নই।
#খুব খুব বেশি প্রয়োজন না হলে Lucida ফোন্ট ব্যাবহার করবেন না । আর এটা ব্যাবহার করলে কি সমস্যা হই টা নিজে একটু দেখে নেন IE পুরাতন ভার্সনে।
#ইমেজ এর জন্যে alt tag অবশ্যই ব্যাবহার করবে হবে এটা শুধু সার্চ ইঞ্জিনকেই পড়তে সাহায্য করে না এটা একটা গুড প্র্যাকটিস আর Flash and Javascript ব্যাবহার করা থেকে যত দূর সভব দূরে থাকতে হবে বিশেষত Navigation এ কোন ভাবেই ফ্ল্যাশ ব্যাবহার করা যাবে না ।
#আমাদের গ্রুপে অনেকেই গুগল ফোন্টের নিয়ে অনেক সময় সমস্যা পরার কথা শেয়ার করে তাদের জন্যে বলতেছি আপনারা এখানে একটু চোখ বুলিয়ে নেন কিভাবে আসলে গুগল ফোন্ট কাজ ও ব্যাবহার করা যাই এবং আরও অনেক কিছু। আর কেউ কেউ দেখি css যেই জাইগাই ইচ্ছা @import tag দ্বারা গুগল ফোন্ট ব্যাবহার করেন। আপনারা একটু আনে বানে ব্যাবহার করে এখানে http://jigsaw.w3.org/css-validator একটু চেক করে নিয়ে যে উনারে কি বলে। যাই হোক এটা অবশ্যই প্রথমে কল করাটাই স্টান্ডার্ট।
#আমারা অনেকেই Dreamweaver এবং KompoZer ব্যাবহার করি । আমি অনেক জাইগাই দেখিছি এটা ক্রস ব্রাউজার এর জন্যে নাকি অনেক ভাল। অর্থাৎ অটো Vendor prefix এবং নানা রকম কোড জেনারেট করে এগুলা যতই তাইরে নাইরে কোড জেনারেট করুক না কেন ভাল মানের টেম্পলেট এর ক্ষেত্রে এটা কখনই সম্পূর্ণ রুপে ক্রস ব্রাউজার সাপোর্ট করতে পারে নাই সামনেও পারবে না। যখন পারবে তখন ওয়েব ডিজাইনার আর থাকবে না । সব সফটওয়্যার দিয়েই করা হবে। তাই এই গুলা পরিত্যাগ করুন(ব্যাগ্তিগত মতামত)।
#আরও কিছু ইন্টারনেট এর বাগ এবং তার সমাধান পেতে এই পোস্ট দুইটি পড়ুন অতি মনোযোগ সহিত।
http://net.tutsplus.com/tutorials/html-c...-fix-them/
http://coding.smashingmagazine.com/2010/...ss-coding/
৪. এতক্ষন অনেক স্টান্ডার বিষয় নিয়ে কথা বললাম এখন একটু হাতুড়ে বিষয় নিয়ে কথা বলি আমি এইটারে বলি Hard Way মানে সুজা আঙ্গুলে ঘি না উটলে আঙ্গুল বাকানো। সেটা হল কিন্ডিশনাল মন্তব্য(Conditional Comments/Stylesheet)। অনেকেই এর সাথে পরিচিত তাই বেশি কিছু এটা আলোচনা করবো না। এটা তখনই ব্যাবহার করা উচিত এবং করার নিয়ম যখন আপনি সকল কিছু ঠিক ভাবে করার পরেও সমস্যা করলে তখন কোন শেষ এটা একটা অনেক কার্যকরি একটা পন্থা এবং শেষ পন্থা । আর এটা কি ভাবে ব্যাবহার করতে হবে তার জন্যে এই দুইটা টিউটোরিয়াল যথেষ্ট
1. http://webdesignerwall.com/tutorials/css...t-explorer
2. http://css-tricks.com/how-to-create-an-i...tylesheet/
৫. এখন প্রশ্ন হল সব সমস্যা কি শুধু ইন্টারনেট এক্সপ্লোরারের অন্য ব্রাউজারের কি হই এই সব সমস্যা হই না ? আসলে প্রত্যক ব্রাউজারই বাগ আছে তবে ইন্টারনেট এক্সপ্লোরারের এত বেশি যে তা শুরু করলে শেষ করা সম্ভব না। হ্যা অন্ন ব্রাউজারে ও সমস্যা আছে । এমন অনেক ফিচার্ড আছে যা মজিলাতে একদম ১০০% ঠিক ভাবে শোঁ করে না সেটা আবার অন্য ব্রাউজার যেমন সাফারিতে করে। উদাহারন স্রুপ বলা যাই যে মোবাইল ওয়েব এপ্লিকেশন এবং মোবাইল এর যে কোন কাজ যেমন রেস্পন্সিভ এর জন্যেও সব চেয়ে ভাল ব্রাউজার হচ্চে সাফারি । এটাতে সেই সব এফেক্ট/যেই ভাবে শো করে তা ট্যাবলেট এবং আইপেড এ প্রাই সেম এফেক্ট শোঁ করে যা অন্য ব্রাউজারে পাওয়া সম্ভব না তাই অনেকে মোবাইল কাজ টেস্ট করার জনে এটা ব্যাবহার করে। তবে ওয়েব টেম্পলেট এ তুলনা মূলক একটু কমই পার্থক্য হই তবে অনেক ক্ষেত্রেই হতে পারে । আমি নিজেও এর ভুক্ত ভুগি। এখন কথা হইতেছে ইন্টারনেট এক্সপ্লোরারের এর জন্যে তোঁ কন্ডিশনাল কমেন্টস বা সিএসএস ব্যাবহার করা যাই এগুলা জন্যে কিভাবে ব্যাবহার করা যাই যদি প্রয়োজন হই। আর প্রয়োজন হবে না বললে ভুল আমি যত গুলা বেশি ফিচার্ড কাজ/প্রেক্টিস করেছি তার ৭০%ই একটু না একটু ভিন্নতা পাইছি সেই গুলা ঠিক করার জনেও আমার Hard Way ব্যাবহার করেছি। তবে এই ব্রাউজার গুলার জন্যে ইন্টারনেট এক্সপ্লোরারের এর মত সিএসএস করে ব্যাবহার করা যাই না এটা করতে হলে একটা javascript ফাইল কল করতে হবে তার পরে সিএসএস এ কাজ করতে হবে আর এটা করা অনেক সহজ শুধুমাত্র এই http://rafael.adm.br/css_browser_selector/ টিউটোরিয়ালটা দেখেন তাহলেই পারবেন। আর একটা এখানে যদিও একটা জিনিষ দেওয়া নাই তবে সব দেওয়া থাকবে এটা আশা করা ঠিক না। আর সেটা হল সিলেক্টর এবং আমি যে ভাবে এই সিলেক্টর গুলা ব্যাবহার করি যেমন Chrome এর জন্যে আলাদা ভাবে শুধু chrome না লিখে এভাবে লিখেন webkit, safari, chrome তার পরে তার স্টাইল। তাহলে এক সাথে safari,chrome ও webkit জাতিয় সব ব্রাউজার এর জন্যে একবারে কাজ হইয়ে যাবে যদি আলাদা আলাদা প্রয়োজন হই তাহলে তোঁ কিছু করার নাই তবে আমি আজ পর্যন্ত এদের নিজেদের জাতের মধ্যে যথেষ্ট মিল পাইছি । আর এটা ডাউনলোড লিংক http://github.com/rafaelp/css_browser_se...elector.js
--------------------------------------------------------------------------------------------------------------------------------------
এই গুলা সবই একদম বিগিনার দের জন্যে জানি সবাই এর সম্পর্কে ধারনা আছে তার পরেও নতুন দের জন্যে লিখা আর যদি ভাল সারা পাই তাহলে এর এডভান্স পার্ট টাও তারাতারই দিবো। আর একটা কথা আমি নিজে এখন শিকতেছি তাই এখানে ভুল ইনফরমেশন থাকতেই পারে আর লেখার কথা তো বললামই না বাব দাদার আমলেও লিখি নাই । আর এত বড়তো নাই !! । ভুল হলে ক্ষমা করবেন। আর একটা ছোট্ট কথা আপনারা যারা শিকতে চান তারা w3schools তারে বাদে শিকেন কারণ এখানে এত সহজে সব কিছু শিখান হইয়েছে। মানে অনেক বিস্তারিত বা বলে কোন রকম ছোট ছোট উদাহারন এবং অল্প পরিমাণ বিবরন দিয়ে শুরু চলে গেছে এবং এর থেকে দেখে যারা শিকতেছে তাদের থেকে যারা আবার অন্য জাইগাই নিজেদের জালাই না করে কাজে লেগে বা বলে যে ভাই HTML CSS শেষ করে ফেলেছি। তার কাজে গেলে অনেক সমস্যায় পরে। বই এর মত পিস্টা উলটাইয়ে চলে গেলে নিজেরই ক্ষতি কারান এখানে আপনি কাজ না জানলে পারবেন না আর না পারলে আপনি কি পড়েছেন তারও লাভ হবে না। এটা তো স্কুল এর মত সার্টিফিকেট হলেই সে ভাল ছাত্র হওয়ার কোন যাইগা না। জানি এই বিষয়ে অনেকেই এর তিব্র প্রতিবাদ করবেন। তাই যারা w3schools এর ভক্ত তারা ওখান থেকে শিকেন ওটাও ভাল তবে যদি একবারে শিকতে চান তাহলে সরাসরি প্রত্যক্টা অফিসিয়াল সাইট থেকে শিকুন। যেমন। http://w3.org, http://php.net/, http://jquery.com/ ইত্যাদি। ধন্যবাদ
লেখাঃ লিমন ভাই
কিন্তু যদি অতিরিক্ত মডার্ন ডিজাইন/ফিচার্ড দ্বারা কি সাইট তৈরি হয় না এবং সেগুলা কি সকল ব্রাউজারে একই রকম দেখাই না ? অবশ্যই। তবে খুব বেশি ফিচার্ড যুক্ত কাজ সকল প্লাটফর্মে সমান পারফর্মেন্স করানো একটুত কষ্ট সাধ্য বিষয় আমার মতে। এবং ব্যাক্তিগত ভাবে অনেক প্রিমিয়াম থিম যা অনেক বেশি ফিচার্ড যুক্ত ওগুলা পুরাতন ব্রাউজারে চেক করে দেখেছি খুব একটা সুবিধা করতে পারে না।
যাই হোক এটা আমাদের আলোচ্য বিষয় নয়। আজকে মুটামুটি মডার্ন ডিজাইন/ফিচার্ড এবং নরমাল সাইট/টেমপ্লেট কিভাবে ক্রস প্লাটফর্মের জন্যে উপযুক্ত করা যাই তাই দেখবো। আর আমি যা ইনফরমেশন শেয়ার করবো এর ভিতরে কিছু আমার ব্যাক্তিগত মতামতের ভিত্তিরে আর কিছু অনলাইন থেকে নেওয়া তাই আমার ব্যাক্তিগত মতামত থেকে ইনফরমেশন গুলার সাথে যদি কেও একমত না হতে পারেন তাহলে আমি আগেই এই জন্যে দুঃখ প্রকাশ করতেছি এবং সকলকে নিজে ভাল ভাবে জেনে প্রয়োজনে এই গুলা ব্যাবহার করার জনে অনুরোধ করতেছি। তাহলে শুরু করা যাক ঃ-
১. ক্রস ব্রাউজার এর অন্যতম প্রধান বা আমার কাছে প্রথম শর্ত সেটা হল মার্কআপ(HTML) ও স্টাইল(CSS) পরিপূর্ণ ভ্যালিডেশন থাকা। এখানে মার্কআপ(HTML) এ কোন প্রকার এরোর বা ওয়ার্নিং থাকা যাবে না এবং স্টাইল(CSS) এর ক্ষেত্রে ওয়ার্নিং গুলা না হলেও এরোর গুলা অবশ্যই ঠিক করতে হবে এবং আপনার যত স্টাইল(CSS) ফাইল থাকবে সব গুলাই চেক করবেন। এখানে একটা কথা বলে রাখি সকল এরোর বা ভুল কিন্তু এই কাজে ততটা হেল্প করে না তবে এটা একটা স্ট্যান্ডার্ড প্র্যাকটিস এবং সবচেয়ে বড় বিষয় এটা SEO এর জন্যে অনেক সাহায্য করে। কারণ প্রধান সার্চইঞ্জিন গুলা ভ্যালিডেশন রিকমান্ড করে ।
যা দ্বারা করবেনঃ
HTML Validation -> http://validator.w3.org/
or use for html validation for mozila -> https://addons.mozilla.org/en-US/firefox...validator/
CSS Validation -> http://jigsaw.w3.org/css-validator/
2. HTML এবং CSS প্রতিনিয়ত আপডেট হইতেছে এবং তার সাথে পাল্লা দিয়ে ব্রাউজার গুলাও এই সব নতুন নতুন ইন্টারফেস তাদের সাথে যুক্ত করছে। কিন্তু এটা তো পাওয়া যাই নতুন ব্রাউজার গুলাতে কিন্তু পুরাতন ব্রাউজার গুলা কি ভাবে বুজতে পারবে যে এই নতুন কোড গুলো কি এবং এর কাজ কি ? তখন স্বাভাবিক ভাবে সেটা কাজ করা থেকে বিরত থাকবে। আর এই জন্যে আমরা সাধারণত নতুন কোড গুলা CSS বা Javascript দিয়ে তা ব্রাউজারকে বুজানোর চেষ্টা করি। নোটঃ টেমপ্লেটে বা সাইটকে ক্রস বাউজার সাপোর্ট করতে চাইলে খুব খুব বেশি প্রয়োজন না হলে Javascript ব্যাবহার থেকে বিরত থাকতে হবে (ব্যাগ্তিগত মতামত) । আসলে এই বিষয়টা নিয়ে অনেক বিতর্ক আছে তবে আমি এটা সব সময় এড়িয়ে চলি আর এর প্রধান কারণ হল ব্রাউজারে অনেকেই Javascript ইন্টারফেস ডিজাবল করে রাখে বা কারও ব্রাউজারে করা থাকে তখন ওই ইউজারের ব্রাউজারে আপনার কাজটা যদি Javascript দ্বারা হই স্বাভাবিক ভাবে সেটা সেখানে কাজ করবে না এবং এটা সাইটকে অনেক বেশি ভারি করে ফেলে। যাই হোক আমাদের ব্রাউজারকে আমাদের HTML ও CSS নতুত্ত বুজানোর জন্যে CSS ব্যাবহার করা ভাল।
যেমনঃ header, footer, aside, nav, article {display: block;} এগুলা দ্বারা আমরা ব্রাউজারকে জানিয়ে দিলাম যে এই সব এলিমেন্ট সব block এলিমেন্ট। প্রত্যেক বাউজার তাদের নিজের নিজের ধরণ ও তা প্রকাশ ভিন্ন ভিন্ন ভাবে করে থাকে। তাই প্রত্যেক বাউজার এর জন্যে আলাদা আলাদা CSS লিখা অনেক কষ্ট সাধ্যের তাই আমরা সকল ব্রাউজার কে একই behaviour করার জন্যে আমরা আমাদের CSS প্রথমেই একটা বা একগুলা কোড ব্যবহার করে থাকি এগুলাকে Reset Code বলা হইয়ে ত্থাকে। এখন আবার এই জাইগাই অনেক তর্ক বিতর্ক কোন Reset Code টা ভাল। তবে আমার জানা মতে দুইটা রিসেট কোড সবাই তাদের পছন্দের প্রথমে রেখেছে। সেগুলা হল ->
1. Universal Reset Code .কোড *{margin:0;padding:0}
2. Meyer Reset . রিসেট কোড প্যাক http://meyerweb.com/eric/tools/css/reset/
৩. Normalize রিসেট কোড প্যাক http://necolas.github.io/normalize.css/
কিন্তু আমার মতে এবং বর্তমানে অনেক বড় বড় কম্পানি এবং ওয়েব পোর্টাল সবাই Normalize টা বেশি ব্যবহার করতেছে আমি নিজেও করি তাতে পূর্বের থেকে অনেক কম ফিক্সিং করা লাগে সকল ব্রাউজার এর জন্যে, Bootstrap 3, tympanus.net , html5boilerplate ইত্যাদি জনপ্রিয় ফ্রেময়াক এবং সাইট গুলা এই Normalize রিসেট কোডটা বর্তমানে ব্যবহার করে ।
৩. আমাদের টেম্পলেট টা মুটামুটি সব মডার্ন ব্রাউজারেই ভাল ভাবে দেখাই তবে সব চেয়ে বেশি সমস্যা হই ইন্টারনেট এক্সপ্লোরারে। আসলে এর নাম সুনলেই জ্বর এসে যাই । তবে আমি ব্যাগ্তিগত এটাকে ভেলিডেটের হিসাবে ব্যাবহার করি । মানে এখানে আপনার কোন সমস্যা না থাকলে বুজবেন আপনার কাজে কোন বড় রকম ভুল নাই। কিন্তু অনেক সময় সব ঠিক থাকার ও পরেও এটাতে সমস্যা করে বিভিন্ন জাইগাই। আসলে এটাতে অনেক বাগ আছে তার ভিতরে আমি কিছু আলোচনা করবো । আলোচনাই ঠিক না শুধুমাত্র কইটা সাধারন টিপস দিবো যেগুলা অনেক সমস্যার সমাধান অটো মসাধান দিয়ে দিবে আর আলাদা আলাদা ভাবে আলোচনা করতে গেলে সবাই পোস্টটি না পড়েই দৌড় মারবে । টিপস গুলোঃ
#ক্রসব্রাউজার এর জন্যে এই মেটা ট্যাগ অনেক হেল্প ফুল
দুইটাই দিতে হবে । তবে প্রথমটা w3 Validation এ এরোর দেখাই এর কি কারণ আমি অনেক চেষ্টা করেছি জানার তবে তা জানতে পারি নাই। কারও জানা থাকলে দয়াকরে আমাকে অবহিত কইরেন।
# কোড গুলা যতটুকু সম্ভব সিম্পল রাখুন কম div বা কম মার্কআপে যদি কাজ করা যাই তাই করুন এবং কোড গুলা পরিষ্কার রাখুন এবং অপ্রয়োজনীয় কোড ব্যাবহার থেকে বিরত থাকুন। অনেকেই form filed এর কাজ করে নাই তার পরেও সিএসএস এর প্রথমেই তা স্টাইলের জনে ডিক্লার করে রাখে এই গুলা পরিত্যাগ করুন। যেমন কেও তার টেম্পলেট বা ফাইলে কোন filed কাজ করে নাই কিন্তু প্রথমে
input[type=text],input[type=password],input[type=email], textarea{} এভাবে প্রতিনিয়ত ডিক্লায়ার করে রাখে । এটা না প্রয়োজন হলে ব্যাবহার করার কোন কারনই নাই। এরকম অপ্রয়োজনীয় কোড ব্যাবহার থেকে বিরত থাকুন।
যেটা লাগবে সেটাই ব্যাবহার করুন।
# nested elements কম ব্যাবহার এর অভ্যাস করুন। তবে সব nested elements কে আমি বুজাই নাই যেমন ধরেন
কোড:
This is my sentence of text.
এটা একটা খারাপ স্ট্রাকচার । অর্থাৎ গ্রুপিং nested elements ব্যাবহার না করাই ইন্টারনেট ইক্সপ্লোরারের জন্যে ভাল। এটাতে অনেক সময় সমস্যা করে।
# সিএসএস এতে img{border:none} ব্যাবহার করুন এতে ইন্টারনেট এক্সপ্লোরার এর একটা বাগ যেটা অটো png ইমেজের বর্ডার দেখাই টা আর করবে না।
# খুব বেশি প্রয়োজন না হলে ইমেজ html অথবা css দিয়ে রিসাইজ কইরেন না। এটা ইন্টারনেট এক্সপ্লোরার এর পুরাতন ভার্সনে অনেক সমস্যা করে এমনকি আমি একদিন IE9 এবং সাফারি তেও এই জন্যে সমস্যাই পড়েছিলাম। অর্থাৎ আপনি যদি কোন ইমেজ ব্যাবহার করেন তাহলে টা আগে সাইজ করে ব্যাবহার করেন কিন্তু যদি html অথবা css দিয়ে সাইজ করেন তাহলে অনেক সময় টা ইন্টারনেট এক্সপ্লোরে সমস্যা করে । তবে আমার জানা মতে এই html অথবা css দিয়ে ইমেজ রিসাইজ করা সাটের লোদিং ঠিক থাকে এবং এসইওর জন্যেও এটা উপকারি। তবে কিছু পাওয়ার জন্যে কিছু হারাইলে সমস্যা নাই তবে সব সময় এই মেথড ব্যাবহার করার দরকার নাই । যদি কখন ইমেজ সাইজ এর সমস্যা হই IEতে তাহলে মেথডটা ব্যাবহার করবেন।
# আর টেমপ্লেট এর কাজ করার সময় অবশ্যই মডার্ন ব্রাউজার ব্যাবহার করবেন । কারণ তাহলে ওটা একদম স্টান্ডার্ট কোডিং প্র্যাকটিস এবং টা সিউর হতে পারবেন। আর আমার জানা মতে সব চেয়ে মডার্ন ব্রাউজার এর দৌরে মিজিলা সবার আগে আছে তাই এটা ব্যাবহার করেই সাইট এর কাজ করা উত্তম।
# ইন্টারনেট ইক্সপ্লোরারের বাগ গুলা মধ্য অন্যতম হচ্ছে Floating Problem এবং Double Margin on Floated Elements এই সমস্যাই পরে নাই এমন লোক কমই আছে তবে এটা খুব সহজেই সমাধান করা যাই জধুমাত্র যেই div কে Floating করা হই তাতে display:inline and overflow:hidden যুক্ত রাখলেই হবে।
#টেমপ্লেট পরিক্ষার জন্যে যত সম্ভব ব্রাউজার এবং ভার্সন ব্যাবহার করেন আর যেহেতু IE তে সমস্যা বেশি হই তাই সম্ভব হলে এক্তাদিন ভার্সন IE তে চেস্ট করে । আর যেহেতু এক পিসিতে একাধিক ইনটারনেট এক্সপ্লোরার ব্যাবহার করা যাই না তাই এটা http://tredosoft.com/Multiple_IE অথবা http://utilu.com/IECollection/ দ্বারা করতে পারবেন তবে টা বাধ্যতামূলক নই।
#খুব খুব বেশি প্রয়োজন না হলে Lucida ফোন্ট ব্যাবহার করবেন না । আর এটা ব্যাবহার করলে কি সমস্যা হই টা নিজে একটু দেখে নেন IE পুরাতন ভার্সনে।
#ইমেজ এর জন্যে alt tag অবশ্যই ব্যাবহার করবে হবে এটা শুধু সার্চ ইঞ্জিনকেই পড়তে সাহায্য করে না এটা একটা গুড প্র্যাকটিস আর Flash and Javascript ব্যাবহার করা থেকে যত দূর সভব দূরে থাকতে হবে বিশেষত Navigation এ কোন ভাবেই ফ্ল্যাশ ব্যাবহার করা যাবে না ।
#আমাদের গ্রুপে অনেকেই গুগল ফোন্টের নিয়ে অনেক সময় সমস্যা পরার কথা শেয়ার করে তাদের জন্যে বলতেছি আপনারা এখানে একটু চোখ বুলিয়ে নেন কিভাবে আসলে গুগল ফোন্ট কাজ ও ব্যাবহার করা যাই এবং আরও অনেক কিছু। আর কেউ কেউ দেখি css যেই জাইগাই ইচ্ছা @import tag দ্বারা গুগল ফোন্ট ব্যাবহার করেন। আপনারা একটু আনে বানে ব্যাবহার করে এখানে http://jigsaw.w3.org/css-validator একটু চেক করে নিয়ে যে উনারে কি বলে। যাই হোক এটা অবশ্যই প্রথমে কল করাটাই স্টান্ডার্ট।
#আমারা অনেকেই Dreamweaver এবং KompoZer ব্যাবহার করি । আমি অনেক জাইগাই দেখিছি এটা ক্রস ব্রাউজার এর জন্যে নাকি অনেক ভাল। অর্থাৎ অটো Vendor prefix এবং নানা রকম কোড জেনারেট করে এগুলা যতই তাইরে নাইরে কোড জেনারেট করুক না কেন ভাল মানের টেম্পলেট এর ক্ষেত্রে এটা কখনই সম্পূর্ণ রুপে ক্রস ব্রাউজার সাপোর্ট করতে পারে নাই সামনেও পারবে না। যখন পারবে তখন ওয়েব ডিজাইনার আর থাকবে না । সব সফটওয়্যার দিয়েই করা হবে। তাই এই গুলা পরিত্যাগ করুন(ব্যাগ্তিগত মতামত)।
#আরও কিছু ইন্টারনেট এর বাগ এবং তার সমাধান পেতে এই পোস্ট দুইটি পড়ুন অতি মনোযোগ সহিত।
http://net.tutsplus.com/tutorials/html-c...-fix-them/
http://coding.smashingmagazine.com/2010/...ss-coding/
৪. এতক্ষন অনেক স্টান্ডার বিষয় নিয়ে কথা বললাম এখন একটু হাতুড়ে বিষয় নিয়ে কথা বলি আমি এইটারে বলি Hard Way মানে সুজা আঙ্গুলে ঘি না উটলে আঙ্গুল বাকানো। সেটা হল কিন্ডিশনাল মন্তব্য(Conditional Comments/Stylesheet)। অনেকেই এর সাথে পরিচিত তাই বেশি কিছু এটা আলোচনা করবো না। এটা তখনই ব্যাবহার করা উচিত এবং করার নিয়ম যখন আপনি সকল কিছু ঠিক ভাবে করার পরেও সমস্যা করলে তখন কোন শেষ এটা একটা অনেক কার্যকরি একটা পন্থা এবং শেষ পন্থা । আর এটা কি ভাবে ব্যাবহার করতে হবে তার জন্যে এই দুইটা টিউটোরিয়াল যথেষ্ট
1. http://webdesignerwall.com/tutorials/css...t-explorer
2. http://css-tricks.com/how-to-create-an-i...tylesheet/
৫. এখন প্রশ্ন হল সব সমস্যা কি শুধু ইন্টারনেট এক্সপ্লোরারের অন্য ব্রাউজারের কি হই এই সব সমস্যা হই না ? আসলে প্রত্যক ব্রাউজারই বাগ আছে তবে ইন্টারনেট এক্সপ্লোরারের এত বেশি যে তা শুরু করলে শেষ করা সম্ভব না। হ্যা অন্ন ব্রাউজারে ও সমস্যা আছে । এমন অনেক ফিচার্ড আছে যা মজিলাতে একদম ১০০% ঠিক ভাবে শোঁ করে না সেটা আবার অন্য ব্রাউজার যেমন সাফারিতে করে। উদাহারন স্রুপ বলা যাই যে মোবাইল ওয়েব এপ্লিকেশন এবং মোবাইল এর যে কোন কাজ যেমন রেস্পন্সিভ এর জন্যেও সব চেয়ে ভাল ব্রাউজার হচ্চে সাফারি । এটাতে সেই সব এফেক্ট/যেই ভাবে শো করে তা ট্যাবলেট এবং আইপেড এ প্রাই সেম এফেক্ট শোঁ করে যা অন্য ব্রাউজারে পাওয়া সম্ভব না তাই অনেকে মোবাইল কাজ টেস্ট করার জনে এটা ব্যাবহার করে। তবে ওয়েব টেম্পলেট এ তুলনা মূলক একটু কমই পার্থক্য হই তবে অনেক ক্ষেত্রেই হতে পারে । আমি নিজেও এর ভুক্ত ভুগি। এখন কথা হইতেছে ইন্টারনেট এক্সপ্লোরারের এর জন্যে তোঁ কন্ডিশনাল কমেন্টস বা সিএসএস ব্যাবহার করা যাই এগুলা জন্যে কিভাবে ব্যাবহার করা যাই যদি প্রয়োজন হই। আর প্রয়োজন হবে না বললে ভুল আমি যত গুলা বেশি ফিচার্ড কাজ/প্রেক্টিস করেছি তার ৭০%ই একটু না একটু ভিন্নতা পাইছি সেই গুলা ঠিক করার জনেও আমার Hard Way ব্যাবহার করেছি। তবে এই ব্রাউজার গুলার জন্যে ইন্টারনেট এক্সপ্লোরারের এর মত সিএসএস করে ব্যাবহার করা যাই না এটা করতে হলে একটা javascript ফাইল কল করতে হবে তার পরে সিএসএস এ কাজ করতে হবে আর এটা করা অনেক সহজ শুধুমাত্র এই http://rafael.adm.br/css_browser_selector/ টিউটোরিয়ালটা দেখেন তাহলেই পারবেন। আর একটা এখানে যদিও একটা জিনিষ দেওয়া নাই তবে সব দেওয়া থাকবে এটা আশা করা ঠিক না। আর সেটা হল সিলেক্টর এবং আমি যে ভাবে এই সিলেক্টর গুলা ব্যাবহার করি যেমন Chrome এর জন্যে আলাদা ভাবে শুধু chrome না লিখে এভাবে লিখেন webkit, safari, chrome তার পরে তার স্টাইল। তাহলে এক সাথে safari,chrome ও webkit জাতিয় সব ব্রাউজার এর জন্যে একবারে কাজ হইয়ে যাবে যদি আলাদা আলাদা প্রয়োজন হই তাহলে তোঁ কিছু করার নাই তবে আমি আজ পর্যন্ত এদের নিজেদের জাতের মধ্যে যথেষ্ট মিল পাইছি । আর এটা ডাউনলোড লিংক http://github.com/rafaelp/css_browser_se...elector.js
--------------------------------------------------------------------------------------------------------------------------------------
এই গুলা সবই একদম বিগিনার দের জন্যে জানি সবাই এর সম্পর্কে ধারনা আছে তার পরেও নতুন দের জন্যে লিখা আর যদি ভাল সারা পাই তাহলে এর এডভান্স পার্ট টাও তারাতারই দিবো। আর একটা কথা আমি নিজে এখন শিকতেছি তাই এখানে ভুল ইনফরমেশন থাকতেই পারে আর লেখার কথা তো বললামই না বাব দাদার আমলেও লিখি নাই । আর এত বড়তো নাই !! । ভুল হলে ক্ষমা করবেন। আর একটা ছোট্ট কথা আপনারা যারা শিকতে চান তারা w3schools তারে বাদে শিকেন কারণ এখানে এত সহজে সব কিছু শিখান হইয়েছে। মানে অনেক বিস্তারিত বা বলে কোন রকম ছোট ছোট উদাহারন এবং অল্প পরিমাণ বিবরন দিয়ে শুরু চলে গেছে এবং এর থেকে দেখে যারা শিকতেছে তাদের থেকে যারা আবার অন্য জাইগাই নিজেদের জালাই না করে কাজে লেগে বা বলে যে ভাই HTML CSS শেষ করে ফেলেছি। তার কাজে গেলে অনেক সমস্যায় পরে। বই এর মত পিস্টা উলটাইয়ে চলে গেলে নিজেরই ক্ষতি কারান এখানে আপনি কাজ না জানলে পারবেন না আর না পারলে আপনি কি পড়েছেন তারও লাভ হবে না। এটা তো স্কুল এর মত সার্টিফিকেট হলেই সে ভাল ছাত্র হওয়ার কোন যাইগা না। জানি এই বিষয়ে অনেকেই এর তিব্র প্রতিবাদ করবেন। তাই যারা w3schools এর ভক্ত তারা ওখান থেকে শিকেন ওটাও ভাল তবে যদি একবারে শিকতে চান তাহলে সরাসরি প্রত্যক্টা অফিসিয়াল সাইট থেকে শিকুন। যেমন। http://w3.org, http://php.net/, http://jquery.com/ ইত্যাদি। ধন্যবাদ
লেখাঃ লিমন ভাই
3 মন্তব্য(গুলি):
ভালো লিখেছেন
good
what?
একটি মন্তব্য পোস্ট করুন