CSS তথা Cascading Style Sheet এর জগতে আমরা নতুনই বলা চলে। মাত্রই তো হাতেখড়ি হলো। নতুন হিসেবে কিছু ভুল খুবই কমন।
এটা নিয়ে নিজের করা ভুল ও গ্রুপে ঘাঁটাঘাটি করে অন্যদেরগুলো দেখলাম। সেখান থেকে আজ ৫টি কমন ভুল খুঁজে বের করবো। এগুলো সাধারন হলেও সাইটের লেআউট নষ্ট করে দিতে পারে। মাঝে মাঝে এমন হয় যেন ডিজাইনই কাজ করছে না।
আমরা শুধু ভুলগুলোই বের করবো না। সাথে আতশকাঁচ দিয়ে সমাধানও বের করবো। তাহলে চলুন শুরু করা যাক।
১. Margin ও Padding-এর ভুল ব্যবহার
অনেকে margin এবং padding ব্যবহার করতে গিয়ে কনফ্লিক্ট তৈরি করে ফেলি। বিশেষ করে যখন box-sizing ঠিকমতো সেট করা থাকে না।
ভুল:
.box {
width: 100px;
padding: 10px;
}
এখানে width ১০০ পিক্সেল দেওয়া হলেও, padding যোগ হয়ে আসলে বক্সের আকার ১২০ পিক্সেল হয়ে যাবে! কারন মূল width দুই ডানে ও বামে ১০ পিক্সেলের প্যাডিং যুক্ত হবে।
অনেকটা গ্রামের জমির আইল কাটার কাটিং মাস্টারদের মতো! নিজের জমি ঠিক রেখে পাশের অন্যের জমি থেকে আইল কাটবে।
সঠিক পদ্ধতি:
.box {
box-sizing: border-box;
width: 100px;
padding: 20px;
}
এখন padding যুক্ত করলেও width ১০০ পিক্সেলই থাকবে! অর্থাৎ, মূল কাঠামোর ভেতরেই সবকিছু হবে।
২. Position ব্যবহার করতে গিয়ে এলিমেন্ট লুকিয়ে ফেলা
CSS-এর position: absolute; অনেক সময় ভুলভাবে ব্যবহার করলে এলিমেন্ট হারিয়ে যায়। কখনোবা ঠিক জায়গায় থাকে না।
ভুল:
.child {
position: absolute;
top: 50px;
left: 50px;
}
এখানে child প্যারেন্টের ভিতরে থাকবে কি না, তা নির্ভর করবে প্যারেন্টের position কী সেট করা হয়েছে তার ওপর। parent এ যদি relative করা না থাকে তাহলে কিন্তু খবর আছে! ছাই দিয়েই child-কে ধরতে পারবেন না।
এটা এভাবে ভাবুন যে, parent এর সাথে “relative” মানে আত্মীয়তা না থাকলে অর্থাৎ, ত্যায্য করে দিলে কি আর সেই বাড়িতে থাকতে পারবেন? এটাও এরকম। আগে সম্পর্ক নিশ্চিত করতে হবে।
সঠিক পদ্ধতি:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 50px;
}
এখন child তার parent ডিভের মধ্যেই থাকবে! তাই চিন্তা নেই।
৩. Specificity কনফ্লিক্ট বোঝার অভাব
প্র্যকটিস করার সময় প্রজেক্ট যদি একটু বড় হয় তখন একই এলিমেন্টের ওপর একাধিক CSS রুল প্রয়োগ হয়ে যায়। ব্রাউজারে ইনস্পেক্ট করার সময় দেখা যায় অনেকগুলো এলিমেন্ট মাঝখান দিয়ে কাটা রয়েছে। তাই এখানে স্পেসিফিক রুল প্রয়োগ করতে গিয়ে মাঝেমাঝে কনফ্লিক্ট তৈরি করে।
ভুল:
.button {
color: blue;
}
#submit {
color: red;
}
এখন যদি Click me থাকে, তাহলে color: red; প্রাধান্য পাবে কারণ ID-এর specificity বেশি।
এটা নিয়ে আরেকটি লেখায় বিস্তারিত আলোচনা করবো, ইনশাআল্লাহ।
সমাধান:
একই এলিমেন্টের জন্য বেশি স্পেসিফিক রুল না রাখলে ভালো হয়।
প্রাধান্য বোঝার জন্য CSS Specificity Calculator ব্যবহার করতে পারেন। গুগলে সার্চ দিলেই পাবেন।
৪. z-index কাজ না করা
অনেক সময় z-index ব্যবহার করেও এলিমেন্ট দেখা যায় না, কারণ প্যারেন্ট position সেট করা থাকে না।
ভুল:
.child {
position: absolute;
z-index: 10;
}
এখানে child দেখা নাও যেতে পারে কারণ তার প্যারেন্ট position: static; (ডিফল্ট) রয়েছে।
সঠিক পদ্ধতি:
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: 10;
}
এখন child প্যারেন্টের উপরেই থাকবে! অর্থাৎ, child এর জেড-ইনডেক্স প্যারেন্টের চেয়ে বেশি হতে হবে।
৫. Fixed Height ব্যবহার করে রেসপনসিভ ডিজাইন নষ্ট করা
আমরা স্ক্রিনের সাথে width মিলানোর জন্য কন্টেইনারে width ফিক্সড করে দিই মাঝে মাঝে। অনেক সময় height ও ফিক্সড করে দেই। এটি রেসপনসিভ ডিজাইনের ক্ষেত্রে সমস্যা সৃষ্টি করে।
রেসপনসিভ ডিজাইন নিয়ে আমরা এখনও শিখিনি। গুগল ঘাঁটতে গিয়ে এটি পেয়েছি। তাই আগে ভাগেই জেনে নিই। হয়তো কাজে আসবে।
ভুল:
.container {
height: 500px;
}
এতে মোবাইলে ডিজাইন নষ্ট হয়ে যেতে পারে।
সঠিক পদ্ধতি:
.container {
min-height: 300px;
max-height: auto;
}
এখানে ৩০০ পিক্সেলের চেয়ে হাইট কম হবে না। কিন্তু যত বেশি নিতে পারে। তাই এতে ডিজাইন এডজাস্ট হয়ে যাবে ও রেসপনসিভ থাকবে।
অর্থাৎ,
এই সাধারণ ভুলগুলো আমরা নতুনদের জন্য খুবই স্বাভাবিক। কিন্তু এগুলো সম্পর্কে সচেতন থাকতে হবে। তাহলে আমাদের CSS স্কিল আরও ভালো হবে। আপনার জানা কোনো কমন মিসটেক কমেন্টে শেয়ার করতে পারেন।