প্রতিদিন সকালে আমি উঠি, আয়নায় তাকি, এবং নিজের থেকে জিজ্ঞাসা করি: আমি কি হিপস্টার? এবং যেহেতু উত্তর সবসময় ক্যাটাগরিক্যালি না, আমি জানি জীবনে আমার পছন্দগুলো হবে سुपérieure, এস্থেটিক্যালি এবং ফাংশনালি। তাই যখন আমি আমার ফায়ারফক্স ৭৮ ESR কে ফায়ারফক্স ৯১ ESR-এ রূপান্তরিত होते দেখলাম তার নিরর্থক প্রোটন ইন্টারফেসের সাথে, আমি জানতাম এটা একটি খারাপ দিন হবে।
এখন, ফায়ারফক্স যেকোনো প্ল্যাটফর্মে আমার ডিফল্ট ব্রাউজার পছন্দ, সবসময় ছিল এবং আশা করি সবসময় থাকবে, কিন্তু আমি হিপস্টারোলজি ট্রেন্ডসের সামনে আত্মসমর্পণ করতে চাই না। আমি না একজন শিশু, না আমি প্যাসিফিক ওশন কোস্টের কাছে বাস করি। তাই স্পষ্টতা, কনট্রাস্ট, ভালো স্পষ্ট রঙ। আমি ইতিমধ্যে আপনাকে দেখিয়েছি কিভাবে প্রোটন ননসেনসের অধিকাংশ অনডু করতে হয় একটি ডেডিকেটেড টিউটোরিয়ালে, এখন আমি আপনাকে আরও কিছু টিপস দিতে চাই। ফলো মি।
কন্টেইনার ট্যাবস
যে কথাটি হয়, এই আপগ্রেডের সাথে, ফায়ারফক্সের উইন্ডোজ ভার্সনকে এক্সট্রা স্পেশাল কেয়ার দরকার। এই লिहাজে, আমি কন্টেইনার ট্যাবের একসেন্ট লাইন থেকে খুশি ছিলাম না; এটি ট্যাবের প্রস্থের চেয়ে ছোট রেন্ডার করে, এবং তাই বোকা লাগে। তাই, আমার দিনের প্রথম অর্ডার ছিল একসেন্ট লাইন সরিয়ে ফুল ট্যাব কলার ব্যবহার করা।
.tabbrowser-tab[usercontextid] .tab-context-line {
display: none !important;
উপরের সিএসএস কোডটি, যা আপনাকে userChrome.css-এ যোগ করতে হবে, প্রথম টিউটোরিয়ালে ব্যাখ্যা করা হয়েছে, শুধু কন্টেইনার ট্যাবের একসেন্ট লাইন সরাবে। কন্টেইনার ট্যাবগুলো আরও স্বতন্ত্র করার জন্য, আমি তাদের কনটেক্সচুয়াল কলারকে ব্যাকগ্রাউন্ডে ব্যবহার করি প্লাস একটি উজ্জ্বল লাল টপ বর্ডার একসেন্ট লাইনের বদলে:
.tabbrowser-tab[usercontextid] .tab-background {
background: var(--identity-tab-color) !important;
border-top: 3px solid red !important;
opacity: 0.6 !important;
}
এবং একবার আবার, আপনি যদি একসেন্ট কালার চান, কিন্তু সুন্দরভাবে, আপনি ট্যাব কনটেক্সট লাইন ফাংশনালিটিকে টপ বর্ডার এলিমেন্টের সাথে কম্বাইন করতে পারেন, এবং কন্টেইনার কালারকে ব্যাকগ্রাউন্ডের জন্য ব্যবহার না করে। তাহলে, উপরের দ্বিতীয় ব্লক কোডটি (উপরে) হবে:
.tabbrowser-tab[usercontextid] .tab-background {
border-top: 3px solid var(--identity-tab-color) !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;
}
.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 white !important;
}
ট্যাব সেপারেশন (ন্যাব বার) থেকে ইউআরএলবার সেগমেন্ট
ডিফল্টলি কোনো লাইন নেই, যা বিরক্তিকর। আপনি একটি যোগ করতে পারেন।
#nav-bar {
border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
}
টপ লেফট রো থেকে ট্যাব রো মার্জিনস
আপনি লক্ষ্য করতে পারেন যে ট্যাব রোয়ার লেফট এবং টপ মার্জিনগুলো ইকুইডিস্ট্যান্ট নয়। আপনি ট্যাবস প্লাস ইউআরএলবার ধারণকারী ফ্রেমে একটু লেফট মার্জিন যোগ করে এটি ফিক্স করতে পারেন। ফ্রেমটি ডাকা হয় navigator-toolbox।
#navigator-toolbox {
margin-left: 2px !important;
}
ইউআরএলবার টвиকস
এখানে অনেক পরিবর্তন দরকার। প্রথমে, আমি নিশ্চিত করলাম ইউআরএল-এর সব এলিমেন্ট একই কালারে দেখায়। যেন বলেছি, আমি শিশু নই, এবং আমাকে তিনটি রঙ দরকার নেই যেন বুঝতে পারি আমি কোন ডোমেইন ভিজিট করছি। about:config খুলুন, এবং নিচের সেটিংটি false-এ টগল করুন:
browser.urlbar.formatting.enabled
এরপর, আমি নিশ্চিত করলাম ইউআরএলবার ব্যাকগ্রাউন্ড সাদা, এবং এর বর্ডার আছে। সেই লো-কনট্রাস্ট ননসেন্সের কোনো কিছু নেই।
#urlbar-background {
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
আমি প্যাডিং এবং মার্জিনও একটু চেঞ্জ করলাম, যাতে এটি সুন্দর দেখায় - সম্পূর্ণ কসমেটিক:
#urlbar {
padding-top: 2px !important;
margin-top: 2px !important;
margin-bottom: 3px !important;
}
সার্চ বক্স
এড্রেস বারের ডান পাশের সার্চ বক্সের জন্যও আপনি একই ট্রিক করতে পারেন।
#searchbar {
margin-top: 1px !important;
background-color: white !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
এক্সট্রা কালার
আপনি যদি আমার ব্লু কালার এক্সেন্ট পছন্দ করেন, এবং আপনি চান ইউআরএলবার, সার্চবার এবং ন্যাব বার বর্ডারগুলোর জন্য এটি ব্যবহার করা, তবে আপনি rgba(0, 0, 0, 0.1) এর ইনস্ট্যান্সগুলোকে rgba(10, 132, 255, 0.3) দিয়ে রিপ্লেস করতে পারেন, উদাহরণস্বরূপ। আপনি যেকোনো অপাসিটি ব্যবহার করতে পারেন (চার নম্বরের শেষটি)। উদাহরণস্বরূপ, সার্চবার ডিক্লেরেশন:
#searchbar {
margin-top: 1px !important;
background-color: white !important;
border: 1px solid rgba(10, 132, 255, 0.3) !important;
}
ফলাফল, স্ক্রিনশটস, শান্তি!
চলুন, ভালো ও পরিষ্কার জিনিসগুলো:
কন্টেইনার ট্যাব একসেন্ট লাইন ছাড়া, টপ রেড মার্জিন।
ইউআরএলবার এবং সার্চ বক্স সাদা ব্যাকগ্রাউন্ড, ইউনিফর্ম কালার্ড টেক্সট।
ইউআরএলবার এক্সট্রা প্যাডিং, টপ এবং বটম।
ন্যাব বার লাইন במקום, ট্যাব বর্ডার কালারের সাথে মিলে।
নাইসার টপ-লেফট ট্যাব রো এলাইনমেন্ট, প্লাস এক্সেন্ট কালার (টপ বর্ডার) এক্টিভ ট্যাবে।
ফিরে কন্টেইনার ট্যাব, টপ বর্ডার অ্যাক্সেন্ট লাইন বদলে কনটেক্সচুয়াল কালারে সেট।
এবং কিছু হ্যাপি কালার, সব জায়গায়!
শেষে, মনে করিয়ে দিতে চাই, ডিফল্ট আপনি কি পান:
উপসংহার
এ 여기서। OCD ডেমনরা একবার আর শান্তিতে থাকতে পারে। ফলাফল এখনো পুর্বো ফুল প্রফেক্ট নয়, কারণ পুরো ব্রাউজার ইন্টারফেস কালারিং এবং কনট্রাস্ট (এখনো) ভুল, তবে আমি সবসময় চেষ্টা করেছি পরিবর্তনগুলোর সংখ্যা যতটুকু সম্ভব কম রাখতে, এবং থার্ড-পার্টি টুলসের কোনো ব্যবহার ছাড়া। এটি ফায়ারফক্সকে গরেট করে না, কিন্তু এটি यथেষ্ট ব্যবহারযোগ্য করে তোলে। খুব দুঃখের কথা? আমি এক ঘন্টার নিচে ১০+ এরগোনমিক সমস্যা ফিক্স করতে পেরেছি যা একটি সম্পূর্ণ ডেভেলপমেন্ট টিম সাদা উপেক্ষা করে। এবং কিস জন্য? গ্রে-অন-গ্রে ননসেন্স?
প্রথম টিউটোরিয়ালে উল্লিখিত তথ্য, প্লাস এখানে নতুন জিনিসগুলো দিয়ে, আপনার কাছে একটি ডিসেন্ট ক্রস-প্ল্যাটফর্ম ফায়ারফক্স অভিজ্ঞতার জন্য পর্যাপ্ত সিএসএস টвиক থাকা উচিত। আপনি এইভাবে ভালো ট্যাব সেপারেশন, ভালো কালার, এবং সাদা ব্যাকগ্রাউন্ডের সাথে ইউআরএলবার পেতে পারেন। আশা করি আমি আপনার জীবন কিছুটা সহজ করতে পেরেছি। দুঃখজনক বিষয় হলো, ফায়ারফক্স একমাত্র ব্রাউজার যা আমি সত্যিই ব্যবহার করতে চাই, তাই আমি সেদিনকে ভয় পাই যখন এটি সম্পূর্ণ 쓸모없ে বা কুৎসিত হতে সিদ্ধান্ত নেবে। কিন্তু হে, এটাই ত보는 মডার্ন লাইফ। কিন্তু আমরা আরেকটু লড়াই করেছি। সেন ব্রাউজার ইউজাররা ১, হিপস্টারোলজি ০।
চিয়ার্স।
