cssのカウンター機能が作動しない

実現したいこと

cssのカウンター機能を使って、特定の要素の出現ごとに擬似要素の数値を1ずつ増やしたい。

発生している問題・分からないこと

「container-type: inline-size;」をカウントしたい要素の親要素に指定するとmacのsafari(バージョン17.6)でカウンターの数が増えず、00になってしまう。macのchrome(バージョン131.0.6778.86)では大丈夫でした。「container-type: inline-size;」の記述を残しつつsafariでカウンターを使いたい。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>テスト</title>
8    <style>
9        .point_wrap {
10            counter-reset: point;
11        }
12
13        .point {
14            counter-increment: point;
15        }
16
17        .point_title1::after {
18            content: counter(point, decimal-leading-zero);
19        }
20
21        .point_inner {
22            container-type: inline-size;
23        }
24    </style>
25</head>
26
27<body>
28
29
30    <div class="point_wrap">
31
32
33
34        <section class="point">
35            <div class="point_inner">
36                <h2 class="point_title1">POINT</h2>
37            </div>
38        </section>
39
40
41
42        <section class="point">
43            <div class="point_inner">
44                <h2 class="point_title1">POINT</h2>
45            </div>
46        </section>
47
48
49
50        <section class="point">
51            <div class="point_inner">
52                <h2 class="point_title1">POINT</h2>
53            </div>
54        </section>
55
56
57
58    </div><!--/.point_wrap-->
59
60
61
62</body>
63
64</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

日本語で検索しても同ケースが出てこないので英語でもgoogleで検索。htmlやcssをの一部の記述をコメントアウトしたり削除することにより簡素化して再現性をチェック。その結果「container-type: inline-size;」の有無が関係しているようだった。

補足

検証ツールで「container-type: inline-size;」をつけ外ししても、safariの数字は00のままだが、元のソースコードから「container-type: inline-size;」を消してsafariをリロードするとカウンターが機能する。

kjshdfiuasye

2024/11/28 10:05

日本語ページにはなかったのですが、英語の https://developer.mozilla.org/en-US/docs/Web/CSS/container-type のNote:に関係ありそうなことが書いてあったので今読解中です。

juner

2024/11/29 00:19

とりあえず playground https://livecodes.io/?x=id/3i8k7cy9zkf を用意して windows chrome では再現しないことを確認しました。

Lhankor_Mhy

2024/11/29 00:35

contain: style; なら仕様通りの動作だと思うんですが、contain: inline-size; でもそうなってしまうのはちょっとバグっぽいですね。

Lhankor_Mhy

2024/11/29 01:05 編集

contain: style をしてもカウンターが更新されない、という Issue はありました。これが、『検証ツールで「container-type: inline-size;」をつけ外ししても、safariの数字は00のまま』という現象かもしれないですね。 https://bugs.webkit.org/show_bug.cgi?id=246764

Lhankor_Mhy

2024/11/29 01:11 編集

と、思ってたんですが、contain: style; でもカウンターリセットされませんでした。私の理解が浅かったようです、すみません。インクリメントしてるのは外側のスコープでしたね。いずれにせよ、Safari のバグっぽいですね。英語わかる人、Issue 出してほしい……

kjshdfiuasye

2024/11/29 01:39

junerさん、Lhankor_Mhyさん、コメントありがとうございます。私がコメントしたURLの翻訳だと「container-typeとcontainer-nameプロパティを使用する場合、containプロパティのstyleとlayout値が自動的に適用されます。」とのことでした。containプロパティのstyle値は、カウンターに影響を与えるようで、下記URLの見出し「スタイルの閉じ込め」に言及がありました。 https://www.tohoho-web.com/css/prop/contain.htm こういう仕様なのかもしれません。自動的に適用される「contain:style」でカウンターに悪影響があるなら「contain:none;」で上書きしようと思ったのですが効きませんでした。「container-type: inline-size;」の記述を残しつつsafariで今回のHTML構造でカウンターを使うのは諦めた方がいいかもしれません。

Lhankor_Mhy

2024/11/29 01:56 編集

ああ、ほんとですね。すっかり contain: inline-size しか適用されないと思い込んでいました。ただ、それでも contain: style によるカウンタースコープの生成はサブツリーにしか影響がないはずなので、Safari のバグではあると思います。 CSSカウンターのバグは多いみたいで、私も以前質問したことがあります。 https://teratail.com/questions/an11q13sxrcniq

kjshdfiuasye

2024/12/02 08:50

＞contain: style によるカウンタースコープの生成はサブツリーにしか影響がない ↑そうなんですね。知らなかったです。コメントありがとうございます。