CSS Counter Style trial, csscounter

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.