CSS计数器(counter)入门

7jur9kmmsuuwej7cexpk_getting-started-with-css-counters

作为一名WEB开发者,恰当的表示信息是一项重要的工作。正恰当的显示信息一种最常见的方式是通过层次结构表示,回答“先发生什么?”这个问题。

层次可以通过对对象编号表示。在CSS中,除了有序列表<ol></ol>,没有其他元素允许我们增加顺序。如果我们想显示数字,我们不得不做一些预处理。 跟踪索引,确保自动递增等。类似这样:

<ul class="numbered-list">
    <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
    <li class="numbered-list__item">
        <span class="numbered-list__counter">
            <?php echo $i ?>
        </span>
        <!-- Remaining markup -->
    </li>
    <?php endfor ?>
</ul>

这是一个很好的点子,但它有其局限性。如果我们想使用字母,罗马数字,希腊字符等作为索引序号,都需要使用自定义的库来实现。

幸运的是,使用CSS我们可以做自动递增索引这样的事情,而不会打破原来的结构。

计数器复位和计数器递增

在我们开始使用CSS计数之前,你应该知道计数涉及两件事情:counter-resetcounter-increment
counter-reset(复位,重置)是我们重置计数器(:默认是0)或给计数器设置一个初始计数值(注:即从什么值开始计数)。而counter-increment(递增)是实际增加计数值。赶紧看看下面的HTML代码。

我们需要的是一个基本的,但简单易懂的HTML结构。在您的css文件中,我们需要定义 counter-resetcounter-increment

<ul class="numbered-list">
    <li class="numbered-list__item">
        <span class="numbered-list__counter"></span>
        <span class="numbered-list__text">Minion ipsum</span>
    </li>
</ul>

让我们设置<ul class="numbered-list"></ul>作为计数列表的重置点,这个很简单:

.numbered-list {
    counter-reset: counter-name;
}

注意: counter-name 可以是你想要的任何东西。

接下来,我们需要设置<span class="numbered-list__counter"></span>,来增加他的值。这么做:

.numbered-list__counter {
    counter-increment: counter-name;
}

通过参考上面设定的重置点,我们告诉计数器通过 counter-increment 以开始计数。

由于计数器增加产生的内容很像 :before:after, 我们可以使用 :before:aftercontent 属性来插入计数器。此外,counter CSS函数允许我们完善(自定义)计数器的值(注:如果想重复多次计数器可以使用 counters() 函数)。

.numbered-list__counter:before {
    counter-increment: counter-name;
    content: counter(counter-name);
}

dwfy8ty8qesetlwdr0tt_example-of-counting-with-css

注意:我省掉了一些内容样式,以保持我们的CSS最简化。

偏移增量索引

counter-increment 也可以取正值或负值以改变增量值的步数。

counter-increment: counter-name 2;
/* counter-increment: counter-name +2; */

上面的将以2倍数增加增量值。

vegqmgvutgs94jdkkk2j_offseting-the-counters-index

要反向增量,可以使用负值,将以所提供的索引倍数值减少。

counter-increment: counter-name -2;

改变计数器初始值(开始点)

counter-reset声明之后传递一个整数,告诉浏览器更改初始值的偏移量。

.numbered-list {
    counter-reset: counter-name 2;
}

您还应该知道计数器复位值默认为0。将这个值设置为2,计数器以3开始计数,就像这样:

dw7hve8jtqkxsbkw3pmu_new-counter-starting-point

倒序计数器

倒序计数器会涉及到在 counter-increment 上使用负值索引。如果列表是动态生成的,这也可能造成很棘手的问题。用户必须找到一种方法来追踪索引。

就我个人而言,看到别人都是这样做的:

<ul class="numbered-list" style="counter-reset: name {{{PHP1}}};">
    <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
    <li class="numbered-list__item">
        <span class="numbered-list__counter">
            <?php echo $i ?>
        </span>
        <!-- Remaining markup -->
    </li>
    <?php endfor ?>
</ul>

counter-reset 样式设置为内联样式,使用php以生成 counter-reset 的值。在css文件中,我们可以将 counter-increment 设置为负值。

50m5atmvspabr1sss1zj_reversing-a-counters-index-with-css

使用其他格式

除了用数字递增计数器之外,我们也可以使用字母(alphabets),希腊字符(greek characters),罗马数字(roman numerals)等。

如果你是罗马数字的粉丝(像我一样),然后使用罗马数字 – 所有你需要做的只是传递第二个参数(lower-roman)给 counter css函数就可以了。

content: counter(counter-name, lower-roman);

其他选项包括 decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha

CSS counter的浏览器支持情况

fad15kh4qk6uma89v4wz_css-counters-browser-support

就像大家说的“一张图片胜过千言万语”。CanIUse的这个图表说明了CSS计数器的支持的支持情况。它们在Internet Explorer和Safari中得到很好的支持,别的就更不用说了。所以你不需要担心使用CSS计数器的兼容性问题,他们有大量的浏览器支持。

就个人而言,我觉得CSS计数器很酷。对一些人来说,使用CSS计数器的好处是不言而喻的,因为它们可以不占任何代码结构和本赛季方法,推荐大家使用它。

以上内容翻译自: 修正了原文一些错误

计数器的高级使用

这里介绍几个CSS计数器实用的应用场景,

自定义 CSS counter(计数器)内容

content属性中,counter CSS函数可以和其他字符串连接来自定义计数器的内容,例如:

See the Pen 自定义CSS counter(计数器)内容 by (@feiwen8772) on CodePen.dark

CSS counter(计数器)嵌套

CSS计数器对创建有序列表特别有用,因为在子元素中会自动创建一个CSS计数器的实例。使用 counters() 函数,在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子:

See the Pen 计数器嵌套Edit by (@feiwen8772) on CodePen.dark

以上例子来自:

赞(0) 打赏
未经允许不得转载:WEBTian开发 » CSS计数器(counter)入门

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏