4

I'm trying to use target-counter to describe references.

I found out about it from a List Apart article on making a book with HTML/CSS. There's only one other StackOverflow question and it didn't help me.

The attribute target-counter is not recognised by Chrome, Firefox or Opera, but it's mentioned in the CSS2 spec and I can't find any other docs that say whether it's supported or not. So I can't tell if it's my code or the browser that's to blame.

You can see the code on this Dabblet snippet, or look at the snippets below.

My HTML:

<h1 id="foo">Root level</h1>
<p><a href="#bar">linking to bar</a> and stuff</p>

<h1 id="bar">Second heading</h1>

<h2 id="sub">Subhead</h2>
<p>Hey there <a href="#foo">with a link to foo</a></p>

And CSS:

h1 {
    counter-increment: section;
}
h1::before {
    content: counter(section) ". ";
}
a::after {
    content: leader('.') target-counter(attr(href), section);
}

Any suggestions appreciated.

Community
  • 1
  • 1
benui
  • 6,440
  • 5
  • 34
  • 49

1 Answers1

9

target-counter() is a CSS3 function, not a CSS2 function. It says so in the document that you link to!

Since that function is part of a long-forgotten CSS3 Generated Content module draft, you won't find any browser support for it yet as current implementations only support the level 2 Generated Content spec. This means that current browsers only support the use of the level 2 attr() function with the content property on the ::before and ::after pseudo-elements.

Additionally, the ALA article you link to mentions Prince, a piece of software for turning Web documents into paged documents with CSS. As I mentioned in another answer (where the question references the same ALA article!), the print styles you're referring to may only be supported and intended for use by Prince, not the print functions of any Web browsers.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thanks for the reply! I should've noticed that it was CSS3. Regarding Prince, I thought that the `target-counter` function was available in the browser, not just for printed/paged media. – benui Feb 27 '12 at 12:52
  • Well, notice that it's defined in the Generated Content for Paged Media specification ;) – BoltClock Feb 27 '12 at 12:57
  • Hello from the future. Is this available in CSS3 as it stands today? – Ben Davis Jan 15 '20 at 22:11
  • @Ben Davis: It's still in GCPM, but I have no idea if it's implemented anywhere. – BoltClock Mar 10 '20 at 03:06