5

Has the Firefox desktop v84 update broken the CSS counter-reset: functionality? Chrome and Edge render ok but not Firefox Can anybody confirm?

Below is a sample of the code that I'm using:

<html>
<head>
<style type="text/css">
body
{
counter-reset: section subsection;
}
p.section
{
  counter-reset: subsection;
}
p.section:before
{
  counter-increment: section;
  content: "" counter(section) ".0" ": ";
  counter-reset: subsection;
}
p.subsection:before
{
  counter-increment: subsection;
  content: "" counter(section) "." counter(subsection) ": ";
}
</style>
</head>
<body>
<p class="section">Paragraph should be 1.0</p>
<p class="section">Paragraph should be 2.0</p>
<p class="subsection">Paragraph should be 2.1</p>
<p class="subsection">Paragraph should be 2.2</p>
<p class="section">Paragraph should be 3.0</p>
<p class="section">Paragraph should be 4.0</p>
<p class="subsection">Paragraph should be 4.1</p>
</body>
</html>
Venkata Shivaram
  • 343
  • 4
  • 18
An Observer
  • 61
  • 2

4 Answers4

1

Ouroborus's comment on your question is the key: use counter-set on your body style to create the counters, and continue to use counter-reset on other elements to reset them. I had the same problem with Firefox, and switching to counter-set on the body style fixed it.

This seems to be a recent Firefox change: previously, the counters seemed to be implicitly created, and now it seems that creation has to be done explicitly.

Tony Garnock-Jones
  • 905
  • 7
  • 9
  • 2
    Note this answer says *switch* `counter-reset` to `counter-set`. I first tried with both `counter-set` and `counter-reset` for fear of breaking in other browsers -- this did not work. I had to remove `counter-reset` from the `body` to get things working properly. – Steve Apr 13 '21 at 14:00
  • You got it - it's the switch to `set` rather than `reset` that is the real fix here. – randomsearch Nov 07 '22 at 15:33
1

Actually, in current W3C CSS specification draft, counter-reset is expected to instantiate a new counter, whereas counter-set edits an existing counter (and creates a new one in case there is none with that name).

In your code:

  • The properties counter-reset: subsection; create new counters called “subsection” in body, p.section and p.section::before scopes respectively.
  • p.subsection inherits both counters from its parent (body).
    • Chromium wrongly inherits the subsection counter created by its preceding sibling (but not the one created by ::before pseudo-element).
  • Then, p.subsection counter values have to be updated from preceding element ones.
    • In Firefox ≥ 82, the original subsection counter has not been updated, since you create a new counter each time.
    • In Chromium, you have inherited the counter from preceding sibling, so its value can be updated and is actually used. But the subsection counter created at body level is useless.

To fix you code, complying with current specification and having a browser consistent behavior, you have two possibilities:

Use counter-set: subsection rule

In order to edit the counter instead of creating a new one. Note counter-set is not supported by Safari yet.

body
{
counter-reset: section subsection; /* subsection counter is “global” */
}
/*
* Useless rule, you already perform a reset in .section::before *
p.section
{
  counter-reset: subsection;
} */
p.section::before
{
  counter-increment: section;
  content: counter(section) ".0: ";
  counter-set: subsection; /* Edits the body counter to set it to 0 */
}
p.subsection::before
{
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) ": ";
}
<html>
<body>
<h3>With counter-set</h3>
<p class="section">Paragraph should be 1.0</p>
<p class="section">Paragraph should be 2.0</p>
<p class="subsection">Paragraph should be 2.1</p>
<p class="subsection">Paragraph should be 2.2</p>
<p class="section">Paragraph should be 3.0</p>
<p class="section">Paragraph should be 4.0</p>
<p class="subsection">Paragraph should be 4.1</p>
</body>
</html>

Make .subsection children of .section

In order to properly inherit counters.

body {
  counter-reset: section; /* subsection counter is not “global” */
}
div.section::before
{
  counter-increment: section;
  content: counter(section) ".0: ";
  counter-reset: subsection; /* Creates a new counter for each section. */
}
div.subsection::before
{
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) ": ";
}
<html>
<body>
<h3>Tree ordering</h3>
<div class="section">Should be 1.0</div>
<div class="section">Should be 2.0
  <div class="subsection">Should be 2.1</div>
  <div class="subsection">Should be 2.2</div>
</div>
<div class="section">Should be 3.0</div>
<div class="section">Should be 4.0
  <div class="subsection">Should be 4.1</div>
</div>
</body>
</html>

Note there are still discussions, so you should not expect counter-reset CSS feature to be stable.

Pols12
  • 102
  • 2
0

Can you please check the below code? Hope it will work for you. No need to reset the subsection in the body, because we need to reset the counter after every section. so we have kept the counter reset subsection in the section as it is.

Please refer to this link https://jsfiddle.net/yudizsolutions/baqnzf39/6/

<html>

<head>
  <style type="text/css">
    body {
      counter-reset: section;
    }

    p.section {
      counter-reset: subsection;
    }

    p.section:before {
      counter-increment: section;
      content: ""counter(section) ".0"": ";
      counter-reset: subsection;
    }

    p.subsection:before {
      counter-increment: subsection;
      content: ""counter(section) "."counter(subsection) ": ";
    }
  </style>
</head>

<body>
  <p class="section">Paragraph should be 1.0</p>
  <p class="section">Paragraph should be 2.0</p>
  <p class="subsection">Paragraph should be 2.1</p>
  <p class="subsection">Paragraph should be 2.2</p>
  <p class="section">Paragraph should be 3.0</p>
  <p class="section">Paragraph should be 4.0</p>
  <p class="subsection">Paragraph should be 4.1</p>
</body>

</html>
Yudiz Solutions
  • 4,216
  • 2
  • 7
  • 21
0

Always use

counter-set foo 0

rather than

counter-reset foo

It seems Firefox's counter-reset has different semantics from Chrome. This works around their differences.

randomsearch
  • 109
  • 1
  • 5