奔跑中的奶酪

美化网页,2022 年度最喜欢 Stylish 样式

导读

美化网页,2022 年度最喜欢 Stylish 样式

扩展、脚本、样式。

是我们普通用户折腾浏览器的三大法宝。

扩展、脚本都很好理解,但「样式」似乎已经过气,已经很少有人再提起它了。

今天就来聊聊「用户样式」,顺便“让它再次伟大”。

一、用户样式管理器

要怎么理解“用户样式”呢?

HTML、CSS、JavaScript 是网页设计的“三件套”。

如果说“油猴脚本 JavaScript ”改变的是网页的“行为”,那么“用户样式 CSS”改变的则是网页的“外观”。

i05_网页制作规范

和油猴脚本一样,用户样式的管理器也有很多,比如:

1、Stylish

Stylish 是最早的样式管理器,早在 2005 年就上线 Firefox 浏览器,2010 年 Stylish 还上线了 Chrome 浏览器。

然而在 2016 年,Stylish 因涉嫌窃取用户浏览历史,被双双下架。

2、Stylus

Stylus 是基于 Stylish 的一个分支版本,它不但移除了 Stylish 的隐私上传模块,还带来了功能和性能上的提升。

3、xStyle

xStyle 是由国内的“Firefox 贴吧”团队开发,它最大的特色是简洁易用,无论是编辑还是管理,都非常的方便。

4、Stylebot

Stylebot 最早上线在 Chrome 浏览器,它最大的特点是可视化操作,即便你不懂网页代码,也一样可以轻松上手。

奶酪推荐 xStyle。(简洁,是高效第一生产力)

二、用户样式市场

有了样式管理器后,你可以到下面这些网站安装现成的样式。

1、UserStyles.org

地址:https://userstyles.org

Stylish 的官方网站,国内访问速度慢,曾经最大的样式市场,现在的活跃度不高了。

2、UserStyles.org 镜像网站

地址:https://uso.kkx.one

UserStyles 的镜像网站,可以解决国内访问速度慢的问题。

3、FreeStyler

地址:https://freestyler.ws

Safari 样式扩展 FreeStyler 的官方网站,活跃度也不高。

4、UserStyles.world

地址:https://userstyles.world

由 UserStyles 用户维护的一个全新样式市场,活跃度高,速度也不错。

5、Greasyfork

地址:https://greasyfork.org

Greasyfork 的创办者和 UserStyles 是同一个人,所以现在 Greasyfork 也可以发布样式了。

6、GitHub

地址:https://github.com

一些开发者会将 GitHub 作为第一发布源。

首选:UserStyles.worldGreasyfork。(活跃度高)

三、用户样式推荐

别看有这么多的样式市场,但真正好用的并不多,曾经与油猴脚本齐名的用户样式,现在怎么就不火了呢?

1、扁平化设计

最主要的原因,还是“扁平化设计”浪潮,它让网页的外观设计不再是重点,如今大多数网站都已经足够简洁。

2、有扩展可替代

其次,用户样式的最常用的“元素隐藏”功能,通过 uBock Origin 这样的广告过滤扩展也可以轻松实现。

3、样式的改造能力有限

还有一个原因是,CSS 样式只能改变网页的“皮相”,而无法改变网页的“骨相”。

使用 CSS 样式去修改网页的字体、字体渲染、黑夜模式、阅读模式,不如扩展这种综合性的改造方式更加有效。

4、大换装样式经常失效

一些像“百度仿谷歌样式”这样的大换装样式

通常会因为网站的一个小更新,而出现排版错位的问题,这无疑平添了烦恼,所以很多人干脆就不用样式了。

下面说一下我的用户样式方案:

用户样式

 全局样式: 简介 安装 效果
 Font Rendering Enhancer 字体渲染,解决 Chrome 字体渲染发虚弱的问题。 👍
 Dark Reader 黑夜模式,能智能匹配几乎所有网站的黑夜模式。
 Modern for Wikipedia 维基百科优化,可能是目前最好的界面优化方法。
 字体渲染 字体修改,修改网页字体,还可以实现 MacType 渲染。
 雅黑字体 替换字体的中文部分为雅黑,同时不影响英文字体。 --
 网站样式:
 百度知道-屏蔽与排版 百度知道界面优化。
 百度百科-屏蔽与排版 百度百科界面优化。
 百度经验-屏蔽与排版 百度经验界面优化。
 百度文库-屏蔽与排版 百度文库界面优化。
 百度贴吧现代化风格样式 维护很多年的贴吧样式,但代码超1万行,不建议使用 !!!
 微博优化 去除微博首页的“热搜榜”和广告,同时加大宽度。
 今日热榜优化 去除今日热榜首页的广告,还有缩小整体宽度。
 YouTube 彩虹猫进度条 将进度条变成一只“彩虹猫”。
 Bilibili 彩虹猫进度条 将进度条变成一只“彩虹猫”。
 Bilibili 皮卡丘进度条 将进度条变成一只“皮卡丘”。
 Stylus 界面样式:
 Cleaner Stylus 对 Stylus 的管理页面进行扁平化设计,让它更简洁。
 Stylus Sidebar 隐藏 Stylus 的编辑边栏,鼠标经过可自动显示。

四、自定义用户样式

用户样式更多的使用场景,是我们自定义一些网站的样式,下面我们以“今日热榜”为例来做一个简单的教学。

这是“今日热榜”原来的样子。

i05_自定义

1、首先,按 F12 打开“开发者工具”。

2、然后,点击最左边的“鼠标选择”按钮,选择需要隐藏的元素,在“规则”一栏里加入 display:none; 的规则。

i05_自定义2

3、复制新加入的规则,打开 xStyle 页面,新建应用于 tophub.today 的样式。

i05_自定义3

4、将复制的规则代码,粘贴在两个 { } 之间,然后起个名字,最后保存。

i05_自定义4

5、同样的方法,加入其他的修改内容。

i05_自定义5

最后通过“用户样式”改造后的“今日热榜”,就变成了这个样子。

i05_自定义6

是不是清爽多了?

结尾

最后,如果你觉得你的优化修改还不错。

还可以将代码发布到 Greasyfork 或者 UserStyles.world 这两个目前最活跃的社区。

只有你加入贡献,用户样式才会再次伟大。

注:本文由 奔跑中的奶酪 作者:奔跑中的奶酪 发表,其版权均为作者所有,如需转载,请注明作者名字以及文章来源。
67
avataravatar

评论:

21 条评论,访客:20 条,站长:0 条
  1. avatar
    灵龙四海发布于: 

    xstyle有个bug就是无法安装greasyfork.org上的CSS格式,无法显示安装选项,而另外2个扩展都可以

  2. 奔跑中的奶酪
    奔跑中的奶酪发布于: 

    这个一个SEO的问题,关系到链接权重。我的网站有很多导出链接,如果不做重定向的话,搜索引擎会认为我的网站是链接农场,可能会被列入灰名单,网站排名就会受到影响。

  3. 马化腾
    马化腾发布于: 

    你博客的链接重定向取消下吧

  4. 剡上帝屋
    剡上帝屋发布于: 

    你好,Minimalistic Firefox[预览] 沉浸式极简主题 我我喜欢,但是,我鼠标放到地址栏页面会跳动一下是怎么回事?大神能帮忙修改下吗?

    • 奔跑中的奶酪
      奔跑中的奶酪发布于: 

      可能是版本更新导致的不兼容吧, 看看作者有没有更新版?没有的话,只能自已手动排除了。

  5. 邓正荣
    邓正荣发布于: 

    Colorize Firefox Buttons&&weibo V6,我的选择.

  6. 邓正荣
    邓正荣发布于: 

    Colorize Firefox Buttons&&weibo V6,我的选择.

  7. anan-2.0XL
    anan-2.0XL发布于: 

    贴吧样式,喜欢小清新的可以用贤者贴吧https://userstyles.org/styles/108392/smilence-tieba

  8. lianyi-1984
    lianyi-1984发布于: 

    这个贴吧样式有问题,看不到回复消息,点进去显示没有消息,但实际有好几条。

  9. 二手科学家
    二手科学家发布于: 

    百度多栏https://userstyles.org/styles/127217/theme

  10. 内咸
    内咸发布于: 

    喜欢优雅的百度搜索结果https://userstyles.org/styles/91391/theme

发表评论