奔跑中的奶酪

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

导读

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

扩展、脚本、样式。

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

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

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

一、用户样式管理器

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

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

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

i05_网页制作规范

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

样式管理器 简介

1、Stylish

Stylish 是最早的样式管理器。
早在 2005 年就上线了 Firefox 浏览器,然而在 2016 年因涉嫌窃取用户隐私而被双双下架。

2、Stylus

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

3、xStyle

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

4、Stylebot

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

5、首选

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

二、用户样式市场

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

样式市场 简介
1、Userstyles.org Stylish 官方网站,最大的样式市场,但现在活跃度不高了,国内访问速度也慢。
2、Uso.kkx.one UserStyles 的镜像网站,可以解决国内访问速度慢的问题。
3、Freestyler.ws Safari 样式扩展 FreeStyler 的官方网站,活跃度也不高。
4、Userstyles.world UserStyles 用户维护的一个全新样式市场,活跃度高,速度也不错。
5、Greasyfork.org Greasyfork 的创办者和 Userstyles 是同一个人,Greasyfork 也可以发布样式了。
6、Github.com 一些开发者会将 GitHub 作为第一发布源。
7、首选 UserStyles.worldGreasyfork.org,因为活跃度高。

三、用户样式推荐

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

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.org 或者 UserStyles.world 这两个目前最活跃的社区。

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

注:本文由 奔跑中的奶酪 作者:奔跑中的奶酪 发表,其版权均为作者所有,如需转载,请注明作者名字以及文章来源。
123
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

发表评论