Web 开发者都有一个相同的共识，要在 HTML 表单元素上定制 UI 风格，相对而言是较为困难的。很多时候，开发者都是通过别的方式来的绕开原生表单控件的使用，比如使用非表单元素来模拟表单控件。这样做的唯一目的就是让表单控件能在各平台上达到相同的 UI 风格。这样做虽然能让表单控件 UI 风格达到一致性，但也会给我们的工作增加很多额外的工作量，除此之外，也会导致表单控件元素状态的样式被丢弃，以及内置的可访问性功能也会丧失。也就是说，要完全重现浏览器提供的功能，可能比你想要承担的工作要多。如果说，能够直接有相应的 CSS 属性让开发者操作表单控件 UI是不是事情就会简单地多，开发者也可以从此避开用非表单控件元素来让表单控件更具个性化 UI。虽然到目前为止，我们还无法直接做到这一点，但 CSS 也在这方面做出很多的改变，比如说，我们现在可以直接使用 CSS 来控制表单元素的重点颜色（Accent Color），一种典型的明亮的颜色。这也就是我们今天要介绍的 CSS 的 accent-color 属性！

奇妙的CSS计数器世界主要分为三个部分，在第一部分中介绍了 list-style 的基本使用之外，主要是向大家阐述了如何使用 @counter-style 实现自定义的列表项标记符（list-style-type）；在第二部分中介绍列表标记框，即伪元素 ::marker的使用以及可用于::marker上的CSS属性。至此，我们可以在::marker、::before和::after三个伪元素上的content生成内容，来构建更具个性化的列表项标记符。虽然如此，要实现具有计数（或者说编号）的列表项符号样式，还是需要CSS的计数器来助力，即counter-reset、counter-increment和counter()及counters()函数。在接下来的内容，主要围绕着这几个属性展开。感兴趣的请继续往下阅读。

在 奇妙的 CSS 计数器世界 第一部分 主要介绍了使用 list-style（以及它们的子属性list-style-type、list-style-image和list-style-position）属性给列表项设置列表项标记符样式。除此之外，还可以使用 @counter-style 规则来自定义列表项标记符（list-style-type的值）。事实上，每个列表顶的标记符都是::marker伪元素生成的标记框的内容。在这部分中，我们开始进入::marker伪元素世界。感兴趣的请继续往下阅读。

这是有关于列表造型设计相关的话题，简单地说，就是CSS给列表项设计样式造型。可能你会觉得这样的话题有什么好聊的，不就是用list-style 相关的属性给 li 列表项或者display为list-item的元素设置样式吗？说实话，一直以来我就是这么认为的，但自从看到 @counter-style 给列表项自定义表情符的标记时，让我感到好奇。随着继续往下探究，发现这里面有很多很有意思的东西，所以我觉得在 图解CSS系列 中单独用一篇文章和大家来聊 CSS计数器的奇妙世界。感兴趣的同学请继续往下阅读。

对于众多 CSSer 来说，多年来一直希望在原生的 CSS 有类似变量，嵌套和函数等特性。虽然近些年，CSS 得到快速的发展，比如说，大家期望的 CSS 变量已经可以直接在 CSS中使用了，CSS也具备一些函数计算（甚至简单的逻辑判断）能力。今天要告诉大家的是，CSS 原生的嵌套很快就会出现在浏览器上。在今天这篇文章中就将和大家一起来聊聊 CSS 中原生的嵌套，以及如何使用它，在使用的过程需要怎样避免一些陷阱。

对于大多数 Web 开发者（或 CSSer）而言，更为熟悉的是物理属性，比如width、height、top、right、bottom、left等。但我们在图解 CSS 系列中的《CSS逻辑属性》一章中和大家聊过 CSS 逻辑属性和逻辑值，以及逻辑属性与物理属性，逻辑值与物理值之间的对应关系。在网格布局的整个系列中，前面和大家一起讨论的都是在物理属性和ltr（Left-To-Right）书写模式（或阅读模式）下的网格布局。接下来，在这部分将和大家一起探讨网格布局遇上逻辑属性和书写模式下的表现。

大约从 1998 年（还是 1999）年开始有了 Emojis（表情符号） 之后，Emojis 就风靡一时，在一些聊天工具和Web应用上也受到广泛的使用。也就是说，它不再局限于用在聊天工具用来交流，还在 Web 页面或应用上使用也越来越多，在一些组件上的使用也更频繁。就在最近，微软发布了全新的 3D 风格的表情符号（Emoji），这套 3D 风格的表情符号已经在 Flipgrid 上线，并将于今年晚些时候登录 Teams 和 Windows 系统，Yammer、Outlook 和其他平台将在明年推出。对于日常用户来说，表情符号是很好的。它们很有趣，也很容易使用。对于Web开发者而言，想在 HTML、CSS 和 JavaScript 中使用表情符号，情况还是有点不同。在这篇文章中，我们就和大家一起探讨表情符号在 Web 上的使用。

在 CSS 中，早期给元素设置宽高比都是通过一些 CSS Hack 来完成，比如padding-top（或 padding-bottom）的值为元素宽高比的百分比。不过自 Chrome90、Firefox88 和 Safar Technology Preview 之后，可以使用原生的 CSS 宽高比属性 aspect-ratio。在这一节中将和大家探讨宽高比（aspect-ratio）在 CSS 网格中的运用。在开始之前，先简单的回忆一下 CSS 的 aspect-ratio。

如果你熟悉 Flexbox 布局 的话，那么你应该知道 Flex 容器中对 Flex项对齐的方法。这些对齐属性最早只是运用于 Flex 容器和 Flex 项目上（也就是 Flexbox 布局中），后来随着 CSS 规范的变革，运用于 Flexbox 中的对齐方式的相关属性被移动一个新的规范中，即 盒模型对齐 Level 3（CSS Box Alignment Module Level 3） 的规范中，这个规范详细的定义了在不同的布局方式下如何处理对齐问题。目前该规范定义的对齐方式主要运用于 Flexbox 布局和 Grid 布局中。每种布局方式对盒模型对齐规范（CSS Box Alignment）的实现都略有差异，因为实际情况是每种布局方式都有各自的特点以及历史包袱，不能期望在所有的实现方式中都有完美一致的表现（对齐方式的表现）。而我们接下来主要和大家聊的是该规范在 CSS Grid 布局模式下的对齐方式。

这是一个很有意思的话题，仅从标题中我们可以得到两个关键词 完美 和 缩放。对于 Web 前端开发者而言，特别对于 UI 还原方面（天朝称“切图”，国外称“UI Developer”）更多追求的是像素级还原（即“Pixel-Perfect”），但随着更多的移动终端出现之后，特别更多的业务重心放到移动端之后，Web 开发者把更多的重心放在移动端。为此在业内出现了更多有关于移动端适配的方案，比如 Rem适配 和 VW适配 等。但这些都离我们所说的像素级还原目标越来越远。换句话说，如果我们既要（像素级还级）又要（完美缩放或适配），该怎么办呢？如果你对该话题感兴趣，那么接下来的内容值得你花一定时间阅读。