অনেক সময়ই দেখা যায় বহুল ব্যবহৃত কোন সাইটের ডিফল্ট ডিজাইনে সমস্যা হচ্ছে ব্রাউজ করতে।
আমার ক্ষেত্রে যেটা হয় যে ফেসবুকের ফন্টগুলা একটু বেশিই ছোট লাগে। এমনিতেই চোখে দেখি না ঠিকঠাক মত।
এজন্য সবসময় ফুল পেজ জুম করেই কাজ চালাতাম। কিন্তু টেক্সটগুলা জুম হওয়ার সাথে সাথে ইমেজ এবং ভিডিওগুলাও জুম হয়ে যাচ্ছে। দেখতে খারাপ লাগে।
তো ঘন্টাখানেক আগে বসেছিলাম এইটার একটা বিহিত করার জন্য। অনেকেই হয়তো জানেন আমার ডিফল্ট ব্রাউজার ফায়ারফক্স।
আমি এটুকু মাথায় রেখেছিলাম যে, JS ইউজার স্ক্রিপ্ট দিয়ে এটা করা যাবেই। কিন্তু এই ছোট্ট একটু কাজের জন্য গ্রীজমানকি ইন্সটল করতে মনে চাচ্ছিল না। তাই আল্টারনেটিভ খোজা শুরু করলাম। কিন্তু মাথায় আর কিওয়ার্ড ঢুকতেছিল না। গুগলও আমাকে সার্ভার সাইড ভাস ক্লায়েন্ট সাইড স্ক্রিপ্টিং বোঝানো শুরু করে দিয়েছিল! Image may be NSFW.
Clik here to view.
কিছুক্ষণ খোজাখুজির পর পেয়ে গেলাম আমার কাংখিত জিনিস খানা। ফায়ারফক্সের userCSS।
তো শুরু হয়ে যাক। প্রথমেই আপনার ফায়ারফক্সের প্রোফাইল ফোল্ডারটা খুজে বের করুন। এরপর এর ভেতরে থাকা chrome ফোল্ডারের ভিতরে userContent.css নামে একটা ফাইল বানিয়ে ফেলুন।
এবার ফাইলখানা আপনার প্রিয় যে কোন টেক্সট/কোড এডিটর দিয়ে ওপেন করে সিএসএস লেখা শুরু করে দিন। এই ফাইলটায় আপনি যা লিখবেন ব্রাউজার সবকিছুর উপর সেটাকেই প্রাধান্য দিবে।
আপাতত টেস্ট করার জন্য বাবরীয় গো হাইপার মেথড ফলো করুন। Image may be NSFW.
Clik here to view.
body {
font-size: 150px;
}উপরের কোডটুকু userContent.css ফাইলটায় লিখে সেভ করুন।
ফায়ারফক্সের সকল ইন্সট্যান্স ক্লোজ করে রিওপেন করুন।
যে কোন একটা ওয়েব পেজ লোড দিন এবং দেখুন আপনার ডিজাইনের কিরকম সাড়ে বারোটা বাজাইছি। Image may be NSFW.
Clik here to view.
খালি আপনারটা না, গুগলে যান দেখেন গুগলেরও সাড়ে বারোটা বাজাইয়া দিছি। Image may be NSFW.
Clik here to view.
সাড়ে বারোটা এজন্যই যে আপনার ডেভেলপার টুলসও এইডা ঠিক করতে ফেইল হয়া যাইব। Image may be NSFW.
Clik here to view.
আপনিঃ মিয়া আপনি কইলেন, যে কোন সাইট আর এখন তো দেখি সব সাইটেরই দফারফা অবস্থা Image may be NSFW.
Clik here to view.
আমিঃ Image may be NSFW.
Clik here to view.ভালা কথা, এখন কিতা করুম? খারান গুগল করি..........
...............................................................................................................................................................................................................................................................................................................
ইউরেকা..মিল গিয়া...
ঠিক আছে এইবার তাইলে সিএসএস এইভাবে লেখেন দেখিঃ
@-moz-document domain(www.facebook.com) {
body {
font-size: 150px;
} }সেভ করেন, ফায়ারফক্স রিস্টার্ট করেন। এবার ফেসবুক লোড করেন আর মজা দেখেন।
টেস্ট করাইয়া দিছি, এইবার বাকিটা আপনি লেইখা নেন গিয়া, আমি পারুম না। Image may be NSFW.
Clik here to view.
নোটসঃ
যারা ঝামেলায় যেতে চান না, তারা এই এডঅনটা ব্যবহার করতে পারেন।
অন্যান্য ব্রাউজারেও এই কাজ করা যায়, তবে মেথডটা আলাদা। আপনার ব্রাউজারেরটা আপনি খুজে বের করুন।
টপস ফর ওয়েব ডিজাইনারগণঃ কখনো ফায়ারফক্স হ্যাকের দরকার হইলে @-moz-document ব্যবহার করতে পারেন। নো মোর ব্রাউজার ডিটেকশন।
কাজ কাম শেষ। এবার ফাইজলামি। Image may be NSFW.
Clik here to view.
মনের মাধুরী মিশিয়ে অথরিটি সাইটের ডিজাইন চেঞ্জ করে আশেপাশের মানুষের সামনে VIP সাজতে পারেন।
বাবরীয় গো হাইপার মেথড দিয়ে বন্ধুদের সাথে মজাও নিতে পারেন।