[樣式] Usercss 格式介紹

作者: eight0 (欸XD)   2017-12-29 15:18:24
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
作者: zhtw (人生就是不停的後悔。。)   2017-12-29 17:32:00
xStyle 的樣式說明已新增繁體版 可以改一下文內連結呦!
作者: Wcw5504 (五月雨)   2017-12-29 21:48:00
試了幾次 Stylus不支援Chrome設定同步 感覺有點糟
作者: eight0 (欸XD)   2017-12-30 00:00:00
樓上可以到 Github 上回報問問

Links booklink

Contact Us: admin [ a t ] ucptt.com