终端用户能否通过CSS自定义Chrome浏览器的网站渲染效果

CSS不是只能由网站开发者编写、也不是必须内嵌在HTML页面中，最终渲染页面的样式由三类来源共同决定：

• 浏览器内置的用户代理样式：即未加载任何自定义样式时，浏览器默认的基础渲染规则，比如标题加粗、超链接默认带蓝色下划线
• 网站开发者定义的样式：包括HTML页面内嵌的<style>代码块、标签内联style属性、外链的站点CSS文件，是日常浏览时最主要的样式来源
• 终端用户自定义样式：用户可以本地编写CSS规则覆盖浏览器默认样式、调整站点的渲染效果，不需要修改网站本身的代码。

Chrome 没有提供直接可访问的本地自定义CSS文件存放路径，你可以通过下面两种方式实现自定义样式、调整滚动条宽度：

方法1：通过启动参数加载本地自定义CSS文件 #

1. 先完全退出Chrome，确保程序没有在后台运行
2. 新建一个纯文本文件，后缀改为.css，存入你想放的本地目录，比如用户文稿文件夹，写入调整滚动条的样式代码：

/* 固定滚动条宽度 */
::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
}
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 6px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}

3. 打开macOS终端，执行对应命令启动Chrome，将命令里的CSS文件路径替换为你自己存放文件的实际路径：
   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-features=UserStyleSheet --user-stylesheet="file:///Users/你的用户名/Documents/custom-chrome.css"
   注意：该方式只有通过终端命令启动Chrome时才会加载自定义CSS，直接从启动台、程序坞点击Chrome图标启动不会生效。

方法2：关闭Chrome实验性滚动条功能（无需写代码，优先推荐） #

你遇到的滚动条突然变窄问题，是Chrome 102版本默认开启了覆盖层滚动条实验功能，该功能会绕过macOS系统的滚动条设置，所以你调整系统辅助功能选项不会生效：

1. 打开Chrome，在地址栏输入chrome://flags回车进入实验功能配置页
2. 在页面顶部搜索框输入Overlay Scrollbars搜索对应配置项
3. 将该项的下拉选项从Default修改为Disabled
4. 点击页面底部弹出的重启按钮重启Chrome，滚动条即可恢复为固定宽度的常规样式。

内容的提问来源于stack exchange，提问作者SunnyPete