問題タブ [css-counter]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
486 参照

javascript - 16 進数をインクリメントする方法

JavaScriptでcssカウンターを実装しようとしています。これまで、ほとんどのカウンターには初期の 16 進数値があり、それに応じて 1 ずつ増加することがわかりました。サイクル カウンターの場合は、それ自体が繰り返されます。しかし、cjk-decimal は、16 進数以下の数値カウンターのタイプでもあります。

同じ文字を順番に生成するために、JavaScriptで「\ 3007」を「\ 4E00」からnまでインクリメントする方法はありますか。

前もって感謝します。

0 投票する
1 に答える
547 参照

css - カウンター識別子 "list-item" を使用したブラウザーの奇妙な動作

TL;DR

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


問題:

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

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

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

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

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