Stylish 事件快一年，在这之间有很多文章建议了不同的替代品如 Stylus 和 xStyle。 这篇文章要介绍的是不久前（3~4 个月前）Stylus 和 xStyle 新加入的 userstyle 格式︰.user.css，或直接叫 Usercss。 在以前，若开发者要提供一个样式档，并且希望能让使用者在某种程度上客制化， 有以下选择︰ 1. 提供一个主要的 CSS 档案，并且将客制化的部份分成其它较小的 CSS 档案，让使 用者选择要安装哪些功能。 缺点︰安装不方便，不能直接安装 CSS 档案的样式管理器得一个个手动复制贴 上程式码。 2. 把样式上传到 userstyles.org，并在 userstyles.org 上设定客制化选项。 缺点︰绑定 userstyles.org，而在 stylish 的现况下，有不少开发者希望能有其 它替代品。 这两个方法都有一共通的缺点︰当使用者要调整选项时，都要回到原先安装的网站并 重新安装。 而 Usercss 就是为了解决这些问题设计的。 Usercss 由旧版 Stylish（Firefox < 57）所使用的格式为主，附加上 metadata 资讯， 并且在 metadata 内加入 变数 和 预处理器 的定义。 由使用者在样式管理员中调整变数的值（颜色、文字、勾选框等等），样式管理器再以 使用者所设定的变数，以预处理器把 Usercss 编译成最终的 CSS 程式码。藉此达到在 样式管理员中，动态调整选项的功能。 除此之外，由於 Usercss 只是一个单一的文字档，无论是复制或安装都更方便，只需要 一个可以上传纯文字文件的服务即可（如 Github）。 下面的 GIF 是一个用 Stylus 调整选项的范例︰ https://i.imgur.com/GzsI900.gif 相容性部份，Stylus 和 xStyle 各使用了不同的格式。目前两者所支援的预处理器有︰ Stylus: - CSS Variable - userstyles.org /*[[placeholder]]*/ - Stylus preprocessor (stylus-lang.com) xStyle: - userstyles.org /*[[placeholder]]*/ - Less preprocessor (lesscss.org) 另外，xStyle 统一使用 Usercss（包括从 userstyles.org 安装的样式），Stylus 则 是新旧版并行。 Stylus 的 Usercss 规格文件︰ https://github.com/openstyles/stylus/wiki/Usercss xStyle 的 Usercss 规格文件︰ https://github.com/FirefoxBar/xStyle/wiki/%E6%A8%A3%E5%BC%8F%E6%A0%BC%E5%BC%8F 范例的 Usercss 连结︰ https://rawgit.com/eight04/1b9edeb170d9f8bbabfb06dc6627f8f7/raw/d8569b0d79cd2c02fcea9770a7f05c1b2d422117/foo.user.css 缩︰https://goo.gl/ar8155 -- Chrome 上还有另一个套件是 FreeStyler，我没有使用过。 看介绍应该也有类似的功能，不知道有没有使用过的人可以补充。 -- ▉▏ ▉▏ ◢ ▊▎ ◣ ◤ ▄▆▄ ◥ 　 ◥ ◥ ◤ ◤ ▄ ▄ --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 118.160.114.154 ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Browsers/M.1514531912.A.FE1.html ※ 编辑: eight0 (118.160.114.154), 12/30/2017 00:00:12