Skip to content

樣式格式

Jump to bottom
zhtw2013 edited this page Dec 29, 2017 · 5 revisions

基本格式

xStyle支援less，你可以在這裡檢視LESS說明文件。

每個樣式都有一個或多個區塊，一般情況下，每個區塊都以@-moz-document (比對規則) {開頭，以}結尾。如果有程式碼不在任何區塊中，它將會套用至所有頁面。

比對規則包括了url、url-prefix、domain和regexp。除這些之外，xStyle還支援“exclude”，用於排除一些頁面。

比對規則

url

比對一個完整位址，包括“http://”，例如，url("http://example.com/a.html")會套用至http://example.com/a.html，但不會套用至http://example.com/a.html?id=1。

url-prefix

比對位址首碼，包括“http://”，例如，url-prefix("http://example.com/prefix/")會套用至http://example.com/prefix/*

domain

比對一個完整域名，例如，domain("example.com")會套用至http://example.com/*，但不會套用至http://www.example.com/*

regexp

使用正規表示式來比對位址，正規表示式必須以“^”開頭，以“$”結尾，例如，regexp("^https?://example.com/(.*)$")

exclude

使用正規表示式排除部分頁面, 正規表示式必須以“^”開頭，以“$”結尾，例如，regexp("^https?://example.com/(.*)$")

exclude規則的位置是沒有影響的，exclude規則優先等級高於其他規則。

簡單範例

/* 這裡是程式碼一 */
.a {
	color: red;
}

@-moz-document domain("example.com"), domain("www.example.com") {
	/* 這裡是程式碼二 */
	a {
		color: black;
	}
}

@-moz-document domain("t.example.com"), url-prefix("http://m.example.com/t/") {
	/* 這裡是程式碼三 */
	a {
		color: green;
	}
}

@-moz-document url-prefix("http://mail.example.com/"), exclude("^http://mail.example.com/(\d+)\.html$") {
	/* 這裡是程式碼四 */
	a {
		color: blue;
	}
}

程式碼一會套用至所有網站。

程式碼二會套用至http(s)://example.com/*和http(s)://www.example.com/*。

程式碼三會套用至http(s)://t.example.com/*和http://m.example.com/t/*。

程式碼四會套用至http://mail.example.com/*，但不會套用至http://mail.example.com/(數字).html，例如，對http://mail.example.com/test.html生效但對http://mail.example.com/123.html不生效。

在樣式中使用進階選項

類似於userstyles.org（下稱USO），您可以自訂一些可選的進階選項，供使用者選擇

綜述

進階選項儲存於樣式的advanced鍵中，分為四個類型：text、color、dropdown、image。含有可選選項的CSS將會儲存於樣式的advanced.css中。

為了盡可能的減少開發者的工作量，與USO相同，CSS中使用/*[[名稱]]*/來代表相對的進階選項。名稱只支援英文字母、數字、下劃線和“-”符號

USER.LESS中的表示方式

每個進階選項均以@advanced開頭，後接類型、名稱、顯示名稱。如果類型為Text或Color，則後面為預設值。否則後面則是各個選項。

Dropdown類型的每個選項分別為名稱、顯示名稱、程式碼，程式碼以<<<EOT開頭，以EOT;結尾。

Image類型的每個選項分別為名稱、顯示名稱、位址，位址以雙引號開頭、雙引號結尾。

<<<EOT後和EOT;前的空字元（如空格、定位字元、換行字元）將會被略過。

例如：

@advanced text a_text "A Text" "SomeWords"
@advanced color a_color "A Color" #ffffff;
@advanced dropdown browser "Your browser" {
	fx "Firefox" <<<EOT
color: red; EOT;
	cr "Chrome" <<<EOT
color: green; EOT;
}
@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_"
}

類型說明

Text

text是純文字

Color

color是一個Hex形式的色彩，例如#000000

Dropdown

dropdown是一個下拉清單，可以在不同選擇時將不同程式碼套用至樣式中

Image

image用於圖片，樣式作者可以輸入一些自訂好的圖片位址（支援data uri的形式），且使用者也可以自行選擇圖片或填寫圖片位址

範例

類型為color，名稱為a_color，顯示名稱為“連結色彩”

a {
	color: /*[[a_color]]*/;
}
Clone this wiki locally