關於 .user.css 格式

[eight04]

8/6 時我在 openstyles/stylus 開了一個 PR 實作 .user.css 格式（基本上就是 mozilla 格式 + metadata block） 。最近 stylus 的成員提到 xStyle 也有支援不同的格式，在 https://github.com/FirefoxBar/xStyle/issues/12 裡也有提到 .user.css，所以想說是否要交換一下意見。#12 裡提到的已經開始實作了嗎？

如果要測試的話，可以安裝 https://github.com/eight04/stylus/tree/dev-user-css 後，進入 https://gist.githubusercontent.com/eight04/1b9edeb170d9f8bbabfb06dc6627f8f7/raw/foo.user.css ，就會看到特殊的安裝介面了。

[sylingd]

已经在2.0.0版本（8月26日发布）中实现了。很多细节也不一样

[sylingd]

具体解释： 1.因var存在歧义，故xStyle使用的是advanced 2.为了和原版在一定程度上保持一致性，没有使用namespace区分不同样式，而是使用homepageURL区分。即便主页一样，也需要给URL加参数来保证xStyle会识别为不同样式 3.使用md5来验证是否为最新版，而不是语义化版本号（semver）原因同上 4.高级选项功能基本和userstyles.org保持一致，方便迁移 5.样式主体也是Mozilla格式 除此之外，编辑器也是默认编辑带高级选项的代码

[eight04]

我主要的目的是讓 Stylus 也能支援 xStyle 的 usercss。如果 xStyle 想實作 Stylus 的 usercss 格式我也可以幫忙。

因var存在歧义，故xStyle使用的是advanced

xStyle 的 @var 有別的用途嗎？

我看了 文件，color 和 text 和 Stylus 是相同的，下面是比較不瞭解的地方︰

@advanced dropdown browser "Your browser" {
    fx "Firefox" <<<EOT
color: red; EOT;
    cr "Chrome" <<<EOT
color: green; EOT;
}

這是一個 <select>。"Firefox" 和 "Chrome" 看起來是 <option>，而<<<EOR ... EOT; 中的內容是值。那 fx 跟 cr 的用途是？

@advanced image background "Page background" {
    bg_1 "Background 1" "http://example.com/example.jpg"
    bg_2 "Background 2" "http://example.com/photo.php?id=_A_IMAGE_ID_"
}

image 也是，多了 bg_1, bg_2 兩個值。

另外有範例可以試試嗎？或是有人已經上傳這種格式的連結也可以。我試了把下面的檔案存成 .user.css 後以 manage.html 內的 install from file 安裝，雖然 metadata 被移除了，但好像沒效果︰

/* ==UserStyle==
@name test
@advanced color font-color 'Font color' #123456
@advanced text nav-height 'Navbar height' 60px
==/UserStyle== */

@-moz-document domain("stackoverflow.com") {
    body {
        color: /*[[font-color]]*/;
        background: whitesmoke;
    }
    body > header {
        height: /*[[nav-height]]*/!important;
    }
}

xStyle 2.0.9

[sylingd]

关于var

本来计划会有一个var用于预定义一些变量。后来因为CSS似乎本身已经有此功能，加上考虑到此功能实用性不大，所以最后是没有进行开发的。

详细解释

@advanced dropdown browser "Your browser" {
    fx "Firefox" <<<EOT
color: red; EOT;
    cr "Chrome" <<<EOT
color: green; EOT;
}

此代码在高级选项界面（advanced.html）渲染后的结果是（实际HTML可能会有所不同，下面代码仅供解释用途）：

<select name="browser">
<option value="fx">Firefox</option>
<option value="cr">Chrome</option>
</select>

其他类似的地方也是此用途

多一个名称项，目的是为了方便编码、方便从USO迁移

哪里可以找到此格式的样式

从USO任意安装一个有高级选项功能的样式，即可从xStyle中导出完整的样式。例如，weibo-v6样式导出的文件：

weibo-v6.user.css.zip

样式存在问题、

/* ==UserStyle==
@name test
@advanced color font-color 'Font color' #123456
@advanced text nav-height 'Navbar height' 60px
==/UserStyle== */

@-moz-document domain("stackoverflow.com") {
    body {
        color: /*[[font-color]]*/;
        background: whitesmoke;
    }
    body > header {
        height: /*[[nav-height]]*/!important;
    }
}

此样式部分细节与xStyle定义不同：

1.xStyle使用双引号（"）包含字符串和显示名称 2.字符串的默认值也需要使用双引号（"）包含

使用以下代码可正常导入：

/* ==UserStyle==
@name test
@advanced color font-color "Font color" #123456
@advanced text nav-height "Navbar height" "60px"
==/UserStyle== */

@-moz-document domain("stackoverflow.com") {
    body {
        color: /*[[font-color]]*/;
        background: whitesmoke;
    }
    body > header {
        height: /*[[nav-height]]*/!important;
    }
}

[eight04]

我發現 dropdown 的選項名稱可以包含空白，如以下的「Fit window size」︰

@advanced dropdown bg-options "Background image type" {
    Tiled "Tiled" <<<EOT
background-repeat: repeat !important;
background-size: auto !important;
background-position: left top !important; EOT;
    Fit window size "Fit window size" <<<EOT
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center top !important; EOT;
}

這樣要如何判斷範圍？match(/[^"]+/).trim()?

[sylingd]

设计中名称应该是不能包含空格的，在scripts/userstyle.js中可以看到我使用的正则是/([a-zA-Z0-9\-_]+)([ \t]+)"(.*?)"([ \t]+)<<<EOT([\s\S]+?)EOT;/。 若发现可以输入空格，可能是一个疏忽，我会检查相关文件，查看是否有此问题。若存在问题，我会于下个版本进行修复。

[eight04]

那段程式碼來自︰https://gist.github.com/eight04/24fce2647e2eefc7b0a416b67962ce04#file-xstyle-user-css-L126 ，是我用 xStyle 安裝 https://userstyles.org/styles/37035/github-dark 後再導出來的。

[sylingd]

谢谢，我将修复此问题