はじめに
この記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。
こんにちは。debiru です。2010年頃に Sugamo.css という勉強会に参加して人生が変わりました。
さて、今日は counter-reset プロパティの謎に迫っていきたいと思います。
クイズです：次の HTML, CSS の表示結果は？
<ul>
<li>Alice</li>
<li>Bob</li>
<li>Carol</li>
<li>Dave</li>
</ul>
ul { counter-reset: num; }
li { counter-increment: num; }
li::before { content: counters(num, ".") ". "; }
li:nth-child(2) { counter-reset: num; }
li:nth-child(2) に対する counter-reset がなければ、次のような表示結果になります。
1. Alice
2. Bob
3. Carol
4. Dave
li:nth-child(2) { counter-reset: num; } を追加した場合、次の選択肢 (1), (2) のどちらの表示結果になるでしょうか。
選択肢 (1)
1. Alice
1.1. Bob
1.2. Carol
1.3. Dave
選択肢 (2)
1. Alice
1.1. Bob
2. Carol
3. Dave
答え
早速ですが、答えです。
Chrome, Safari, Edge, Opera, Vivaldi, そして Firefox 81 以下では、選択肢 (1) の表示結果になります。
一方、Firefox 82 以上では、選択肢 (2) の表示結果になります。
の冒頭にある「試してみましょう」で実際に表示結果を確認することができます。
なぜ、表示結果に違いがあるのでしょうか。Firefox 82 では一体何が起きたのでしょうか。
その謎を解明すべく、我々はアマゾンの奥地へと向かった。
Firefox 82 のバグではなかった
（上記とは少し違うテストケースですが）Firefox 82 は counter-reset に関してバグっていませんか？ってレポートを書いたら「いやいや、仕様通りだよ」とリジェクトされました。
そこから、この挙動の差異を探る旅が始まりました。
Firefox 82 で取り込まれた修正の正体
……については、過去に書いた記事を参照ください。
「CSS カウンターの使用」のページで解説した方がいいのでは
MDN には「CSS カウンターの使用」という CSS カウンター周りの説明をまとめている記事があります。そこで前述の実装差異について解説した方がよいのではないかと思い、英語版記事のリライトを試みました。
なお、MDN の翻訳記事（日本語版など）というのは、英語版に忠実である（内容が一致する）必要があります。そのため、内容自体を書き換えたいと思った場合は、英語版の記事を修正する必要があるのです。
いろいろあって、2回目リライトを行ったものがこちらです。
ちょっと長くて、まあ読む気にならないと思いますが、CSS カウンター、特に counter-reset プロパティの挙動と Firefox の実装について知りたい方はぜひお読みください。
そんなわけで、これを MDN ページの英語記事としてリライトしてプルリクを送ったのですが、構成に問題がある（本文中にブラウザー互換性の具体的な話を記述すべきでない、等）とリジェクトされ、結果的にうまい具合に着地しなかったのでリライト版は不採用となりました。
ただ、Firefox 82 の挙動については確かに言及しておくべきだ、と認識してもらえたようで、「ブラウザーの互換性」テーブルの方に Firefox 82 に関する行を追加してもらえました。
Resets counter on current element (not sibling elements). という行です。
さいごに
MDN の英語版の内容を抜本的に書き換えるのは、英語力の問題、英語版メンテナとの思想の違い（というか私が MDN 英語版のしきたりを知らないだけ）などがありとても難しいと実感したのでした。
こんな記事を最後まで読んでくれてありがとう！
2023 年の MDN 翻訳 Advent Calendar の参加者が絶望的にいないので、こんな記事を書いてしまいました。たぶん明日も書きます。
おわり。