Making numbered lists
I was always annoyed by how difficult it is to make numbered lists. Quite often, the design requires something more than just a number - a different font, size, color, background, and you never know?
You too Welcome under cat.
The traditional approach to solving the problem is to block the default numbering of the list numbering by the browser, and get rid of the standard element numbering (li) to insert hard-coded numbers instead. This makes it possible to arrange them the way we want.
')
Visually, it works, but this use of lists is not entirely correct from a semantic point of view. If you look at such a pseudo-numbered list with CSS turned off, then we will see either duplicate numbering, or both bullets and numbering together. It seems to me that this is a flaw.
So when I recently again faced with the design of numbered lists, I decided to try a different approach, without faking the numbering. Due to the fact that Internet Explorer is finally catching up with other browsers in the area of ​​CSS support and increases the space for using the concept of progressive enhancement, this time I was able to find an acceptable solution to the problem. If you (well ... your client) can accept the fact that numbered lists will be deprived of design in IE 7 and below, this technique may be useful.
A trick to use generated CSS content (CSS generated content) to create and embed in the list of numbers after the removal of the standard. To begin with, I designed an ordered numbered list as a simple example of using the technique . Please note : now the example in CSS does not have rollback for old browsers and nested lists are not taken into account. As soon as there is time, I will correct it.
The example CSS is as follows:
(Code with adequate lighting: pastebin.com/JmKJCn0J )
Key points are as follows:
list-style: none: overrides list numbering by default
counter-reset and counter-increment: create a numbering space and increase the counter value. Both are described in CSS 2.1 12.4 Automatic counters and numbering .
content: Inserts the index of the created counter. Described here: CSS 2.1 12.2 The 'content' property
: before - pseudo-element
Follow links for a detailed description of these properties.
You can apply any design to the generated element. But we must not forget that it will be if the list is very long - is there enough space for three- or four-digit numbers? Not a very common case, but still watch the width of the element containing the numbers.
As I already mentioned, this will not work in IE 7 and older, since support for pseudo-elements: before and: after appeared only in IE 8. Using conditional comments or CSS hacks to restore default numbering you can get numbering in old browsers , just without making numbers. Most people will survive this.
You too Welcome under cat.
The traditional approach to solving the problem is to block the default numbering of the list numbering by the browser, and get rid of the standard element numbering (li) to insert hard-coded numbers instead. This makes it possible to arrange them the way we want.
')
Visually, it works, but this use of lists is not entirely correct from a semantic point of view. If you look at such a pseudo-numbered list with CSS turned off, then we will see either duplicate numbering, or both bullets and numbering together. It seems to me that this is a flaw.
So when I recently again faced with the design of numbered lists, I decided to try a different approach, without faking the numbering. Due to the fact that Internet Explorer is finally catching up with other browsers in the area of ​​CSS support and increases the space for using the concept of progressive enhancement, this time I was able to find an acceptable solution to the problem. If you (well ... your client) can accept the fact that numbered lists will be deprived of design in IE 7 and below, this technique may be useful.
A trick to use generated CSS content (CSS generated content) to create and embed in the list of numbers after the removal of the standard. To begin with, I designed an ordered numbered list as a simple example of using the technique . Please note : now the example in CSS does not have rollback for old browsers and nested lists are not taken into account. As soon as there is time, I will correct it.
The example CSS is as follows:
ol { counter-reset:li; /* */ padding:0; /* */ list-style:none; /* */ } ol li { position:relative; /* */ margin:0 0 6px 2em; /* , */ padding:4px 8px; border-top:2px solid #666; background:#f6f6f6; } ol li:before { content:counter(li); /* */ counter-increment:li; /* 1 */ /* */ position:absolute; top:-2px; left:-2em; width:2em; padding:4px 0; border-top:2px solid #666; color:#fff; background:#666; font-weight:bold; font-family:"Helvetica Neue", Arial, sans-serif; text-align:center; } (Code with adequate lighting: pastebin.com/JmKJCn0J )
Key points are as follows:
list-style: none: overrides list numbering by default
counter-reset and counter-increment: create a numbering space and increase the counter value. Both are described in CSS 2.1 12.4 Automatic counters and numbering .
content: Inserts the index of the created counter. Described here: CSS 2.1 12.2 The 'content' property
: before - pseudo-element
Follow links for a detailed description of these properties.
You can apply any design to the generated element. But we must not forget that it will be if the list is very long - is there enough space for three- or four-digit numbers? Not a very common case, but still watch the width of the element containing the numbers.
As I already mentioned, this will not work in IE 7 and older, since support for pseudo-elements: before and: after appeared only in IE 8. Using conditional comments or CSS hacks to restore default numbering you can get numbering in old browsers , just without making numbers. Most people will survive this.
Source: https://habr.com/ru/post/120034/
All Articles