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/m.aspx?n=bbs/Browsers/M.1514531912.A.FE1.html ※ 編輯: eight0 (118.160.114.154), 12/30/2017 00:00:12