CSS Counter style try to play

February 3, 2015, CSS Counter Style Level3 became a candidate for the world of the world, it's time to look at the powerful magic of @counter-style how to customize List-style and Counter. Come in and sit down and listen to your brother.

Powerful magic

What you can do with CSS Counter style to see the simple case that Kyung-do. Of course, if you want to play the greatest magic, need your good ideas, this is not brother's specialty, it is not caught dead, welcome you to submit your ideas through the message.






It is important to note that there is currently only a good Firefox browsing support @counter-style. I still put the code in the Codepen, please be free to choose-Online research-or-Download collection-.
With the @counter-style command, we can customize the list style , which can be used on list-style,counter,counters , and so on.

Structure analysis

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

@counter-style counter名字{     system  : 算法;     range   : 使用范围;     : 符号; or additive-symbols: 符号     prefix  : 前缀;     suffix  : 后缀;     pad     : 补零(eg. 01,02,03);     negative: 负数策略;     fallback: 出错后的默认值;     : 语音策略;}

All of @counter-style's commands are listed above, and in most cases we just need to use a few of them, such as the command to implement "Zodiac number".

@counter-style cjk-heavenly-stem {  systemalphabetic;  symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";  /* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */  suffix: "、";}

Let's take a brief look at the usage of each command.

Algorithm-system

Command	meaning	Acceptable Values	Default Value
System	Symbol Generation algorithm	Cyclic, numeric, alphabetic, symbolic, additive, [fixed], [extends]	Symbolic

The algorithm is explained in detail in the following table.

Parameters	meaning	Sample Code	Presentation Mode
Cyclic	Looping using symbols	System:cyclic; Symbols: ' A ' B ' C ';	A,b,c,a,b,c,a
Fixed	Use the symbol only once, and the number indicates where to start	System:fixed 3; Symbols: ' A ' b ' ' C ' d ';	1,2,a,b,c,d,7
Symbolic	Cyclic use of symbols, double repeat twice	System:symbolic; Symbols: ' A ' B ' C ';	A,b,c,aa,bb,cc,aaa
Alphabetic	Similar to lowercase letter loops	system:alphabetic; Symbols: ' A ' B ' C ';	A,b,c,aa,ab,ac,ba
Numeric	Similar to a digital binary	system:alphabetic; Symbols: ' A ' B ' C ';	B,c,c,ba,bb,bc,ca,cb
Additive	Numbering system similar to Roman numerals	system:additive; Additive-symbols:c 3, B 2, a 1;	A,b,c,ca,cb,cc,cca
Extends	Inheriting other numbering systems	System:extends decimal; Suffix: ') ';	1), 2), 3), 4), 5), 6), 7)

Use range-range

Specifies the scope of use of the custom symbology, out of range, with the default number specified by fallback.
You can specify a range range using [[| infinite]{2}] or auto Two, auto is the default value.
The meanings of auto under different system are as shown in the following table:

• Under the cyclic, numeric, and fixed algorithms, auto denotes negative infinity to positive infinity
• Under the alphabetic, symbolic algorithm, auto represents 1 to positive infinity
• Under the additive algorithm, auto represents 0 to positive infinity

• Extend algorithm, auto takes the value range of the inherited parent system, if it is a pre-defined complex system, take the predefined value

  The following examples are the correct scope designations.

/*指定范围为auto，默认值*/rangeauto;/*指定范围为两个数字：前面表示下限，后面表示上限，两个数字都包含在内,列表之间用逗号隔开*/range: 1 6;range: 1 2,4 6;/*指定范围为关键字*/rangeinfinite;   /*从负无穷到正无穷*/rangeinfinite/*从负无穷到4*/range-6infinite;/*从-6到正无穷*/

Using symbols-symbols and Additive-symbols

This is a very important property in custom Counter-style, and you must specify the symbolic attribute in algorithms such as cyclic, numeric, alphabetic, symbols, and fixed. The additive-symbols must be specified in the additive algorithm.

Using the front and back-prefix and suffix

The default for prefix is "", and the default value for suffix is "\2e\20", with one dot plus one space.
# # #使用补零策略-pad
PAD allows developers to specify a fixed-width symbology, such as a three-bit digital system, 001, 002,......,100, 101, etc.
Pad designated in the format of pad &&, such as Pad 3 "0" and so on.

anonymous Counter-style-symbols () function

The Symblos function will create a no name, prefix for "", Suffix for "", Range for Auto,fallback decimal,negative for "\2d" (-), pad for 0 "", Speak-as is an anonymous style for auto. That is, we only need to specify system and symbols in anonymous counter-style.

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

Pre-defined style

CSS Counter Styles Level 3 is reserved for a number of good symbology, such as Zodiac, branches, Chinese numerals, Chinese caps and other symbology for Chinese users. These pre-defined systems allow us to learn Counter-style's good resources, and we'll look at a few of them below.

/ * Two digit number -01,02,03 ... 10,11*/@counter-style Decimal-leading-zero{system:extends decimal;Pad: 2 ' 0 ';}/ * Chinese digit number * /@counter-style cjk-decimal{system:Numeric;Range: 0Infinite;symbols: \3007 \4E00\4e8c\4E09\56DB\4E94\516D\4E03\516B\4e5d;/*0 123456789 * /  suffix: "\3001";/* "," */}/ * Zodiac number * /@counter-style cjk-heavenly-stem{system:Alphabetic;symbols: "\7532" "\4E59"" \4E19"" \4E01"" \620A"" \5DF1"" \5e9a"" \8f9b"" \58EC"\7678";/ * N-propyl Xing * /  suffix: "、";}/ * Support number * /@counter-style cjk-earthly-branch{system:Alphabetic;symbols: "\5B50"" \4E11"" \5BC5"" \536F"" \8FB0"" \5DF3"\5348" "\672A"" \7533 "" \9149 "" \620C"" \4EA5";/ * obscure chen Shin hai * *  suffix: "、";}/* Chinese capital number-one thousand one to pick one * *@counter-style simp-chinese-formal{/* This is a predefined complex style in the CSS3 Counter Styles specification * /system:additive;Range:-99999999;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";}

Related reading

Candidate criteria for the consortium
Predefined Counter Styles

Thanks

Front-end development whqet, focus on front-end development, share related resources. CSDN Expert blog, Wang Haiqing hope to be able to help you.
This article is linked in the original, http://blog.csdn.net/whqet/article/details/43605725
You are welcome to visit the Independent blog Http://whqet.github.io

CSS Counter style try to play