[Firefox 96] My userContent.css and userChrome.css Codes isn't Being Applied Anymore
Until yesterday everything I customized for Firefox 89 in June of 2021 and FF 91 in August of 2021 was working fine.
Today I updated to Firefox 96.0 and when I open my Firefox returned to that old visual that I hated
tabs with spaces , but that's not the worst. The worst is the newTab visual that came back to the small and ugly bookmarks of the page we usually navigate. That are set on userContent.css I remember.
I checked some vars at about:config and everything is as it was.
So do I need to set true or false any new var there? These .css files are like they was never read. It looks like to me there is a new var, we need to change it.
What did happen?
- my userChrome.css file content below:
/* Begin - Smart Bookmarks Bar CSS Imports */
@import url("chrome://smartbookmarksbar/skin/global/base.css");
@import url("chrome://smartbookmarksbar/skin/global/mouseover-on.css");
@import url("chrome://smartbookmarksbar/skin/global/hideFoldersNames-on.css");
@import url("chrome://smartbookmarksbar/skin/global/hideNoFaviconNames-on.css");
@import url("chrome://smartbookmarksbar/skin/global/spacing-0.css");
@import url("chrome://smartbookmarksbar/skin/global/autohideBar-off.css");
@import url("chrome://smartbookmarksbar/skin/themes/firefoxDefault.css");
@import url("chrome://smartbookmarksbar/skin/themes/firefoxDefault_mouseover-on.css");
@import url("chrome://smartbookmarksbar/skin/themes/firefoxDefault_mouseover-on_hideNoFaviconNames-on.css");
/* End - Smart Bookmarks Bar CSS Imports */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/*** BEGIN Firefox 77 (June 2, 2020) Override URL bar enlargement ***/
/* Compute new position, width, and padding */
#urlbar[breakout][breakout-extend] {
top: 5px !important;
left: 0px !important;
width: 100% !important;
padding: 0px !important;
}
/* for alternate Density settings */
[uidensity="compact"] #urlbar[breakout][breakout-extend] {
top: 3px !important;
}
[uidensity="touch"] #urlbar[breakout][breakout-extend] {
top: 4px !important;
}
/* Prevent shift of URL bar contents */
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding: 0 !important;
}
/* Do not animate */
#urlbar[breakout][breakout-extend] > #urlbar-background {
animation: none !important;;
}
/* Remove shadows */
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: none !important;
}
/*** END Firefox 77 (June 2, 2020) Override URL bar enlargement ***/
/*** BEGIN Firefox 89 (June 2, 2021) ***/
/* https://github.com/black7375/Firefox-UI-Fix */
@media (-moz-proton) {
/* Toolbar Height */
#TabsToolbar
.toolbar-items, .tabbrowser-tab,
.titlebar-buttonbox-container {
max-height: 34px !important;
}
:root[uidensity=compact] #TabsToolbar,
:root[uidensity=compact] .toolbar-items, .tabbrowser-tab
:root[uidensity=compact] .titlebar-buttonbox-container {
max-height: 30px !important;
}
:root[uidensity=touch] #TabsToolbar,
:root[uidensity=touch] .toolbar-items, .tabbrowser-tab
:root[uidensity=touch] .titlebar-buttonbox-container {
max-height: 42px !important;
}
}
/*** END Firefox 89 (June 2, 2020) ***/
/*** BEGIN Firefox 91 (August, 2021) ***/
/*** Tighten up drop-down/context/popup menu spacing ***/
menupopup > menuitem, menupopup > menu {
padding-block: 3px !important;
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}
/*** END Firefox 91 (August, 2021) ***/
- and my userContent.css file content below:
/*AGENT_SHEET*/ /* Firefox 57+ userChrome.css tweaks ************************************************************/ /* code mostly taken from 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons **********/ /* by Aris (aris-addons@gmx.net)*****************************************************************/ /* Github: https://github.com/aris-t2/customcssforfx ********************************************/ /************************************************************************************************/ /************************************************************************************************* ENABLING options: remove the combination of / and * before @import DISABLING options: add the combination of / and * before @import Some @import features might not work properly on macOS and Linux -> Firefox bug CSS tweaks won't work, if @namespace references are used inside .css files! *************************************************************************************************/ /************************************************************************************************/ /* about:addons *********************************************************************************/ /************************************************************************************************/ /* NOTE: 'Version number for add-ons' will stop working soon, because Mozilla is going *********** to drop XBL support: see https://bugzilla.mozilla.org/show_bug.cgi?id=1397874 **********/ /* version number for add-ons *******************************************************************/ @import url(./css/aboutaddons/addonlists_show_addon_version_number.css); /**/ /* addons page appearance - only use one at a time **********************************************/ @import url(./css/aboutaddons/addons_manager_alternative_appearance.css); /**/ /* @import url(./css/aboutaddons/addons_manager_alternative_appearance_aero.css); /**/ /* <-- AERO colors */ /* compact item lists - only use one at a time **************************************************/ /* @import url(./css/aboutaddons/addonlists_compact.css); /**/ /* @import url(./css/aboutaddons/addonlists_compact_more_compact.css); /**/ /* other settings *******************************************************************************/ /* @import url(./css/aboutaddons/addonlists_only_show_buttons_on_hover.css); /**/ /* @import url(./css/aboutaddons/addonlists_replace_button_labels_with_icons.css); /**/ @import url(./css/aboutaddons/description_page_alternative_content_order.css); /**/ @import url(./css/aboutaddons/recentupdates_category_always_visible.css); /**/ /* @import url(./css/aboutaddons/search_category_always_visible.css); /**/ /************************************************************************************************/ /* about:preferences ****************************************************************************/ /************************************************************************************************/ /* preferences page appearance - only use one at a time *****************************************/ @import url(./css/aboutpreferences/preferences_alternative_appearance.css); /**/ /* @import url(./css/aboutpreferences/preferences_alternative_appearance_aero.css); /**/ /* <-- AERO colors */ /* @import url(./css/aboutpreferences/preferences_alternative_appearance_v2.css); /**/ /************************************************************************************************/ /* about:newtab / about:home ********************************************************************/ /************************************************************************************************/ /* @import url(./css/aboutnewtab/dark_appearance.css); /**/ @media (-moz-proton) { @-moz-document url("about:home"), url("about:newtab") { /** Activity Stream - Search Focus Border: like URL ***********************/ /* At DarkMode, Color */ body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"], body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"] { /* inner */ --newtab-focus-border: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */ --newtab-focus-border-selected: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF */ } /** Activity Stream - Web Site Icon: full size ****************************/ /* Remove Firefox Logo on new Tabs div.logo-and-wordmark { display:none !important; } */ .tile { width: 100px !important; height: 100px !important; } .top-site-icon .rich-icon { width: 100px !important; height: 100px !important; } .top-site-outer .tile .icon-wrapper { width: 100px !important; height: 100px !important; } } } /************************************************************************************************/ /* WEB CONTENT **********************************************************************************/ /************************************************************************************************/ /* top level image on white background (can sometimes cause glitches) - only use one at a time **/ /* @import url(./css/webcontent/toplevel_image_classic_v1.css); /**/ /* @import url(./css/webcontent/toplevel_image_classic_v2.css); /**/ /************************************************************************************************/ /************************************************************************************************/ /************************************************************************************************/
Thanks in advance.
Modified by Marcelo
Chosen solution
Yes, @media (-moz-proton) is no longer supported in Firefox 96. You need to remove the two @media directives (don't forget the closing }) and also check if there is possible code for not (-moz-proton) in files that are imported.
If you still have browser.proton prefs on the about:config page that aren't default then best is to reset them (you can leave browser.proton.toolbar.version).
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
- https://www.userchrome.org/firefox-changes-userchrome-css.html
DISCLAIMER: modifications made through a userChrome.css or userContent.css file can stop working as Firefox evolves in new releases, and can "break" Firefox in serious ways.
Read this answer in context 👍 1All Replies (9)
Hi, it's hard to read code on this site. You can edit your question to put <pre> before and </pre> after the code to improve it a bit.
As a first step, find any instance of this and edit off the first and last lines:
@media (-moz-proton) {
/* various code */
}
But also, consider going back to the sources to check for updates as there may have been additional tweaks since Firefox 89.
jscher2000 said
Hi, it's hard to read code on this site. You can edit your question to put <pre> before and </pre> after the code to improve it a bit. As a first step, find any instance of this and edit off the first and last lines: @media (-moz-proton) { /* various code */ } But also, consider going back to the sources to check for updates as there may have been additional tweaks since Firefox 89.
Thanks for your reply jscher. Maybe you miss understand me, I updated from the last FF version 95, and not from the 89. This customization codes were added on that time. I always use the official mozilla versions.
The screens below show how it was beautiful if the userContent.css code, and how the default firefox bookmarks are now. Smaller, uglier.
Modified by Marcelo
I removed that code and restarted Firefox, nothing happens. In my impression those .css files aren't being read. It's strange because the only thing I did was press download when the mozilla update was requested. I just confirmed they are on the right profile path the only one I have.
I've checked some vars I remember I need to change at that time (june 2021)
Modified by Marcelo
Chosen Solution
Yes, @media (-moz-proton) is no longer supported in Firefox 96. You need to remove the two @media directives (don't forget the closing }) and also check if there is possible code for not (-moz-proton) in files that are imported.
If you still have browser.proton prefs on the about:config page that aren't default then best is to reset them (you can leave browser.proton.toolbar.version).
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
- https://www.userchrome.org/firefox-changes-userchrome-css.html
DISCLAIMER: modifications made through a userChrome.css or userContent.css file can stop working as Firefox evolves in new releases, and can "break" Firefox in serious ways.
Only the media line and it's closure at the end I need to remove it? On each file?
Did you remove the @media (-moz-proton) { from before the following code and the extra } from after it? That works for me (see attached screenshot comparison):
@-moz-document url("about:home"), url("about:newtab") {
/** Activity Stream - Search Focus Border: like URL ***********************/
/* At DarkMode, Color */
body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"] {
/* inner */
--newtab-focus-border: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */
--newtab-focus-border-selected: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF */
}
/** Activity Stream - Web Site Icon: full size ****************************/
/* Remove Firefox Logo on new Tabs
div.logo-and-wordmark {
display:none !important;
}
*/
.tile {
width: 100px !important;
height: 100px !important;
}
.top-site-icon .rich-icon {
width: 100px !important;
height: 100px !important;
}
.top-site-outer .tile .icon-wrapper {
width: 100px !important;
height: 100px !important;
}
}
The third part is using the styles in this post: https://support.mozilla.org/en-US/questions/1338198#answer-1456835
an @media (-moz-proton) {CSS rules} media query is encapsulating a block of CSS rules that only apply when -moz-proton is defined. It was used previously to make the CSS code only work when Proton was enabled (browser.proton.enabled = true). In Firefox 96 Proton is enabled by default and a lot of non Proton code has been removed or can have weird effects, so best is to refrain from using the @media query and older non Proton CSS code. If you got the CSS code from somebody or from a specific webpage then check for a Firefox 96 update.
Thanks jscher2000 after cor-el said I had to remove the @media only the line and the } closure, I outdent the code and it worked fine. Thank you both.
I'm still concerned about what cor-el told that in future can break my Firefox. I hope we receive warnings about it, I don't want to lose customization and I'm a FF user since 2.0 version.
Bottom line is that Firefox changes continuously. userChrome.css and userContent.css rules cannot always be written to handle future changes, so every update brings the potential for breakage. Whether it ruins the UI or just stops working is hard to predict, but you can always restart Firefox in its Safe Mode to work around the file and/or remove/rename it temporarily until that problem can be solved.