web-dev-qa-db-ja.com

CSSのみでpreに行番号を作成します

各行の前に行番号を指定して、コードの事前ボックスのスタイルを設定しようとしています。私はCSSのみでそれを行うことを好みます。これは私がやったことです

pre {
  background: #303030;
  color: #f1f1f1;
  padding: 10px 16px;
  border-radius: 2px;
  border-top: 4px solid #00aeef;
  -moz-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #000;
}
pre span {
  display: block;
  line-height: 1.5rem;
}
pre span:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888
}
<pre>
  <span>lorem ipsum</span>
  <span>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum,\ </span>
  <span>lorem ipsum.</span>
  <span>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
</pre>

ただし、すべての行の番号は1です。増分は機能しません。 jsfiddle です

  1. 私が間違っているのは何ですか？
  2. このCSSのみのソリューションとブラウザの互換性は何ですか？
htmlcsscss-counter
59
Tasos

カウンタが増加しないのはなぜですか？

親タグレベルでカウンタをリセットまたは作成しているわけではありません。次の行をpreセレクターに追加すると、コードは正常に機能します。親レベルで（counter-resetを使用して）カウンターを作成しない場合、各要素は独自のカウンターを作成してからインクリメントします。

counter-reset: line;

カウンターはいつ作成されますか？

W3C Specs から：

Counter-resetプロパティは、要素に新しいカウンターを作成します。

Counter-setおよびcounter-incrementプロパティは、既存のカウンターの値を操作します。それらは要素に指定された名前のカウンターがまだない場合にのみ新しいカウンターを作成します。

この場合、counter-resetプロパティを使用してカウンターを作成していないため、counter-increment擬似要素セレクターのspan:beforeプロパティは指定されたカウンターを作成します名前を付けてインクリメントします。

カウンターは現在の値をどのようにして知るのですか？

再び W3C Specs から：

要素に前の兄弟がある場合、兄弟のすべてのカウンターを継承する必要があります。それ以外の場合、要素に親がある場合、親のすべてのカウンターを継承する必要があります。それ以外の場合、要素には空のカウンターセットが必要です。

次に、要素は文書の順序で直前の要素からカウンタ値を継承します。

ここでは、カウンターは擬似要素でのみ作成されるため、その親（span）はその作成を認識しないため、このspanの兄弟はカウンターを継承しません。カウンターも継承しないため、前の要素から現在の値も取得しません。

なぜ親のカウンターを作成するのですか？

カウンターがpreタグレベルで作成されると、カウンターはその各子要素に渡されます（つまり、各spanに、各span:beforeが知っているか、このカウンタを継承します）、span:beforeのインクリメントステートメントは、親から受け取ったカウンタの値のみをインクリメントします。

これで、各spanはその前の兄弟からlineカウンターを継承するため、ドキュメントの順序の前の要素から現在の値も継承するため、1から2、3などに増え続けます。

スパンまたはプレワークでカウンターインクリメントを使用する理由

ご想像のとおり、counter-incrementプロパティcreatesが存在しない場合、新しいカウンターを作成しますカウンターですので、spanにcounter-increment: lineを追加すると、最初に検出されたスパンにカウンターが作成されます。現在、spanの各兄弟はこのカウンターを継承しているため、毎回新しいカウンターを作成するのではなく、前の要素から値を継承するだけです。したがって、このアプローチは機能しますが、counter-resetステートメントを使用してカウンターを明示的に作成することをお勧めします。

ブラウザはどのようにサポートしていますか？

CSSカウンターのブラウザーサポートは信じられないほど優れています。 CSSの新しいものではなく、 IE8でもサポートされています 。

デモ：

pre {
  background: #303030;
  color: #f1f1f1;
  padding: 10px 16px;
  border-radius: 2px;
  border-top: 4px solid #00aeef;
  -moz-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #000;
  counter-reset: line;
}
pre span {
  display: block;
  line-height: 1.5rem;
}
pre span:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888
}
<pre><span>lorem ipsum</span>
<span>&gt;&gt; lorem ipsum</span>
<span>lorem ipsum,\ </span>
<span>lorem ipsum.</span>
<span>&gt;&gt; lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
</pre>
72
Harry

スパンでlineをインクリメントする必要があります。

pre span {
    display: block;
    line-height: 1.5rem;
    counter-increment: line;
}

この更新された jsfiddle をご覧ください。

1
Huelfe

こんにちは、以前の/より高い負荷のアイテムのカウンターをリセットする必要があります、チェックアウト https://jsfiddle.net/n2xkgt7s/2/pre { counter-reset: line; }

0
Marius Brits