[樣式] Usercss 格式介紹

看板Browsers (瀏覽器)作者eight0 (人類)時間8年前 (2017/12/29 15:18)推噓2(2推 0噓 1→)

留言3則, 3人參與討論串1/1

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