Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Counters - Explained the differences in browsers behavior with respect to CSS Counters. #13513

Closed
wants to merge 19 commits into from
Closed

CSS Counters - Explained the differences in browsers behavior with respect to CSS Counters. #13513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
592e751
Rewritten the Using CSS counter systematically (#13293)
debiru Mar 5, 2022
5dda3c8
Added a link for "Using CSS Counters" and normalize "See also" links …
debiru Mar 5, 2022
da0960c
remove unused reversed_headings_basic.png (#13293)
debiru Mar 5, 2022
2c16690
Improved sentence in english; "Usage basic counters" to "Basic counte…
debiru Mar 7, 2022
bb3d763
The long description at the beginning was split into two sentences. (…
debiru Mar 7, 2022
9dd98a6
Improved sentence in english; "Counters can be used by using" to "Cou…
debiru Mar 7, 2022
472be74
Described in detail why you are using counter-set. (#13513)
debiru Mar 7, 2022
75d005f
minor fixation; include dots in markup as code, such as "x-x." from "…
debiru Mar 7, 2022
aa30f3a
minor fixation; Firefox 68 for implicit counter-reset, and Firefox 82…
debiru Mar 7, 2022
6775abd
minor fixation; markup as code "li::marker" (#13513)
debiru Mar 7, 2022
2bde1bc
Update files/en-us/web/css/css_counter_styles/using_css_counters/inde…
debiru Mar 10, 2022
6660f2d
Update files/en-us/web/css/css_counter_styles/using_css_counters/inde…
debiru Mar 10, 2022
f04d348
Update files/en-us/web/css/css_counter_styles/using_css_counters/inde…
debiru Mar 10, 2022
4363836
Update files/en-us/web/css/css_counter_styles/using_css_counters/inde…
debiru Mar 10, 2022
fdd9b24
minor fixation; remove snapshot information about Safari. (#13513)
debiru Mar 10, 2022
d9c150c
clean up Using_CSS_counters description (#13513)
debiru Mar 14, 2022
5a23d8d
Rewritten the Using CSS counter systematically again (v2) (#13293)
debiru Mar 14, 2022
bdaa073
add "content" link to normalize "See also" links (#13513)
debiru Mar 14, 2022
10ab161
resolved conflicts; and fixes links for counter and counters from cou…
debiru Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion files/en-us/web/css/counter-increment/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ browser-compat: css.properties.counter-increment
---
{{CSSRef}}

> **Note:** The detailed behavior of CSS counters is described in [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters).

The **`counter-increment`** [CSS](/en-US/docs/Web/CSS) property increases or decreases the value of a [CSS counter](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) by a given value.

{{EmbedInteractiveExample("pages/css/counter-increment.html")}}
Expand Down Expand Up @@ -87,5 +89,6 @@ h1 {
- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)
- {{cssxref("counter-reset")}}
- {{cssxref("counter-set")}}
- {{cssxref("content")}}
- {{cssxref("counter", "counter()")}} and {{cssxref("counters", "counters()")}} functions
- {{cssxref("@counter-style")}}
- The {{cssxref("counter", "counter()")}} and {{cssxref("counters", "counters()")}} functions
6 changes: 4 additions & 2 deletions files/en-us/web/css/counter-reset/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ browser-compat: css.properties.counter-reset
---
{{CSSRef}}

> **Note:** The detailed behavior of CSS counters is described in [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters).

The **`counter-reset`** [CSS](/en-US/docs/Web/CSS) property resets a [CSS counter](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) to a given value.
This property will create a new counter or reversed counter with the given name on the specified element.

Expand Down Expand Up @@ -122,6 +124,6 @@ h1 {
- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)
- {{cssxref("counter-increment")}}
- {{cssxref("counter-set")}}
- {{cssxref("@counter-style")}}
- {{cssxref("content")}}
- {{cssxref("counter", "counter()")}} and {{cssxref("counters", "counters()")}} functions
- {{cssxref("content")}} property
- {{cssxref("@counter-style")}}
8 changes: 5 additions & 3 deletions files/en-us/web/css/counter-set/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ browser-compat: css.properties.counter-set
---
{{CSSRef}}

> **Note:** The detailed behavior of CSS counters is described in [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters).

The **`counter-set`** [CSS](/en-US/docs/Web/CSS) property sets a [CSS counter](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) to a given value. It manipulates the value of existing counters, and will only create new counters if there isn't already a counter of the given name on the element.

> **Note:** The counter's value can be incremented or decremented using the {{cssxref("counter-increment")}} CSS property.
Expand Down Expand Up @@ -82,8 +84,8 @@ h1 {
## See also

- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)
- {{cssxref("counter-increment")}}
- {{cssxref("counter-reset")}}
- {{cssxref("@counter-style")}}
- {{cssxref("counter-increment")}}
- {{cssxref("content")}}
- {{cssxref("counter", "counter()")}} and {{cssxref("counters", "counters()")}} functions
- {{cssxref("content")}} property
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why was content removed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Originally, Using_CSS_counters, counter-reset, conuter-increment, counter-set, counter() and counters() descriptions were inconsistent (did not normalized).

The content property was excluded from the counter-reset and counter-set pages because it is not directly related to the CSS Counter. On the other hand, it is kept in the counter() and counters() functions.

If you have a suggestion that it should be written, I will add it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bdaa073 added content link.

- {{cssxref("@counter-style")}}
5 changes: 3 additions & 2 deletions files/en-us/web/css/counter/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,8 @@ li::after {

- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)
- {{cssxref("counter-reset")}}
- {{cssxref("counter-set")}}
- {{cssxref("counter-increment")}}
- {{cssxref("counter-set")}}
- {{cssxref("content")}}
- {{cssxref("counters", "counters()")}} function
- {{cssxref("@counter-style")}}
- CSS [`counters()`](/en-US/docs/Web/CSS/counters()) function
6 changes: 3 additions & 3 deletions files/en-us/web/css/counters/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,9 +157,9 @@ li::before {
## See also

- [Using CSS Counters](/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)
- {{cssxref("counter-set")}}
- {{cssxref("counter-reset")}}
- {{cssxref("counter-increment")}}
- {{cssxref("counter-set")}}
- {{cssxref("content")}}
- {{cssxref("counter", "counter()")}} function
- {{cssxref("@counter-style")}}
- CSS [`counter()`](/en-US/docs/Web/CSS/counter()) function
- {{cssxref("::marker")}}
Loading