[CSS] 地址栏下拉列表毛玻璃效果

Firefox  版本70或以上

使用方式：
将下面代码复制粘贴进 配置目录/chrome/userChrome.css 文件中。（没有则手动创建这些文件夹或文件）
FF76 及之前的版本使用如下样式

@-moz-document url("chrome://browser/content/browser.xhtml") {
        #urlbar.megabar[breakout]:not([breakout-extend])[open],/*FF 70*/
        #urlbar.megabar[breakout-extend] > #urlbar-background,/*FF 72*/
        .urlbarView:not(.megabar){
                background: rgba(255,255,255,.7) !important;
                backdrop-filter: blur(4px);
        }
        /*暗色主题*/
        #urlbar.megabar[breakout]:not([breakout-extend])[open]:-moz-lwtheme-brighttext,/*FF 70*/
        #urlbar.megabar[breakout-extend]:-moz-lwtheme-brighttext > #urlbar-background,/*FF 72*/
        .urlbarView:not(.megabar):-moz-lwtheme-brighttext {
                background: rgba(42, 42, 46,.7) !important;
        }
}

FF77 或以上的则使用下面的样式。

@-moz-document url("chrome://browser/content/browser.xhtml") {
        #urlbar[breakout-extend] > #urlbar-background{
                background: rgba(255,255,255,.7) !important;
        }
        #urlbar[breakout-extend]:-moz-lwtheme-brighttext > #urlbar-background{
                background: rgba(42, 42, 46,.7) !important;
        }
        #urlbar[breakout-extend][open] > #urlbar-background{
                backdrop-filter: blur(4px);
        }
}

生效条件：
确保 about:config 中
toolkit.legacyUserProfileCustomizations.stylesheets
和
layout.css.backdrop-filter.enabled
的值为 true

确保FF在你的机器中支持并开启 webrender（目前 backdrop-filter 的实现依赖于 webrender）


效果：

开启 browser.urlbar.megabar 、browser.urlbar.update1 的效果

暗色主题下的效果

lonely_8：16楼，没开 webrender ?

17楼，因为背景 （#urlbar-background）是在 #urlbar 下的，
背景元素在没指定高度也无内容高度的情况下，会跟随父元素的高度。
请使用 #urlbar-input-co...回到原帖

原来从77升级到78esr给默认关闭了webrender，esr果然都这么保守的么

aunsen：我还发现了一个莫名其妙的bug，只要指定地址栏高度，地址栏下拉菜单就透明了，完全没有背景，这简直毫无道理可言
比如：
#urlbar, #searchbar {
    height: 28px !important;

}

...回到原帖

16楼，没开 webrender ?

17楼，因为背景 （#urlbar-background）是在 #urlbar 下的，
背景元素在没指定高度也无内容高度的情况下，会跟随父元素的高度。
请使用 #urlbar-input-container 代替 #urlbar。

我还发现了一个莫名其妙的bug，只要指定地址栏高度，地址栏下拉菜单就透明了，完全没有背景，这简直毫无道理可言
比如：
#urlbar, #searchbar {
    height: 28px !important;

}

图片：Snipaste_2020-06-30_21-55-45.png

@lonely_8

升级到78esr后backdrop-filter属性失效了。。。layout.css.backdrop-filter.enabled参数开着啊。。。77都好好的

noHZIWer：77里失效了吗？回到原帖

顶楼已更新。

----
@EMLVIRUS 本贴原意是为了介绍 FF 支持的 css 新属性，提供美化思路。你可以分享在在本贴中。

建议
1. 暗色模式下使用 CSS filter 当中的 brightness 亮度偏转
2. 重新调整搜索建议文字颜色以减缓过高对比度带来的视觉疲劳

77里失效了吗？

lonely_8：@赤雲染 可以的只是参数改了 browser.urlbar.update1回到原帖

谢谢！

aunsen：好像是的，已经失效回到原帖

@赤雲染 可以的只是参数改了 browser.urlbar.update1

赤雲染：嗯~~~FF72+是不是已经不能开megabar了？？？回到原帖

好像是的，已经失效

嗯~~~FF72+是不是已经不能开megabar了？？？

请教下，地址栏下拉的图标不隐藏怎样实现？

MAC实测有效

好东西