推 zhtw: xStyle 的樣式說明已新增繁體版 可以改一下文內連結呦！ 12/29 17:32
推 Wcw5504: 試了幾次 Stylus不支援Chrome設定同步 感覺有點糟 12/29 21:48
※ 編輯: eight0 (118.160.114.154), 12/30/2017 00:00:12
→ eight0: 樓上可以到 Github 上回報問問 12/30 00:00
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://www.ptt.cc/bbs/Browsers/M.1514531912.A.FE1.html