CSS Counter Style trial, csscounter

CSS Counter Style trial, csscounter

In February 3, 2015, CSS Counter Style level3 became a W3C candidate. It's time to look at the magic of @ counter-style to customize list-style and counter. Let's sit in and hear qingge break down.

Powerful magic

What can I do with CSS Counter Style? Let's take a look at the simple case of qingge. Of course, if you want to exert the most magic power and need your beautiful ideas, you will not be ugly if you are not a brother's specialty. You are welcome to leave a message to submit your ideas.






YesNote:Currently, only firefox supports @ counter-style. I still put the code in codepen. Please choose online research or download from favorites -.
Run the @ counter-style command.Custom list Style, Can be used inList-style,Counter,Counters.

Structure Analysis

The typical format for defining a counter-style is as follows:

@ Counter-style counter name {system: algorithm; range: use range; symbols: symbol; or additive-symbols: Symbol prefix: prefix; suffix: suffix; pad: Fill zero (eg., 02, 03); negative: negative number policy; fallback: default value after error; speakas: Voice policy ;}

All the commands of @ counter-style are listed in detail above. In most cases, we only need to use several of the commands. For example, the command for implementing "tiangan number" is as follows.

@ Counter-style cjk-heavenly-stem {system: alphabetic; symbols: "\ 7532" "\ 4E59" "\ 4E19" "\ 4E01" "\ 620A" "\ 5DF1" "\ 5E9A" "\ 8F9B" "\ 58EC" "\ 7678"; /* A, B, C, D, E, G, Xin, Xi */suffix :",";}

Next, let's take a brief look at the usage of each command.

Algorithm-system

Command	Meaning	Acceptable Value	Default Value
System	Symbol Generation Algorithm	Cyclic, numeric, alphabetic, symbolic, additive, [fixed?] , [Extends]	Symbolic

The algorithm is described in the following table.

Parameters	Meaning	Sample Code	Representation
Cyclic	Circular symbols	System: cyclic; symbols: 'A' B 'C ';	A, B, c, a, B, c,
Fixed	It uses only one symbol, and a number indicates the starting position.	System: fixed 3; symbols: 'A' B ''C' d ';	1, 2, a, B, c, d, 7
Symbolic	Use the symbol for loop, and repeat twice for the second time	System: symbolic; symbols: 'A' B 'C ';	A, B, c, aa, bb, cc, aaa
Alphabetic	Similar to lowercase letter Loop	System: alphabetic; symbols: 'A' B 'C ';	A, B, c, aa, AB, ac, ba
Numeric	It is similar to the numeric hexadecimal format.	System: alphabetic; symbols: 'A' B 'C ';	B, c, c, ba, bb, bc, ca, cb
Additive	A numbering system similar to a number in Rome	System: additive; additive-symbols: c 3, B 2, a 1;	A, B, c, ca, cb, cc, cca
Extends	Inherit from other numbering systems	System: extends decimal; suffix :')';	1), 2), 3), 4), 5), 6), 7)

Scope of use-range

Specifies the use range of the custom symbol system. If the value is out of the range, the default number specified by fallback is used.
You can use [[| infinite] {2}] or auto to specify the range. auto is the default value.
The meanings of auto in different systems are listed as follows:

• In the cyclic, numeric, and fixed algorithms, auto indicates from negative infinity to positive infinity.
• In the alphabetic and symbolic algorithms, auto indicates from 1 to positive infinity.
• In the additive algorithm, auto indicates from 0 to positive infinity.

• In the extend algorithm, auto obtains the value range of the inherited parent system. If it is a predefined complex system, it obtains the predefined value.

  The following example specifies the correct range.

/* Specify the range to auto. The default value is */range: auto./* specify the range to two numbers: the upper limit, the lower limit, and the lower limit. Both numbers are included, lists are separated by commas */range: 1 6; range: 1, 2, and 6;/* the specified range is the keyword */range: infinite; /* from negative infinity to positive infinity */range: infinite 4;/* from negative infinity to 4 */range:-6 infinite;/* From-6 to positive infinity */

Use the symbols-symbols and additive-symbols

This is a very important attribute in custom counter-style. You must specify the symbols attribute in algorithms such as cyclic, numeric, alphabetic, symbolic, and fixed. You must specify the additive-symbols attribute in the additive algorithm.

Use prefix and suffix

The default prefix value is "", and the default value of suffix is "\ 2E \ 20". A space is added to a vertex.
### Use the zero-padding policy-pad
Pad allows developers to specify a fixed-width symbol system, such as a three-digit digital system, 001,002 ,......, 100,101.
The format specified by pad is pad &, for example, pad 3 "0.

Anonymous counter-style-symbols () function

The symblos function will create a function with no name, prefix is "", suffix is "", range is auto, fallback is decimal, negative is "\ 2d "(-), an anonymous style with pad 0 "" And speak-as auto. That is, you only need to specify system and symbols in anonymous counter-style.

ol { list-style: symbols(cyclic "a" "b" "c" "d"); }

Predefined style

CSS Counter Styles Level 3 has reserved many good symbol systems, such as the tiangan, geographic support, Chinese numbers, and Chinese capital for Chinese users. These pre-defined systems enable us to learn the good resources of counter-style. Let's look at a few below.

/* Double-digit numbers-, 03 ...... 10, 11 */@ counter-style decimal-leading-zero {system: extends decimal; pad: 2 '0 ';} /* Chinese digit number */@ counter-style cjk-decimal {system: numeric; range: 0 infinite; symbols: \ 3007 \ 4E00 \ 4E8C \ 4E09 \ 56DB \ 4E94 \ 516D \ 4E03 \ 516B \ 4E5D;/* 3001, */suffix "; /* "," */}/* tiangan no. */@ counter-style cjk-heavenly-stem {system: alphabetic; symbols: "\ 7532" "\ 4E59" "\ 4E19" "\ 4E01" "\ 620A" "\ 5DF1" "\ 5E9A" "\ 8F9B" "\ 58EC" "\ 7678"; /* A, B, C, E, E, Geng, Xin, Xi */suffix: ",";}/* local branch number */@ counter-style cjk-earthly-branch {system: alphabetic; symbols: "\ 5B50" "\ 4E11" "\ 5BC5" "\ 536F" "\ 8FB0" "\ 5DF3" "\ 5348" "\ 672A" \ 7533 "" \ 9149" "\ 620C" "\ 4EA5 "; /* Zi ugly Yin Mao chen Wu did not apply */suffix :",";} /* chinese capital number- */@ counter-style simp-chinese-formal {/* this is a predefined complex style in the CSS3 Counter Styles specification */system: additive; range:-9999 9999; additive-symbols: 9000 \ 7396 \ 4EDF, 8000 \ 634c \ 4EDF, 7000 \ 67d2 \ 4EDF, 6000 \ 9646 \ 4EDF, 5000 \ 4f0d \ 4EDF, 4000 \ 8086 \ 4EDF, 3000 \ 53C1 \ 4EDF, 2000 \ 8CB3 \ 4EDF, 1000 \ 58F9 \ 4EDF, 900 \ 7396 \ 4F70, 800 \ 634C \ 4F70, 700 \ 67D2 \ 4F70, 600 \ 9646 \ 4F70, 500 \ 4f0d \ 4F70, 400 \ 56DB \ 4F70, 300 \ 53C1 \ 4F70, 200 \ 8CB3 \ 4F70, 100 \ 58F9 \ 4F70, 90 \ 7396 \ 62FE, 80 \ 634C \ 62FE, 70 \ 67D2 \ 62FE, 60 \ 9646 \ 62FE, 50 \ 4f0d \ 62FE, 40 \ 8086 \ 62FE, 30 \ 53C1 \ 62FE, 20 \ 8CB3 \ 62FE, 10 \ 58F9 \ 62FE, 9 \ 7396, 8 \ 634C, 7 \ 67D2, 6 \ 9646, 5 \ 4f0d, 4 \ 8086, 3 \ 53C1, 2 \ 8CB3, 1 \ 58F9, 0 \ 96F6; suffix: ','; negative: "\ 8D1F ";}

Reading

W3c candidate criteria
Predefined Counter Styles

Thank you

Front-end development whqet, focus on front-end development, and share related resources. Wang haiqing, A csdn Expert Blog, hopes to help you.
The original Article, http://blog.csdn.net/whqet/article/details/43605725
Welcome to independent blog http://whqet.github.io.