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.