Firefox浏览器在黑暗模式下会出现侧边栏底部推荐和顶部的搜索栏固定定位失效, 而且问题是无解的, 所以不建议用户使用黑暗模式或者可以使用其他黑暗模式的扩展

问题分析

我也不是 Firefox 日常用户, 所以这个问题我也是在检查另一个问题的时候刚发现的, 所以特地提醒
正常地, 如果fixed元素在其祖先元素有transform或者filter非默认值的时候fixed元素因为定位基准从 viewport 建立的 initial containing block 改为祖先元素的 containing block 而变为absolute

【错误】
代码折叠部分不可见
【开启后】

【原来】

如图片所示，需要点击才能显示全文

因为我个人觉得我们在阅读一篇csdn的时候更加关注的是已经读过的人的一些评论，而不是另外的一些推荐文章。往往我们可以根据一些别人发表的一些评论更好的判断一篇文章的好坏，如果不能够判断一篇文章的好坏再读十篇文章也没有用，所以希望，现在的插件中能够将推荐阅读和评论展示的位置更换一下，谢谢

比如鼠标中间打开页面，或者 按住ctrl+鼠标左键 ，然后查看页面的时候就会发现页面没有美化。

大多数程序员，不可能只看一个帖子吧，都是习惯性地打开好几个网页，然后一个一个查看。

其实我觉得你写的是我在众多的CSDN净化脚本中做的最好的一个，但是用的人有点点少。您希望我向我的朋友们推荐一下你的作品吗？ ฅ( ̳• ◡ • ̳)ฅ

当然可以啊, 因为脚本商店有些规则不是很合理, 新脚本也很难被发现, 每次我发现都是更新后才会被搜索结果推荐到首页, 然后就基本没人安装了, 希望大家觉得好用多多推荐给身边的程序猿朋友们🤣

Originally posted by @Germxu in #1 (comment)

感谢🙏作者的辛勤付出，写出这么优秀的脚本。

其次有个问题就是免登录代码复制按钮，不清楚是不是我的电脑或者浏览器的问题。
电脑 MacBook Air M1
系统 macOS Ventura 13.1
浏览器 Chrome 109.0.5414.87（正式版本） (arm64)
油猴 v4.18.1
CSDN Focus 2.1.2
其他扩展插件均已关闭，但是没有代码复制按钮。

我在油叉找到的另一个CSDN插件，名叫CSDN 优化，作者是share121。
这个插件是可以正常免登录复制的。
下面是相关代码，作者可以看一下

// ==UserScript==
// @name         CSDN 优化
// @namespace    http://tampermonkey.net/
// @version      0.2.0
// @description  优化 CSDN 体验
// @author       share121
// @match        https://blog.csdn.net/*/article/details/*
// @icon         https://g.csdnimg.cn/static/logo/favicon32.ico
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    "use strict";
    document.querySelectorAll("pre, code").forEach((e) => {
        e.style.cssText +=
            "-webkit-touch-callout:auto;-webkit-user-select:auto;-khtml-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;";
    });
    document.querySelectorAll(".pre-numbering").forEach((e) => {
        e.style.cssText +=
            "-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;";
    });
    document.querySelectorAll(".hljs-button.signin").forEach((e) => {
        e.onclick = function (e) {
            e.stopPropagation();
            navigator.clipboard
                .writeText(this.parentNode.innerText)
                .then(() => {
                    this.setAttribute("data-title", "复制成功");
                    console.log(`“${this.parentNode.innerText}”写入剪贴板成功`);
                    setTimeout(() => {
                        this.setAttribute("data-title", "复制");
                    }, 3000);
                })
                .catch((err) => console.log(`写入剪贴板失败，错误为“${err}”`));
        };
        e.setAttribute("data-title", "复制");
    });
    let tmp = setInterval(() => {
        let button = document.querySelector("#passportbox > span");
        if (button) {
            clearInterval(tmp);
            button.click();
        }
    }, 0);
    document.querySelector("#article_content").style.height = "auto"
    document.querySelector(".hide-article-box.hide-article-pos")?.remove()
    document.querySelector("#blogExtensionBox")?.remove()
    document.querySelectorAll(".look-more-preCode").forEach(e=>e.click())
})();

可以考虑不要净化一下内容吗

作者名片

相关文章的推荐

最近的热门文章

这些在我们找资料的过程中可以起到积极的作用。
希望您可以在脚本中添加一些注释，可以让我们自行修改，达到各自想要的样子。
另外，新年快乐噢😁~

黑暗模式 作为增强体验的特性, 本无技术难度, 问题是细枝末节受影响的地方太多, 每个项目的技术在接到这种需求的时候都是头疼的.

往大了说, 界面的每个节点都需要审查, 当界面或者内容的结构形式并不固定, 就要对已有的内容形式和结构全面排查适配, 差不多相当于重建一遍用户界面.

以 淘宝 的实践方案来看, 这是一个典型的代表**互联网的大而全的应用, 适配工作量巨大, 至今也没有应用到不同版本, 比如我为了本篇而最新下载的 iOS 海外版淘宝依然没有黑暗模式.

再看一下web端适配体验优秀的 github, 只是适配不同模式用的 css 文件就有几千行, 所以在任何端来说, 这个功能都是一个大工程, 因此也是很多用户量巨大但是依然没有计划做黑暗适配计划的产品的主要原因.

其实对于不少内容来说黑暗模式的难点在于真正契合黑暗模式本身的理念: 减少黑暗环境下高亮的屏幕对于眼睛的刺激. 在实践上大多数实践都是翻转文本, 保留图片, 视频, 超链接, 代码块 等本身具有的特殊高亮, 这样在以图片为主的内容上效果并不优秀, 例如购物平台, 在多端同步或者移动端先行之下很多平台内容都是图片形式呈现, 图片的亮度通常都很高, 在不改变图片色相亮度对比度的时候就图像显得尤为突出 , 甚至是很丑也很亮, 简直是违背了黑暗模式本身的出发点, 但是似乎也难以有更好的实践.

目前 Web 端最大的适配问题就是对应的实践标准或者 API 迟迟没有出现, 只能按照重做一遍 UI 的路子再走一遍, 费时费力, 在文本反转之后往往会出现文本背景对比度下降的问题, 反而增加了阅读障碍, 而图片视频又会反过来过高的对比度产生刺激. 在内容对比度自适应的道路上还有很长的路要走,等待对应暗色模式API或者自动对比度适应的相关正式标准, 有关开发实践前往参考文献

参考

1. Color and contrast accessibility
   
2. MDN Color contrast
3. W3C Contrast
4. W3C Understanding Success Criterion

大大，我觉得左侧边栏只需要目录就够了，其他的都可以屏蔽掉；
另外，要是能有个一键复制代码的功能就更好了；
页面最上面搜索框的白色背景可以改成透明，整体更协调；
左侧边的红色按钮可以改成小小的箭头样式，然后居中，现在这个按钮看起来不是很舒服；
还有，页面的背景要是能够自定义就好了
油猴上有一个脚本叫CSDN去广告沉浸阅读模式，它在美学上做的很好，大大可以看一下它的美学思路

最后，感谢大大做出这么好的脚本

CSDN红包雨