বছরগুলোর সাথে, সম্প্রতি আরও বেশি, আমি বাধ্য হয়েছিলাম Firefox কেমন দেখাবে এবং behave করবে সেটা পরিবর্তন করার জন্য আমার মেশিনগুলোর ওপর। পূর্বে sane ডিফল্টগুলো পরিবর্তন হয়েছে, প্রায় আর্বিট্রেরিলি, ফাংশনাল ও এস্থেটিক ইনএফিশিয়েন্সি আনার আমার ওয়ার্কফ্লোতে। Australis এবং Proton উক্ত ফেনোমেননের ভালো উদাহরণ।
সাম্প্রতিকভাবে, আমি দুটি খুব ডিটেইলড গাইড পাবলিশ করলাম Firefox 91+ versiónে গ্রে-অন-গ্রে লুক আরো কিভাবে করবেন সেটা নিয়ে। উভয় কেসে, আমি Firefox UI-এর আমার পূর্ব জ্ঞানকে اعتماد করলাম। আমি বুঝলাম অনেক মানুষের জন্য, ইনস্ট্রাকশনগুলো খুব ক্রিপ্টিক হতে পারে। তাই আমি Firefox UI কাস্টমাইজ করার একটি জেনেরিক গাইড তৈরি করতে সিদ্ধান্ত নিলাম, যাতে আপনি যদি একই এক্সারসাইজ করতে চান, এটি ফলো করা খুব কঠিন না হয়।
বেসিক্স
Firefox UI—একভাবে—একটি ওয়েব পেজের মত। এটি ডিফাইন করা হয় স্টাইলিস্টিক রুলসের একটি সিরিজ দ্বারা যা এমবডেড রয়েছে একটি ওয়েব-ভিত্তিক ল্যাঙ্গুয়েজে যাকে CSS বলা হয়। এটি যেকোনো সাইটের মত। ধরি, dedoimedo.com, আপনি যা দেখেন এবং পড়েন সেটা টেক্সট, কিন্তু পেজ কত চওড়া হবে, ফন্টের রঙ, প্যারাগ্রাফের স্পেসিং, এবং সাদৃশ্য, সেটা সব CSS ফাইল দিয়ে সেট করা হয়। একইভাবে, Firefox একইভাবে স্টাইল করা হয়।
আপনি ডিফল্ট রুলস ওভাররাইড করতে পারেন আপনার নিজের তৈরি করে। এটি করা হয় আপনার Firefox প্রোফাইলে একটি নতুন ফাইল যোগ করে। ফাইলের ভেতরে, আপনি নতুন রুল তৈরি (যদি) করবেন যা Firefox UI-এ বিদ্যমান ভিজুয়াল এলিমেন্টগুলিকে প্রভাবিত করবে। এটি কীভাবে করা হয়:
- Firefox খুলুন, অ্যাড্রেস বারে about:support টাইপ করুন।
- খুলা পেজে, টেবিলে "Profile Folder" লাইনটি লোকেট করুন যা প্রদর্শিত হচ্ছে। Open Folder বাটনে ক্লিক করুন। এটি আপনার ফাইল এক্সপ্লোরার লঞ্চ করবে (যে অপারেটিং সিস্টেম আপনি ব্যবহার করছেন), এবং আপনার Firefox প্রোফাইলের লোকেশনে পয়েন্ট করবে। দ্রষ্টব্য, Firefox প্রোফাইল প্রতিটি ব্যবহারকারীর জন্য ইউনিক, তাই আপনাকে প্রতিটি ব্যবহারকারীর জন্য আলাদা পরিবর্তন করতে হবে।
এখন আপনি আপনার Firefox প্রোফাইলের লোকেশন জানেন, একটি ব্যাকআপ তৈরি করুন! আপনি পুরো ফোল্ডার এবং এর সব কন্টেন্টের একটি সিম্পল ম্যানুয়াল কপি করলেই হবে। এইভাবে, যদি কিছুরকম সমস্যা হয়, আপনি জিনিসগুলো আপনার pristine, vanilla বেসলাইনে রিস্টোর করতে পারবেন। যেকোনো বড় পরিবর্তনের আগে এটি করুন।
- Firefox প্রোফাইল ফোল্ডারে, একটি ফোল্ডার তৈরি করুন (যদি না থাকে) chrome নামে (lowercase)।
- এই ফোল্ডারে নেভিগেট করুন, এবং এখানে একটি ফাইল তৈরি করুন userChrome.css নামে (lower/uppercase চ মনে রাখুন)।
- এই ফাইলটি একটি টেক্সট এডিটরে খুলুন।
ডিফল্টভাবে, ফাইলটি খালি থাকবে এবং কিছুই থাকবে না। আমরা এখন এটিকে CSS directives দিয়ে পপুলেট করব, যা Firefox UI-এ বিদ্যমান ভিন্ন ভিজুয়াল এলিমেন্টের লুক (এবং আচরণ) ওভাররাইড করবে। আমি এটি অনেকবার করেছি, তাই আপনি আমার কিছু গাইড রেফারেন্স হিসেবে ব্যবহার করতে পারেন ওয়ার্কফ্লোর বেসলাইনের জন্য। উদাহরণস্বরূপ:
- Plasma HD scaling & Firefox
- Firefox pinned tabs
- Firefox & address bar behavior
অতিরিক্ত গ্রাউন্ডওয়ার্ক
পরিবর্তনগুলো ইফেক্টিভ করতে, আমাদের আরও কিছু জিনিস দরকার:
- অ্যাড্রেস বারে about:config টাইপ করুন। যেকোনো ওয়ার্নিং এক্সেপ্ট করুন প্রসিড করার জন্য।
- about:config পেজের সার্চ বক্সে, legacy সার্চ করুন। নিচের প্রেফারেন্সটি দেখাবে:
toolkit.legacyUserProfileCustomizations.stylesheets
এটাতে ডাবল-ক্লিক করুন এর স্টেট false থেকে true-এ টগল করতে। এটি Firefox-কে আপনার কাস্টম মডিফিকেশন ব্যবহার করতে এবং ব্রাউজারে অ্যাপ্লাই করতে দেবে। এই প্রেফারেন্স টগল না করলে, কোনো UI চেঞ্জ হবে না।
- userChrome.css ফাইলে, যা বর্তমানে খালি, নিচের টেক্সটটি শীর্ষে যোগ করুন:
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
এটি আপনাকে যেকোনো লিগেসি এলিমেন্ট ও ডিক্লেরেশন ব্যবহার করতে দেবে।
- শেষে, আপনাকে CSS এবং এটি কীভাবে কাজ করে সেটা সম্পর্কে কিছু বেসিক আন্ডারস্ট্যান্ডিং থাকতে হবে। এর बिना, আপনি এখানে ব্যাখ্যা করা কনসেপ্টগুলো ধারণ করতে কষ্ট পাবেন। ক্লাসেস, আইডেন্টিফায়ারস, CSS হায়ারার্কি এবং রুলস প্রেসিডেন্সের পুরো কনসেপ্ট, এবং সাদৃশ্য। আমি ভয় পাই কোনো ম্যাজিক্যাল শর্টকাট থাকবে না।
Firefox UI লে আউট
এখন আমাদের কোর ইনগ্রেডিয়েন্ট রয়েছে জিনিসগুলো কাজ করার জন্য। এরপর, আমাদের UI-র সাথে পরিচিত হতে হবে। আমার টিউটোরিয়ালগুলোতে (উপরের লিংকগুলো), আমি .tab-background, #searchbar, #navigator-toolbox, এবং আরও কিছু ব্যবহার করেছি। আপনি বুদ্ধিমত্তাপূর্ণভাবে প্রশ্ন করতে পারেন, আমি কীভাবে এইগুলো জানি, এবং এই ইনফরমেশন কোথায় পাই?
উত্তর সত্যি সিম্পল নয়, আমি ভয় পাই...
এক, আপনাকে রেফারেন্স গাইড দরকার। দুই, আপনি Firefox-এর বিল্ট-ইন Browser Toolbox ব্যবহার করতে পারেন, যা আপনাকে এলিমেন্ট পিক করতে এবং সেগুলো আইডেন্টিফাই করতে দেয়। এটি কিছুটা হার্ড ওয়ার্ক, মনে রাখুন। প্রথমে, ব্রাউজারের মেনু > More Tools > Web Developer Tools-এ ক্লিক করুন। তারপর, যখন এই মেনু খুলবে, দূর ডানে থ্রি-ডট এলিমেন্টে ক্লিক করুন (আরেকটি মেনু) > Settings। অথবা F1 চাপুন। এখানে, আপনাকে ডান কলামের শেষ দুটি অপশন সিলেক্ট করতে হবে: Enable browser chrome... এবং Enable remote debugging। খুব ইনটুইটিভ নয়। এবং hamburger এবং three-dot মেনু একই UI-তে দুটি ভিন্ন জিনিসের জন্য ব্যবহার করা হয় সেটা নিয়ে র্যান্ট করব না।
আরেকটি অপশন হলো শুধু একটি কুইক, ডার্টি ক্র্যাশ কোর্স আমার থেকে, শুধু সবচেয়ে গুরুত্বপূর্ণ UI এলিমেন্টগুলোর ওপর ফোকাস করে। তাই আমি এই অ্যানোটেটেড স্ক্রিনশট বানালাম, আমার Proton গাইডগুলোতে যেসব এলিমেন্ট পরিবর্তন করেছি সেগুলো পয়েন্ট আউট করে।
এখানে (ম্যাগনিফিসেন্ট) সাতটি গুরুত্বপূর্ণ এলিমেন্ট:
- #navigator-toolbox - এটি পেজ নেভিগেশন + ট্যাব বার ধারণকারী ফ্রেম।
- #nav-bar - এটি শুধু navigator-toolbox-এর নিচের আধা (বটম সেকশন)।
- .tabbrowser-tab[selected="true"] - এটি এক্টিভ ট্যাব এলিমেন্ট। স্টেট লক্ষ্য করুন (selected, true)।
- .tabbrowser-tab:not([selected="true"]) - এটি একটি ইনएक্টিভ ট্যাব।
- .tabbrowser-tab[usercontextid] - এটি একটি কন্টেইনার ট্যাব (যদি আপনি containers add-on ব্যবহার করেন)। দ্রষ্টব্য যে আইটেম ৩-৫-এর জন্য, আপনাকে নিচের এলিমেন্টও সম্পর্কে অবগত থাকা উচিত—একটি ক্লাস যেটি .tab-background নামে ডাকা হয়, যা ট্যাব(স)র ব্যাকগ্রাউন্ড এরিয়া স্পেসিফাই করে। আমরা এটিকে ট্যাব-ব্রাউজার-ট্যাব* ডিক্লেরেশনগুলোর সাথে কাঞ্চিতভাবে ব্যবহার করব শীঘ্রই।
- #urlbar - এটি অ্যাড্রেস বার। দ্রষ্টব্য যে #urlbar-background নামক একটি আইডেন্টিফায়ারও রয়েছে, যা ট্যাব ব্যাকগ্রাউন্ড এলিমেন্টের সাথে সাদৃশ্য, এবং যা সার্ভ করে একই উদ্দেশ্যে। একবার আবার, আমরা শীঘ্রই প্রয়োজনীয় উদাহরণ দেখব।
- #searchbar - এটি সার্চ বক্স, আপনি যদি ব্যবহার করেন।
জিনিসগুলো এটোর চেয়ে কিছুটা জটিল, অবশ্যই, কিন্তু এখন, আপনি বুঝতে পারছেন আমরা কোথায় যাচ্ছি। আমি মনে করি সেরা সমাধান হলো কয়েকটি উদাহরণ দিয়ে ডেমো করাতে, যাতে আপনি বুঝতে পারেন কী দেয়।
কিছু বেসিক উদাহরণ
নিচের কোড, userChrome.css-এ যোগ করলে নিচের কাজগুলো করবে:
- এক্টিভ ট্যাবের জন্য, এটি ট্যাবের বড় স্কোয়ার ব্যাকগ্রাউন্ড পিসের বর্ডার সেট করবে।
- টপ বর্ডার ৩px thick হবে, বাম ও ডান ১px thick।
- সেগুলোর রঙও ভিন্ন হবে।
- সাইড বর্ডারগুলো ৩০% ট্রান্সপেরেন্সি থাকবে।
.tabbrowser-tab[selected="true"] .tab-background {
border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
border-right: 1px solid rgba(0, 0, 0, 0.3) !important;
border-top: 3px solid #0a84ff !important;
}
নিচের কোড, userChrome.css-এ যোগ করলে নিচের কাজগুলো করবে:
- ইনएक্টিভ ট্যাবের জন্য, এটি ট্যাব ব্যাকগ্রাউন্ড (ট্যাবের বড় স্কোয়ার ক্যানভাস) নিচের পদ্ধতিতে কনফিগার করবে: একচুয়াল ব্যাকগ্রাউন্ড রঙকে কারেন্ট রঙ (সিস্টেম এক্সেন্ট রঙ) এবং ট্রান্সপেরেন্সি লেয়ারের মিক্সে সেট করবে, sRGB কালার স্পেস ব্যবহার করে, এবং সিস্টেম এক্সেন্ট রঙকে শুধু ৫% অপাসিটি-এ সেট করবে। মূলত, ট্যাবগুলো প্রায় ট্রান্সপেরেন্ট হবে এবং আপনার ব্রাউজারের নেটিভ রঙের সাথে মেলে যাবে।
- একটি খুবই পাতলা ১px (কালো) বর্ডার ৩০% অপাসিটির সাথে তৈরি করবে। !important ক্লজ মানে আপনার রুল সেম এলিমেন্টের ওপর অ্যাপ্লাই হওয়া যেকোনো অন্য রুলের চেয়ে প্রেসিডেন্স নেবে।
.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
background-color: color-mix(in srgb, currentColor 5%, transparent);
border: 1px solid rgba(0, 0, 0, 0.3) !important;
}
নিচের কোড, userChrome.css-এ যোগ করলে নিচের কাজগুলো করবে:
- এটি কিছুটা ইনডেন্ট করবে (আন্তরে ঠেলে দেবে) ট্যাবগুলো ২px মার্জিন বাম পাশে যোগ করে। অন্য কথায়, এটি ব্রাউজার উইন্ডোর এজ এবং ট্যাবের মাঝপথে একটু এক্সট্রা ডিস্ট্যান্স তৈরি করবে।
#navigator-toolbox {
margin-left: 2px !important;
}
তারপর, আরও আছে...
নিচের কোড, userChrome.css-এ যোগ করলে নিচের কাজগুলো করবে:
- এটি urlbar-এর ব্যাকগ্রাউন্ডকে pure white-এ সেট করবে, একটি পাতলা ৩০%-অপেক বর্ডারের সাথে যা এক্টিভ ট্যাবের এক্সেন্ট রঙের সাথে মেলে (আগে স্পেসিফাইড)। আপনার পূর্ণ আর্টিস্টিক ফ্রিডম রয়েছে এখানে।
#urlbar-background {
background-color: white !important;
border: 1px solid rgba(10, 132, 255, 0.3) !important;
}
অবশ্যই, আরও অনেক কিছু রয়েছে! কিন্তু এই উদাহরণগুলো আপনাকে শুরু করতে দেবে, আমি মনে করি।
উপসংহার
এটা খুব জটিল ছিল, আমি মানি। আমি চেয়েছিলাম Firefox UI এডিট করার একটি সিম্পলার উপায় থাকুক, কিন্তু দুর্ভাগ্যক্রমে, আপনি যদি Firefox-এর ডিফল্ট লুকসহ খুশি না হন, এবং আপনি বেসিক কাস্টমাইজেশনের বাইরে যেতে চান, তবে আপনাকে CSS নলেজ, CSS ফাইল, এবং রুলসের একটি বান্ডেল দরকার। এই গাইড আউটলাইন করে কীভাবে আপনি সেটা অর্জন করতে পারেন, ব্রাউজারের ইন্টারফেসের প্রতিটি স্পেসিফিক ডিটেইলে না যেতে।
আমি পুরোপুরি অবগত যে এটি একটি তुच্ছ টাস্ক নয়। CSS "সহজ" লাগে তাদের কাছে যারা জানেন কীভাবে ব্যবহার করতে হয়, কিন্তু এটি অভাবও সৃষ্টি করে, যাভাবেই, সাধারণ মানুষ সিম্পল এরগোনোমিক সমাধান খুঁজে। আমি মনে করি সঠিক পথ হলো কিছুটা টাইম ইনভেস্ট করা এবং এই লিংগো মাস্টার করা, যেটি আপনাকে UI-তে প্রয়োজনীয় অ্যাডজাস্টমেন্ট করার স্বাধীনতা দেয়, আrbitrary ডিসিশনের ওপর নির্ভর না করে। আমি চাই Mozilla बेटার চয়েস নেয়, কিন্তু হে, এই সব 넌সেন্স Firefox-এ পাইলেও, এটি এখনও সেরা ব্রাউজার, এটি আপনাকে ইন্টারফেস পরিবর্তন করতে দেয়, এবং এটি সেটি ব্রাউজার যা আপনাকে আপনার ডেস্কটপ এবং মোবাইলে ব্যবহার করা উচিত। এটি একমাত্র জিনিস যা ইন্টারনেটকে বরাবর ইউজেবল রাখে, এবং আপনি Firefox ছাড়া ভবিষ্যত পছন্দ করবেন না। তাই CSS ধরে নিন, অনুযায়ী রিমুভ করুন, এবং Firefox ব্যবহার চালিয়ে যান। আমরা এখানে শেষ।
চিয়ার্স।
