CSS目标计数器属性无法识别 [英] CSS target-counter attribute not recognised

问题描述

我尝试使用 target-counter 来描述引用。

我从中发现了它列出文章关于制作HTML / CSS的书。只有另一个StackOverflow问题，它并没有帮助我。

target-counter 属性无法被Chrome，Firefox或Opera识别，但它在 CSS2规范，我找不到任何其他文档说明它是否是否支持。所以我不知道它是我的代码还是浏览器的责任。

您可以在 this Dabblet snippet ，或者查看下面的代码片段。

我的HTML：

 < h1 id =foo>根级别< / h1> 
< p>< a href =＃bar>连结到栏< / a>和东西< / p> 
 
< h1 id =bar>第二个标题< / h1> 
 
< h2 id =sub> Subhead< / h2> 
< p>在那里< a href =＃foo>与foo的链接< / a>< / p> 
  

和CSS：

  h1 {
 counter-increment：section; 
} 
 h1 :: before {
 content：counter（section）。; 
} 
 a :: after {
 content：leader（'。'）target-counter（attr（href），section）; 
} 
  

任何建议都可以使用。

解决方案

target-counter（）是一个 CSS3函数，不是CSS2函数。它在链接到的文档中是这样说的！

由于该函数是长期被遗忘的CSS3生成内容模块草案的一部分，因此您不会找到任何浏览器支持因为目前的实现只支持 2级生成内容规范。这意味着当前的浏览器只支持在 属性上使用 attr（） code> :: before 和 :: after 伪元素。

另外，您链接到的ALA文章提到王子，这是一款用于将Web文档转换为分页文档的软件CSS。正如我在另一个答案中提到的（问题引用相同的ALA文章！），您所指的打印样式可能只支持并打算供Prince使用，而不是任何Web浏览器的打印功能。

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.

解决方案

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.

这篇关于CSS目标计数器属性无法识别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！