ক্রস ব্রাউজার সমস্যা কমাতে ৫ সিএসএস ওয়েব ডিজাইন টিপস

ক্রস ব্রাউজার সমস্যা কমাতে ৫ সিএসএস ওয়েব ডিজাইন টিপস

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

 

নতুন সিএসএস রুলের ক্ষেত্রে অবশ্যই ব্রাউজার প্রিফিক্স দেবেনঃ

মনে হয় বুজতে পেরেছেন। যদি না বুজেন তাহলে দেখেন –
-moz- /* মোজিলা বা যেই ব্রাউজার গুলা এর ইঞ্জিন ব্যাবহার করে সেগুলোর জন্য */
-o- /* অপেরা এর জন্য */
-webkit- /* সাফারি, ক্রোম বা যেইগুলা ওয়েবকিট ইঞ্জিন ব্যাবহার করে */
-ms- /* ইন্টারনেট এক্সপ্লোরার */

এবার নিশ্চয়ই বুজতে পেরেছেন। কিছু নতুন সিএসএস রুল আছে যেইগুলাতে আপনি শুধু একবার দিলেই হবে না সাথে প্রত্যেক ধরনের ব্রাউজার বা ইঞ্জিনের জন্য একই জিনিস আরেকবার প্রিফিক্স যুক্ত করে দেন। যেমন একটা সিএসএস অচ্ছে background:linear-gradient(top, #000000 0%, #252525 100%); এখন এটা সব সাধারন ব্রাউজারেই সাপোর্ট করে তবে একী রকমভাবে নয়। এইটাকে নিচের মত করে লিখতে হবেঃ
background: linear-gradient(top, #000000 0%, #252525 100%);
background: -moz-linear-gradient(top, #000000 0%, #252525 100%);
background: -o-linear-gradient(top, #000000 0%, #252525 100%);
background: -webkit-linear-gradient(top, #000000 0%, #252525 100%);
background: -ms-linear-gradient(top, #000000 0%, #252525 100%);

রিসেট রুল ব্যাবহার করুনঃ

ব্রাউজার বেধে কিছু এইচটিএমএল ইলিমেন্ট এ অটো কিছু স্টাইল জেনারেট হয়। যেমন ধরেন সব ব্রাউজারেই কোন লিস্ট নিলে সেটা তার বামপাশে কিছু padding এবং বেশিরভাগ ক্ষেত্রে উপরে কিছুটা margin ছেড়ে আসে। আবার যেমন ইন্টারনেট এক্সপ্লোরার এর আগের ভার্সন গুলোতে ইমেজ ব্যাবহার করা মাত্র সেটি চারপাশে ১ পিক্সেল বর্ডার (border) দিয়ে দেয়। এই রুলগুলো খুব সাধারন হলেও এইগুলো অচিরেই খুব বড় রকমের সমস্যার সৃষ্টি করে। তো এগুলো ঠিক করতে হবে। এখন কথা হল এইগুলো ব্রাউজার ধরে ধরে ঠিক করলে আপনার অনেক সময় অপচয় হবে এবং বাড়তি অনেক গুলা কোড লিখতে হবে। তার চাইতে ভালো আপনি যদি এই ধরনের স্টাইল গুলো রিসেট করে সরিয়ে দেন। এবং আপনার নিজের মত করে স্টাইলিং করেন। মাত্র একটা উপায়ে আপনি অনেক গুলা স্টাইল রিসেট করতে পারেন আর সেটা হচ্ছে সন্দেহজনক সব ইলিমেন্টে margin, padding, border কে ০ করে দিবেন এবং vertical-align: baseline করে দিবেন। কারন এই চারটি রুলই সাধারনত কোন ইলিমেন্টে অটো প্রয়োগ হয়। নিচের কোডটিই এই জন্য যথেষ্ট

html,body,div,span,applet,object,iframe,h1,h2, h3,h4,h5,h6,p,blockquote,a,abbr,acronym,address, big,cite,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,input,menu, nav,output,ruby,section,summary,time,mark,audio,video {
    border: 0;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
}

padding এবং width যুক্ত হওয়া রোধ করুনঃ

আপনি যখন fixed width এর কোন ইলিমেন্ট এ padding যুক্ত করবেন তখন তা width এর সাথে যুক্ত হয়ে ইলিমেন্ট এর কার্যকর width সেইভাবে বৃদ্ধি করবে। ধরুন, আপনার ইলিমেন্ট এর width যদি হয় 100px এবং আপনি বামে এবং ডানে 10px padding যুক্ত করলেন। এখন যদিও আপনার ইলিমেন্ট এর প্রকৃত width হচ্ছে 100px কিন্তু এটির দৃশ্যমান কার্যকর width হবে 120px; এতে এমন কোন সমস্যা নাই যতক্ষণ পর্যন্ত না আপনি আপনার সাইট রেস্পন্সিভ করার জন্য কোন ইলিমেন্ট এর width শতকরা হিসেবে দিবেন। অর্থাৎ width: 100%; আপনি ১০০% দিয়েছেন জাতে এটি এর পেরেন্ট ইলিমেন্ট এর পুরো জায়গা দখল করে, কিন্তু প্রকৃত পক্ষে কি হবে! এটি পেরেন্ট ইলিমেন্ট এর পুরো জায়গা দখল করে আরও ২০ পিক্সেল বেশি হওয়ার জন্য পেরেন্ট ইলিমেন্ট এর বাইরে চলে যাবে। আপনার ওয়েব ডিজাইন ের কি দশা হবে বুজতেই পারছেন। এথেকে বাছতে নিচের রুলটি ব্যাবহার করুনঃ

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

 

float ক্লিয়ার করতে ভুলে যাবেন নাঃ

এটি খুবই সাধারন কিন্তু গুরুত্বপূর্ণ একটি ওয়েব ডিজাইন টিপস। আপনি হয়তো আগের ইলিমেন্ট এ floating করেছিলেন। মানে নির্দিষ্ট কারনে এটিকে ডানে বা বামে সরিয়ে দিয়েছিলেন। কিন্তু পরের ইলিমেন্টে এসে আপনি তা ভুলে গেলেন। এটি চাইবে আগের ইলিমেন্টের পরে যেদিকেই ফাঁকা জায়গা পাক ঢুকে যেতে। ফলে অনেক কিছু করেও আপনি এই ইলিমেন্ট টিকে আপনার মনের মত করতে পারছেন না। কারন সমস্যা তো আগেই করে এসেছেন। তাই বেশি ঝামেলা দেখলেই প্রথমেই বর্তমান ইলিমেন্টটিতে clear: both; যুক্ত করে নেবেন। তাহলে এটি আর আগের ইলিমেন্টের floating দ্বারা প্রভাবিত হবে না।

 

ভিন্ন ব্রাউজারে অবশ্যই চেক করবেন কিন্তু কিভাবে?

আমার মনে হয় ওয়েব ডিজাইন টিপস যদি বলেন, তাহলে এটির মত কাজের আর বড় একটি টিপস আপনি খুব কমই পাবেন। আপনি ওয়েব ডিজাইন করলেন মোজিলাতে। ক্রোমে চেক করলেন। হয়তো চেক করলেন সাফারিতেও। কিন্তু সবই আপনার উইন্ডোজ মেশিনে। কিন্তু আপনি কি জানেন? সাফারি উইন্ডো তে যে রকম আচরন করে সব ক্ষেত্রে মেকে একধরনের আচরন নাও করতে পারে। তাই মনে রাখবেন সব ধরনের ডিভাইসেও চেক করা চাই। আপনার নেই তো কি হয়েছে। আপনার ক্লায়েন্টের আছে। আবার সবথেকে ভালো উপায় হচ্ছে VM ware এবং Virtual box এ মেক এবং উবুন্টু দুইটাই ইন্সটল দিয়ে রাখা।

Leave a Reply

Your email address will not be published. Required fields are marked *