css 实现计数器_使用CSS计数器自动对图进行编号

css 实现计数器

View demo 查看演示 Download Source 下载源

When writing articles, blog posts, tutorials, magazine entries or anything else, you will often want to include some images, charts, photographs, or even videos and code snippets to illustrate your content.

在撰写文章，博客文章，教程，杂志条目或其他内容时，您通常会希望包含一些图像，图表，照片，甚至是视频和代码段以说明您的内容。

That being said, you will most likely want to attach some kind of caption to these elements, and perhaps number them so your readers can keep track of your thoughts.

话虽这么说，您很可能希望对这些元素加上某种标题，并可能对其编号，以便您的读者可以跟踪您的想法。

And that’s exactly what we are going to do in today’s tutorial: combining the usage of the <figure> element with CSS counters to make your inserted elements (especially images) sexy as hell!

这正是我们在本教程中要做的：将<figure>元素的用法与CSS计数器结合使用，以使插入的元素(尤其是图像)像地狱般性感！

图元素 (The figure element)

The <figure> element is intended to be used along with the <figcaption> element to mark up images, illustrations, photos, diagrams and code snippets among other things. Here is what the spec says about this element:

<figure>元素旨在与<figcaption>元素一起使用，以标记图像，插图，照片，图表和代码片段。 规格说明如下：

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

图形元素表示一个内容单元，可以选择包含标题，该内容单元是独立的，通常从文档的主流中引用为单个单元，并且可以从文档的主流中移开，而无需影响文档的含义。

W3C SpecificationW3C规格

Here is the basic markup for a figure:

这是图形的基本标记：

<figure>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>

Here are a few notes regarding the figure element:

以下是有关图形元素的一些注意事项：

• The <figcaption> element is optional

  <figcaption>元素是可选的

• You can only have one <figcaption> element in a <figure> element

  <figcaption>元素中只能有一个<figcaption> <figure>元素

• You can embed as many other elements as you want in a <figure> element

  您可以在<figure>元素中嵌入任意数量的其他元素。

• When dealing with an image, you can leave the alt attribute empty if you include a <figcaption> to prevent screen readers from reading twice the same content

  处理图像时，如果包含<figcaption> ，则可以将alt属性保留为空，以防止屏幕阅读器阅读两次相同的内容

For more information about the <figure> element, I recommend you this great article from HTML5Doctor. There is also this entry at Mozilla Developer Network and of course the official specification.

有关<figure>元素的更多信息，我建议您使用HTML5Doctor撰写的精彩文章。 Mozilla开发人员网络上也有此条目，当然还有官方规范。

例子 (Examples)

For example, if you want to show a snippet of code, you can do it this way with the <figure> element:

例如，如果要显示一段代码，可以使用<figure>元素以这种方式进行操作：

<figure>
	<code>body { background: white; }</code>
	<figcaption>Some illustrated code with figure<figcaption>
</figure>

Basically, instead of adding your images this way:

基本上，不要以这种方式添加图像：

… you can do something like this:

…您可以执行以下操作：

浏览器支持(Browser support)

The <figure> is part of the “new” HTML5 elements, which are not understood by a range of old browsers including Internet Explorer 8. Since you don’t want to make your layout explode because of this tutorial, I’d recommend you include a polyfill to support these elements.

<figure>是“新” HTML5元素的一部分，包括Internet Explorer 8在内的许多旧版浏览器都无法理解<figure> 。由于您不想由于本教程而导致布局爆炸，因此建议您包括一个支持这些元素的填充。

The most known and used polyfill for HTML is html5shiv which you can embed directly from the Google CDN by adding this line into your files:

用于HTML的最著名和最常用的polyfill是html5shiv ，您可以通过将以下行添加到文件中来直接从Google CDN嵌入：

<!--[if IE lte 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Note, how we use IE-specific conditional comments to prevent other browsers and IE versions greater than 8 from loading this script.

请注意，我们如何使用特定于IE的条件注释来防止其他浏览器和大于8的IE版本加载此脚本。

If you wish to know the story behind the html5shiv polyfill, please read this wonderful blog post from Paul Irish.

如果您想了解html5shiv polyfill背后的故事，请阅读Paul Irish撰写的精彩博客文章。

CSS计数器 (CSS Counters)

CSS Counters have to be one of the most unknown CSS properties in the whole range of properties there is. It makes automatic numbering possible exclusively through CSS, without the help of neither HTML nor JavaScript.

CSS计数器必须是整个属性范围内最未知CSS属性之一。 它使通过CSS进行自动编号成为可能，而无需HTML和JavaScript的帮助。

This module relies on two properties and one value:

该模块依赖于两个属性和一个值：

• counter-reset which is used to initialize and reset one or several counters

  counter-reset ，用于初始化和重置一个或多个计数器

• counter-increment which is used to increment one or several counters

  counter-increment ，用于递增一个或几个计数器

• counter() is a valid value for ::before and ::after pseudo-elements, accepting a counter name as parameter in order to display its value

  counter()是::before和::after伪元素的有效值，接受计数器名称作为参数以显示其值

Pretty straight forward, isn’t it? Basically, you initialize a counter with the name you want to the value you want (mostly 0) and you tell a given selector to increment this counter at each occurrence. This counter can then be displayed using CSS generated content and the style and location can be specified with the :before and :after pseudo-elements.

很简单，不是吗？ 基本上，您使用想要的名称将计数器初始化为所需的值(通常为0)，并告诉给定的选择器在每次出现时递增该计数器。 然后可以使用CSS生成的内容显示此计数器，并可以使用:before和:after伪元素指定样式和位置。

The most basic implementation of a CSS counter has to be this one:

CSS计数器的最基本实现必须是以下一种：

/* 1. We initialize the counter */
body {
	counter-reset: myAwesomeCounter;
}

/* 2. We tell each occurrence of this element to increment the counter */
.myAwesomeElement {
	counter-increment: myAwesomeCounter;
}

/* 3. We display the value of the counter before the element */
.myAwesomeElement:before {
	content: counter(myAwesomeCounter);
}

Note: I lied when I said “2 properties and 1 value”, there is also a counters() value which is almost never used. Please refer to this entry at MDN for more information about it.

注意：当我说“ 2个属性和1个值”时，我撒谎了，还有一个counters()值几乎从未使用过。 请在MDN上参考此条目，以获取有关它的更多信息。

例 (Example)

Back to our case, shall we? We want to number our images so that they are prefixed by “Fig. 1 – …”, “Fig. 2 – …” and so on, right? Let’s do it simply.

回到我们的情况，我们可以吗？ 我们希望对图像进行编号，以便它们以“ Fig。 1 –…”，“图2 –…”等等，对吧？ 让我们简单地做吧。

.article {
	counter-reset: figures;
}

.figure {
	counter-increment: figures;
}

.figure figcaption:before {
	content: 'Fig. ' counter(figures) ' - ';
}

Those 3 lines of CSS are enough to number our figures automagically. Isn’t that awesome?

这三行CSS足以自动为我们的数字编号。 那不是很棒吗？

包装一切 (Wrapping everything)

基础(The basics)

Now that we know how to use both the <figure> element and CSS Counters, it is time to make what we wanted to do: embellish our blog posts.

现在我们知道如何同时使用<figure>元素和CSS计数器，现在该做出我们想要做的事情了：修饰博客文章。

But before jumping into the code, wouldn’t it be cool if we could easily make floated or centered figures, just by adding a simple class? Sure, it would be. Let’s do this!

但是在跳入代码之前，如果仅通过添加一个简单的类就可以轻松制作浮动或居中的图形，这不是很酷吗？ 当然可以。 我们开工吧！

We will start by giving our figures some decent styles. Nothing too fancy, something simple and elegant enough to make a kind of frame to your images.

我们将从为人物提供一些体面的风格开始。 没什么花哨的东西，简单而优雅的东西足以为您的图像制作一种框架。

.figure {
	padding: 0.9em;
	border: 3px solid #f5bca8;
	background: #fff;
	margin: 0 auto 1em;
}

In order to horizontally center images and prevent them from breaking out of their container (the <figure> element), we need to add some rules to them (could as well be <video> or something else).

为了使图像水平居中并防止它们脱离容器( <figure>元素)，我们需要向它们添加一些规则(也可以是<video>或其他)。

.figure img {
	margin: 0 auto;
	display: block;
	max-width: 100%;
}

Now the caption! We make it stand out a bit, change the typography and center it horizontally. But frankly the styling is up to you. Just remember a caption should be removed without too much hassle, so don’t write a wall of text.

现在标题！ 我们将其突出一点，更改版式并将其水平居中。 但坦率地说，样式取决于您。 只需记住标题应该没有太多麻烦就被删除，所以不要在墙上写下文字。

.figure figcaption {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.8em;
	padding: .5em;
	text-align: center;
	color: #fff;
	background: #f5bca8;
}

编号(Numbering)

Great, we still haven’t implemented the counter to number our figures. As we’ve seen in the previous section, it is very easy to do.

太好了，我们仍然没有实现对数字进行计数的计数器。 正如我们在上一节中所看到的，这很容易做到。

.article {
	counter-reset: figures;
}

.figure figcaption {
	counter-increment: figures;
}

.figure figcaption:before {
	content: 'Fig. ' counter(figures) ' - ';
}

If you don’t necessarily want to number your images, you can limit this to a given class on the parent element. Perhaps you’ll give your wrapper a .numbered-figures class so that it enables image numbering. Easy enough:

如果您不必为图像编号，则可以将其限制为父元素上的给定类。 也许您将给包装器一个.numbered-figures类，以便它启用图像编号。 很简单：

.numbered-figures 							{ counter-reset: figures; }
.numbered-figures .figure figcaption 		{ counter-increment: figures; }
.numbered-figures .figure figcaption:before { content: 'Fig. ' counter(figures) ' - '; }

变化(Variations)

We have the basics for our system, but we still haven’t set up a way to have floated figures across the page. We will then make two classes:

我们具有系统的基础知识，但仍未设置在页面上浮动数字的方法。 然后，我们将进行两节课：

.figure-left {
	float: left;
	margin: 0 1em .5em 0;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}

.figure-right {
	float: right;
	margin: 0 0 .5em 1em;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}

For those of you who do not know min-content, it is a valid value for width, min-width, max-width, height, min-height and max-height among other properties include flexbox and grid layout.

对于不知道min-content ，它是width ， min-width ， max-width ， height ， min-height和max-height等其他属性的有效值，其中包括flexbox和grid布局。

In our case, we want the figure element to be as small as possible; basically, we want it to wrap around the image. Because <figure> is a block-level element, it stretches to the width of its parent (100%). We could set it to float: left or display: inline-block to make it collapse to the widest piece of content but if the caption happens to be wider than the image we have a problem.

在我们的例子中，我们希望图形元素尽可能小。 基本上，我们希望它围绕图像。 因为<figure>是块级元素，所以它会拉伸到其父级的宽度(100％)。 我们可以将其设置为float: left或display: inline-block以使其折叠到最宽的内容，但是如果标题恰好比图像宽，则我们有问题。

We could hard code the width to the figure element depending on the image, but it is inflexible and non-responsive. That’s why we introduce the min-content value. To put it simple, it tells the <figure> element to reduce its width so that the image fits inside it perfectly even if the caption has to wrap.

我们可以根据图像将宽度硬编码为图形元素，但它不灵活且无响应。 这就是为什么我们引入min-content值。 简而言之，它告诉<figure>元素减小其宽度，以便即使字幕必须环绕，图像也可以完美地适合其内部。

This value is supported by Firefox 3+ with the -moz- prefix and Chrome 18+ with the -webkit- prefix. The unprefixed version is currently not supported by any browser but might be in the future so we leave it.

带有-moz-前缀的Firefox 3+和带有-webkit-前缀的Chrome 18+支持此值。 当前未支持任何浏览器的非前缀版本，但将来可能会支持，因此我们将其保留。

Non-supportive browsers behave as expected: no width is set, the floated <figure> element wraps around the widest element, either the image or the caption.

不支持的浏览器的行为符合预期：未设置宽度，浮动的<figure>元素环绕最宽的元素(图像或标题)。

Note: there are other values similar to min-content like max-content, fit-content and available. Please refer to this entry at MDN or the working draft of CSS Intrinsic & Extrinsic Sizing Module Level 3for further information about these.

注意：还有其他类似于min-content值，例如max-content ， fit-content和available 。 有关这些的更多信息，请参考MDN上的该条目或CSS本质和外部调整模块级别3的工作草案。

Last but not least, we need to change/remove the max-width value on images for floated figures. Either you want images to have their own size, and you need to set max-width to none, or you want to set a maximum width (which I recommend) and you define whatever you want:

最后但并非最不重要的一点是，我们需要更改/删除浮动图形图像的最大宽度值。 您想要图像具有自己的大小，或者需要将max-width设置为none ，或者您想要设置最大宽度(我建议)，然后定义所需的内容：

.figure-right img,
.figure-left img {
	max-width: 300px; /* Adjust to suit your needs */
}

小屏幕(Small screens)

To make sure floated figures don’t behave oddly on small screens, we need to override a couple of styles to make them full-width and horizontally centered. If you’re building your site using a mobile first approach, you’ll do it the other way but it doesn’t matter really.

为确保浮动的数字在小屏幕上不会出现异常现象，我们需要覆盖几种样式以使其全角且水平居中。 如果您要使用移动优先的方法来构建网站，则可以采用另一种方法，但这并不重要。

@media (max-width: 767px) {
	.figure-left,
	.figure-right {
		float: none;
		margin: 0 0 1em 0;
		width: 100%;
	}

	.figure img {
		max-width: 100%;
	}
}

用法(Usage)

Using this is easy as a pie. Either you want an horizontally centered figure in which case you simply have to use the .figure class. Or — most likely — you want to float the figure either on the left or on the right in which case you have to use both the .figure class and a variation class (e.g .figure-left).

使用它很容易。 您需要一个水平居中的图形，在这种情况下，您只需使用.figure类。 或者-最有可能-您想在左侧或右侧浮动图形，在这种情况下，您必须同时使用.figure类和变体类(例如.figure-left )。

最后的话(Final words)

That’s pretty much it guys, the only thing left to do is to implement this on your site. Please have a look at the associated demo to see what it looks like or see it live on my own site.

伙计们，差不多了，剩下要做的就是在您的网站上实现它。 请查看相关的演示，以查看其外观或在我自己的网站上看到它。

Thanks for reading and happy coding!

感谢您的阅读和愉快的编码！

翻译自: https://tympanus.net/codrops/2013/05/02/automatic-figure-numbering-with-css-counters/

css 实现计数器