Style format

Basic format

xStyle support less, you can read less documentions here

Every style have one or more blocks, in general, every block is start with @-moz-document (matching rules) { and end with }. If some codes not in a block, it will apply to all pages.

The matching rules include url, url-prefix, domain and regexp. Except for these, xStyle support "exclude" to exclude some pages.

Matching rules

url

Match a full url, include "http://", for example, url("http://example.com/a.html") will apply to http://example.com/a.html, but will not apply to http://example.com/a.html?id=1.

url-prefix

Match a url prefix, include "http://", for example, url-prefix("http://example.com/prefix/") will apply to http://example.com/prefix/*

domain

Match a full domain, for example, domain("example.com") will apply to http://example.com/* but will not apply to http://www.example.com/*

regexp

Using regular expression to match url, the regular expressionto must start with "^" and end with "$", for example, regexp("^https?://example.com/(.*)$")

exclude

Using regular expression to exclude some pages, the regular expressionto must start with "^" and end with "$", for example, regexp("^https?://example.com/(.*)$")

The location of the exclude rule has no effect. The exclude rule has higher priority than other rules

A simple demo

/* There is code one */
.a {
	color: red;
}

@-moz-document domain("example.com"), domain("www.example.com") {
	/* There is code two */
	a {
		color: black;
	}
}

@-moz-document domain("t.example.com"), url-prefix("http://m.example.com/t/") {
	/* There is code three */
	a {
		color: green;
	}
}

@-moz-document url-prefix("http://mail.example.com/"), exclude("^http://mail.example.com/(\d+)\.html$") {
	/* There is code four */
	a {
		color: blue;
	}
}

Code one will apply to all websites.

Code two will apply to http(s)://example.com/* and http(s)://www.example.com/*

Code three will apply to http(s)://t.example.com/* and http://m.example.com/t/*

Code four will apply to http://mail.example.com/*, but will not apply to http://mail.example.com/(number).html, for example, http://mail.example.com/test.html will be apply and http://mail.example.com/123.html will not.

Use advanced options in styles

Similar to userstyles.org (USO), you can define some optional advanced options for user selection.

Summary

Advanced options are stored in the style's advanced key, divided into four types: text, color, dropdown, image. CSS with optional options will be stored in the style's advanced.css.

In order to minimize the workload of the developer, as same as USO, CSS uses /*[[name]]*/ to represent the corresponding advanced options. The name only supports English letters, numbers, underscores, and "-" symbols.

USER.LESS representation

Each advanced option starts with @advanced, followed by type, name, and display name. If the type is Text or Color, the next is default value. Otherwise is the options.

Dropdown type of each option are the name, display name, code, code to <<<EOT at the beginning, to EOT; end.

Each option for the Image type is the name, the display name, the address, the address begins with double quotation marks, and the double quotation marks ends.

The empty characters (such as spaces, tabs, newlines) before <<<EOT and after EOT; will be ignored.

For example:

@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_"
}

Type description

Text

Text is plain text

Color

Color is a Hex form of color, such as #000000

Dropdown

Dropdown is a drop-down list that allows you to apply different code to a style when it is different

Image

Image for the picture, the style of the author can enter some of the pre-defined picture address (support data uri form), and the user can also choose pictures or fill in the picture address

Example

Type is color, name is a_color, display name is "link color"

a {
	color: /*[[a_color]]*/;
}