4

TL;DR

カウンターに名前を付けないでくださいlist-item

問題：

CSS カウンターは比較的理解しやすく、十分に文書化されており、ブラウザーのサポートも充実しています。

しかし、理解できない予期しない動作に遭遇し、なぜこれが発生するのか知りたい. おそらくブラウザのバグでしょう…</p>

次の例では、カウンターが期待どおりに機能していることがわかります。

ol {
  list-style-type: none;
  counter-reset: list-counter;
}

ol>li {
  counter-increment: list-counter;
}

ol>li:before {
  content: counter(list-counter) '. ';
}
<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
</ol>

しかし、カウンターの識別子を に変更すると、list-itemブラウザーによって動作が異なることがわかります。

ol {
  list-style-type: none;
  counter-reset: list-item;
}

ol>li {
  counter-increment: list-item;
}

ol>li:before {
  content: counter(list-item) '. ';
}
<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
</ol>

Chrome と Firefox では期待どおりに動作しますが、Edge と Internet Explorer 11 では 2 からカウントを開始して 2 ずつ増加し、Safari では 0 からカウントを開始して 1 ずつ増加します。

たとえば、プロパティをコメントアウトすると、さらに奇妙になりcounter-resetます。その後、Safari は正しくカウントしますが、Chrome は 2 からカウントを開始しますcounter-increment。Chrome と IE/Edge だけをコメント アウトすると、実際には 0 が表示されるはずですが、正しくカウントされます。

これをいじると、さまざまなブラウザーでさらに奇妙な動作が発生します。これはすべて、識別子がlist-item.

最初にこの問題に遭遇したとき、それ以上調査せずに最初に想定したのは、少なくともdisplayプロパティ valueに関係しているということlist-itemでした。MDN が述べているように:

list-item キーワードにより、要素は、そのリスト スタイルのプロパティ (箇条書きなど) によって指定された内容を持つ ::marker 疑似要素を生成し、それ自体の内容に対して指定された型の主要なボックスを生成します。

参照: https://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem

しかし、これに関する詳細なドキュメントが見つからなかったため、さまざまなベンダーがこのような同様のバグをどのように実装できるのだろうかと思います...</p>

質問：

ここで私が本当に見逃しているものはありますか？仕様による識別子の予約語はありますか? について何か特別なことはありlist-itemますか?

W3C仕様では、それについて何も見つかりません:

https://www.w3.org/wiki/CSS/Properties/counter-increment

https://www.w3.org/wiki/CSS/Properties/counter-reset

追加情報：

完全を期すために、使用されているバージョンを次に示します。

  • Chrome 70.0.3538.110 MacOS Mojave 10.14.1
  • クロム 70.0.3538.110 Windows 10 17134.407
  • エッジ 17.17134 Windows 10 17134.407
  • Firefox 63.0.3 MacOS Mojave 10.14.1
  • Firefox 63.0.3 Windows 10 17134.407
  • Internet Explorer 11.407.17134.0 Windows 10 17134.407
  • Safari 12.0.1 MacOS Mojave 10.14.1
4

1 に答える 1

5

Gabriele Petrioli の推測は正しかった。css-lists-3 speclist-itemで定義されている組み込みカウンターで、次のように説明されています。

[...] リスト項目は、特別な「list-item」カウンターを自動的にインクリメントします。'counter-increment' プロパティが 'list-item' カウンターの異なるインクリメントを手動で指定しない限り、カウンターが通常インクリメントされるのと同時に、リスト項目ごとに 1 ずつインクリメントする必要があります。(これは「counter-*」プロパティの値には影響しません。)

このカウンターは CSS2 で定義されていないため、css-lists-3 で新しく追加されました。しかし、それは実際には非常に古いものです — CSS3 仕様の FPWD がとにかく行く限り、少なくとも 16 歳です。一般に、CSS3 ではリスト スタイルとカウンター スタイルが大幅にアップグレードされています。これは、「CSS カウンターは比較的理解しやすく、ドキュメントも充実しており、ブラウザーのサポートも充実している」ということを意味します。新しい仕様が完成して採用されると、しばらくの間、真実でなくなる可能性があります;) 実装または仕様が最初に来たかどうかはわかりませんが、おそらく実装が追加されたのは、当時ほとんど誰list-itemもカウンターとして使用していなかったからです ( CSS2 の採用は、IE6 がまだ新しい 2002 年には普及していませんでした)。

機能自体は、10 年以上にわたって仕様に含まれていたにもかかわらず、まだ未解決のままであり、相互運用性はまだ期待されていません。いずれにせよ、あなたのアドバイスは適切です: カウンターに名前を付けないでくださいlist-item。実際、これはカウンターの特別なキーワード値であり、前述の相互運用性の問題により、オーサー CSS で使用すると予期しない結果が生じる可能性があります。

W3C Wiki は W3C によって保守されていますが、「W3C 仕様」ではないことに注意してください。仕様とは、ワーキング ドラフト、推奨候補、提案された推奨事項、w3.org の TR として見つかった推奨事項、または dev.w3.org の編集者のドラフト、またはそれぞれの WG が ED をホストすることを決定した場所です。プロパティの wiki ページには、実際の仕様に存在する技術的な詳細が含まれていないことが多いため、そこだけを見ていると、それらの詳細の多くを見逃してしまいます。

于 2018-11-22T03:38:20.317 に答える