CSS功能完整指南

介绍

像任何其他编程语言一样，CSS具有功能。可以将它们插入您要放置值的位置，或者在某些情况下，将其插入另一个值声明。一些CSS函数甚至允许您将其他函数嵌套在其中！

在编程中，函数是执行特定任务的代码的命名部分。例如，用JavaScript编写的函数称为sayWoof()

function sayWoof() {
  console.log("Woof!");
}

定义所需的行为后，我们可以在代码中稍后使用此函数。对于此示例，每次您键入sayWoof()网站或Web应用程序的JavaScript时，都会打印“ Woof！”。进入浏览器的控制台。

函数也可以使用参数，参数是数字或文本位的插槽，您可以将其输入函数的逻辑中以对其进行修改。它在JavaScript中的工作方式如下：

function countDogs(amount) {
  console.log("There are " + amount + " dogs!");
}

在这里，我们有一个名为的函数countDogs()，该函数有一个名为的参数amount。当提供数量数字时，它将采用该数字并将其添加到预指定的句子中。这使我们可以创建句子来告诉我们已经数了多少只狗。

countDogs(3); // There are 3 dogs!
countDogs(276); // There are 276 dogs!
countDogs("many"); // There are many dogs!

某些编程语言带有内置函数，可帮助您避免为每个新项目重新发明轮子。通常，构建这些功能是为了帮助简化语言的主要优点和功能。

以库为例。库是经过精心设计的代码集，旨在帮助使开发过程变得更快，更轻松，更有效，仅是精选的函数集-考虑使用FitVids.js创建灵活的视频元素。

通用CSS功能

url()
.el {
  background: url(/images/image.jpg);
}

使用 url()

url()允许您链接到其他资源以加载它们。这可以包括图像，字体，甚至其他样式表。出于性能方面的考虑，最好限制通过加载的内容url()，因为每个声明都是一个附加的HTTP请求。

attr()
/* 
 */
div {
  content: attr(data-example);
}

使用 attr()

此功能使我们可以进入HTML，获取属性的内容，并将其提供给CSS content属性。您通常会attr()在打印样式表中看到，它用于在文本后显示链接的URL。此功能的另一个出色应用是使用它来显示无法加载的图像的替代描述。

calc()
.el {
  width: calc(100vw - 80px);
}

使用 calc()

如果有一个功能，您应该花一些时间进行试验，那就是calc()。我们有一份完整的指南calc()。

这个函数有两个参数和来自操作者的计算结果（+，-，*，/）你提供它，具有或不具有伴随的提供的那些参数是数字单元。

与CSS预处理器（例如Sass）不同，它calc()可以混合单位，这意味着您可以执行诸如6rem从中减去的操作100%。calc()也会动态更新，因此，如果该100%宽度表示宽度，则该宽度更改后仍然可以使用。calc()还可以接受CSS自定义属性作为参数，从而使您获得了难以置信的灵活性。

显示的文字
lang()
p:lang(en) {
  background:red;
}

使用 lang()

lang在HTML中包含属性是一件非常重要的事情。当出现在HTML中时，您可以使用该lang()函数来定位属性值的存在并有条件地应用样式。

该选择器的一个常见用途是设置特定于语言的引号，这对于诸如国际化之类的事情非常有用。

聪明的设计师和开发人员也可以将其用作样式化网站翻译的一个钩子，其中文化和/或语言方面的考虑意味着对负空间等事物有不同的看法。

:not()
h3:not(:first-child) {
  margin-top: 0;
}

使用 :not()

这个伪类选择将选择什么，是不是您指定的内容。例如，您可以使用定位非图片对象body:not(img)。尽管此示例具有强大的危险性，但:not()对BEM的块类之类的更侧重选择器进行范围划分可以使您具有极大的多功能性。

目前，:not()仅支持一个选择它的说法，但支持逗号分隔的多个参数（如div:not(.this, .that)）正在对工作！

CSS自定义属性

只有一个特定于CSS自定义属性的函数，但这会使整个过程变得井井有条！

该var()函数用于引用文档前面声明的自定义属性。

html {
  --color: orange;
}

p {
  color: var(--color);
}

与结合使用时，它的功能非常强大calc()。

html {
  --scale: 1.2;
  --size: 0.8rem;
}

.size-2 {
  font-size: calc(var(--size) * var(--scale));
}
.size-2 {
  font-size: calc(var(--size) * var(--scale) * var(--scale));
}

有关使用的更多信息 var()
另一个例子是声明一个自定义属性--ratio: 1.618；在文档的根目录中，然后稍后在CSS中调用它以控制行高，例如line-height: var(--ratio);。

这var()是一组告诉浏览器的指令，“去查找--ratio文档前面声明的自变量，取其值，然后在此处应用。”

记得！calc()让我们可以即时动态调整内容，包括您通过提供的参数var()。

这使我们仅需几行代码就可以直接在CSS中创建诸如模块化规模系统之类的东西。如果更改的值--ratio，则整个模块化比例尺系统都会更新以匹配。

还值得一提的是，JavaScript的setProperty方法可以实时更新自定义属性。这使我们能够快速有效地对以前可能需要很多复杂代码才能实现的事物进行动态更改。

颜色功能

您看到CSS函数的另一个常见地方是使用颜色。

rgb() 和 rgba()

.el {
  color: rgb(255, 0, 0);
  color: rgba(255, 0, 0, 0.5);
  color: rgb(255 0 0 / 0.5);
}

使用 rgb()

这些功能允许您使用数字来描述r颜色的红色（r），绿色（g），蓝色（b）和alpha（a）级别。例如，十六进制值为的红色#fb1010也可以描述为rgba(251, 16, 16, 1)。红色值251远远高于绿色和蓝色值（16和16），因为颜色主要由红色信息组成。

Alpha值1表示它是完全不透明的，并且在应用颜色之后不会显示任何内容。如果我们将Alpha值更改为0.5，则颜色将为50％透明。如果您使用rgb()函数代替rgba()，则不必提供alpha值。过去，这意味着您无法提供Alpha值，但是无论您使用旧的逗号语法还是新的斜杠语法，该函数现在都会使用一个。

hsl() 和 hsla()

.el {
  background: hsl(100, 100%, 50%);
  background: hsla(100, 100%, 50%, 0.5);
  background: hsl(100 100% 50% / 0.5);
}

有关使用的更多信息 hsl()

与rgb()和类似rgba()，hsl()并且hsla()是允许您描述颜色的功能。他们不使用红色，绿色和蓝色，而是使用色相（h），饱和度（s）和亮度（l）。

我比较喜欢使用它hsla()，rgba()因为它描述颜色的模型在系统化的颜色系统中非常有效。这些功能的每个色阶值都可以是CSS自定义属性，使您可以创建功能强大的动态代码。

新色彩功能
在即将到来的CSS颜色模块级别4的规格，我们可以忽略a的部分rgba()和hsla()，以及逗号。现在，空格用于分隔rgb和hsl参数，并带有一个可选/的指示Alpha级别。

我们还将开始看到像lab()和lch()这样的新功能，它们将使用这种新格式

伪类选择器函数

这些选择器使用专门的参数表示法来指定要选择的内容的模式。这样，您就可以执行其他操作，例如选择每隔一个元素，每五个元素，在第七个元素之后的第三个元素，等等。

伪类选择器的用途非常广泛，但经常被忽略和忽视。很多时候，考虑周全的应用其中一些选择器可以完成一个或多个节点程序包的工作。

:nth-child()

.el:nth-child(3n) {
  background-color: #eee;
}

nth-child()

允许您定位文档对象模型（DOM）树中处于同一级别的一组元素中存在的一个或多个元素。

在右手，:nth-child()功能强大。您甚至可以使用它解决fizzbuzz！如果您正在寻找入门的好方法，克里斯（Chris）提供了一系列有用的伪选择器配方。

:nth-last-child()

.el:nth-last-child(2) {
  opacity: 0.75;
}
.el:last-child {
  opacity: 0.5;
}

该伪类选择器将DOM中处于同一级别的一组一个或多个元素中的元素作为目标。它从组中的最后一个元素开始计数，并在可用DOM节点列表中向后工作。

:nth-of-type()
h2:nth-of-type(odd) {
  text-indent: 3rem;
}

:nth-of-type()

匹配给定类型的元素的指定集合。例如，声明为img:nth-of-type(5)将针对页面上的第五张图像。

:nth-last-of-type()

section:nth-last-of-type(3) {
  background-color: darkorchid;
}

该伪类选择器可以将一组相似类型的元素中的一个元素作为目标。很像:nth-last-child()，它从组中的最后一个元素开始计数。不同于:nth-last-child，它会向后跳过不适用的元素。

动画功能

动画并称的一个重要组成部分，某些JE NE最高审计机关quoi到您的网站或网络应用程序。只需记住将用户的需求放在首位，并尊重他们的 动画偏好。

创建动画还需要随着时间的流逝控制事物的状态，因此功能很自然地适合实现这一目标。

cubic-bezier()

.el {
  transition-timing-function: 
    cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

取而代之的关键字值一样ease，ease-in-out或者linear，你可以使用cubic-bezier()创建动画自定义定时功能。虽然您可以阅读有关为立方贝塞尔曲线提供动力的数学的信息，但我认为代替它可以使玩起来有趣得多。

在cubic-bezier.com上创建的自定义三次贝塞尔曲线。 还有一些选项可以预览和比较曲线与CSS的缓动，线性，缓入，缓出和缓入过渡。

Lea Verou的 cubic-bezier.com。
path()
.clip-me {
  clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
}
.move-me {
  offset-path: path("M56.06,227 ...");
}

此功能与配对的offset-path财产（或最终的clip-path属性）。它允许您“绘制” SVG路径，其他元素可以通过动画跟随。

steps()

.el {
  animation: 2s infinite alternate steps(10);
}

此相对较新的功能使您可以设置动画的缓动时间，从而可以更好地控制动画何时出现。

调整大小和缩放功能

我们对动画所做的一件事是拉伸和压扁东西。以下功能可让您做到这一点。有一个陷阱，但是：这些CSS功能是一个特殊的子集，因为它们只能与工作的transform性质。

scaleX()，scaleY()，scaleZ()，scale3d()，和scale()

.double {
  transform: scale(2);
}

缩放功能使您可以沿一个或多个轴增加或减小某物的大小。如果您使用scale3d()，甚至可以在三个维度上做到这一点！

translateX()，translateY()，translateZ()，translate3d()，和translate()

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

翻译功能可让您沿一个或多个轴重新定位元素。与缩放功能非常相似，您也可以将此操作扩展为三个维度。

perspective()

.cube {
  transform: perspective(50em) rotateY(50deg)
}

此功能使您可以调整对象的外观，使其看起来像是从背景中向上突出或向外突出。

rotateX()，rotateY()，rotateZ()，rotate3d()，和rotate()
.avatar {
  transform: rotate(25deg);
}

旋转功能使您可以沿一个或多个轴旋转元素，就像抓球并用手旋转一样。

skewX()，skewY()和skew()

.header {
  transform: skew(25deg, 15deg);
}

偏斜函数与缩放和旋转函数稍有不同，因为它们会相对于单个点施加变形效果。变形量与声明的角度和距离成比例，这意味着效果在一个方向上持续的越远，效果越明显。

豪尔赫莫雷诺（Jorge Moreno）也帮了我们所有人的忙，并制作了一个名为CSS转换函数可视化工具的出色工具。它使您可以实时调整大小和缩放比例，以更好地了解所有这些功能如何协同工作：

作为负责任的Web专业人员，我们应该注意用户以及他们可能没有使用新的或功能强大的硬件来查看我们的内容的事实。大型复杂的动画可能会减慢体验，甚至在极端情况下导致浏览器崩溃。

为防止这种情况，我们可以使用诸如will-change为浏览器准备商店中的内容之类的技术，以及使用update媒体功能来删除不支持快速刷新率的设备上的动画。

过滤功能

CSS滤镜功能是CSS功能的另一个特殊的子集，因为它们只能与工作的filter性质。滤镜是应用于元素的特殊效果，模仿了Photoshop等图形编辑程序的功能。

您可以使用CSS过滤器功能做一些非常疯狂的事情，例如重新创建可以应用于Instagram帖子的效果！

brightness()

.avatar:hover {
  filter: brightness(150%);
}

此功能可调整某些东西的亮度。将其设置为较低的水平将使其看起来好像在其上投射了阴影。将其设置为高水平将使其曝光，就像曝光过度的照片一样。

blur()

.ghost {
  filter: blur(50%);
}

如果您熟悉Photoshop的高斯模糊滤镜，则知道其blur()工作原理。您应用的内容越多，应用它的事物就会越模糊。

contrast()

.wow {
  filter: contrast(200%);
}

contrast()将调整所应用内容的最亮和最暗部分之间的差异程度。

grayscale()

.no-color {
  filter: grayscale(100%);
}

grayscale()从颜色信息中删除颜色信息。请记住，这不是全有或全无！您可以应用部分灰度效果，使某些东西看起来风化或褪色。

有趣的应用grayscale()可以是在启用暗模式时将其轻轻地应用于图像，以在用户可能希望减少眼睛疲劳的情况下稍微减小颜色的整体鲜艳度。

invert()

虽然invert()可以使照片看起来像负片，但我最喜欢的技术是在反色媒体查询中使用它来反转倒像和视频：

@media (inverted-colors: inverted) {
  img,
  video {
    filter: invert(100%);
  }
}

这样可以确保图像和视频内容看起来像它应有的样子，而与用户表达的浏览模式首选项无关。

opacity()

.filter-visibility {
  filter: opacity(0);
}

此功能控制通过应用该功能的元素（和子元素）可见多少背景。

具有0％不透明度的元素将是完全透明的，尽管它仍将存在于DOM中。如果需要完全删除对象，请使用其他技术，例如hidden属性。

saturate()

.full-color {
  filter: saturate(100%);
}

应用此滤镜可以增强或降低所应用颜色的强度。增强图像的饱和度是摄影师用来修复曝光不足的照片的常用技术。

sepia()

.is-old-timey {
  filter: sepia(1);
}

有很多更奇妙的描述方式，但实际上，它是一个使看起来像旧照片的功能。

drop-shadow()

.fit-shape-shadow {
  filter: drop-shadow(3rem 0 0.5rem #e486da);
}

阴影是应用于对象的视觉效果，使它看起来像是在页面上徘徊。这里有一个小技巧，因为CSS还允许您将阴影效果应用于文本和元素。它与box-shadow属性的区别还在于，它将阴影应用于元素的形状，而不是元素的实际框。

熟练的设计人员和开发人员可以利用此功能来创建复杂的视觉效果。

hue-rotate()

.change-color {
  filter: hue-rotate(180deg);
}

当将具有包含hue-rotate（）的声明的类应用于元素时，用于绘制该元素的每个像素将使其色相值偏移指定的数量。hue-rotate()的效果会应用到每个像素，因此所有颜色都会相对于其色相值的起点进行更新。

当将其应用于包含大量颜色信息的事物（例如照片）时，这会产生一种真正的迷幻效果。

SVG过滤器

filter()还允许我们导入SVG滤镜以用于创建专门的视觉效果。话题太复杂，真正做到公正这篇文章中-如果你正在寻找一个很好的起点，我推荐“ SVG滤镜的艺术，为什么它是真棒”由德克·韦伯。

“西方！”这个词 以Wild West样式的字体进行渲染，并带有分层的蓝绿色阴影，使其具有3D效果。 它的后面是紫色的星爆图案。 屏幕截图。
该效果是通过熟练应用SVG滤镜效果创建的。

网格功能

CSS Grid是该语言的一个相对较新的功能。它使我们能够有效地为多种屏幕尺寸创建自适应的，健壮的布局。

值得承认我们的根基。在Grid之前，CSS的布局主要是一系列编码技巧，可与最初用于格式化学术文档的语言一起使用。Grid的引入进一步确认了该语言的意图已经改变。

现代CSS是一种有效的容错语言，用于控制各种设备尺寸形式的显示和布局。配备了Grid和诸如flexbox之类的其他属性，我们能够创建在CSS的早期迭代中无法创建的布局。

Grid引入了以下CSS函数来帮助您使用它。

fit-content()

此功能“固定”网格行或列的大小，让您指定网格轨迹可以扩展到的最大大小。fit-content()接受一系列值，但其中最值得注意的是min-content和max-content。这些值使您可以将布局与其包含的内容绑定在一起。令人印象深刻的东西！

minmax()

minmax()允许您设置网格行和列的最小和最大所需高度和宽度。此功能还可以使用min-content和max-content，为我们提供了强大的功能和灵活性。

repeat()

您可以使用来遍历网格列和行的模式repeat()。这对于两种情况非常有用：

当你做知道有多少行或列的需要，但打字出来是很费力的。日历的网格就是一个很好的例子。
当您不知道需要多少行或列时。在这里，您可以指定浏览器在将内容传播到您的layout中时将使用的模板。

形状功能

像filter()和一样transform()，shape CSS函数只能使用以下一种属性：clip-path`。此属性用于遮罩某些部分，使您可以创建各种酷炫效果。

circle()

此功能为蒙版创建一个圆形，允许您指定其半径和位置。

ellipse()

像一样circle()，ellipse()将绘制一个圆形，而不仅仅是一个完美的圆形，ellipse()`可以构造一个长方形的蒙版。

polygon()

使用polygon()，您可以指定任意数量的点，从而可以绘制复杂的形状。polygon()还接受一个可选fill-rule参数，该参数指定形状的哪一部分是内部。

inset()

此功能将在您将其应用于元素的内部遮盖一个矩形。

杂项功能

这些是无法分类的CSS函数，在其他地方并不能很好地适应。

element()

有没有将相机对准自己的视频源？那是什么element()。它允许您指定另一个元素的ID，以创建该元素外观的“图像”。然后，您可以将其他CSS应用于该图像，包括CSS过滤器之类的东西！

您可能需要花一点时间来理解这个概念-并且存在一些支持方面的问题-但element()在正确的方面可能非常强大。

Preethi Sam的“使用鲜为人知的CSS element（）函数创建小地图导航器”展示了如何使用它来创建代码小地图，并且非常不错。

在这里，她创建了一个小地图，以阅读长篇文章：

image-set()

.responsive-background {
  background-image: 
    image-set("image.png" 1x,
              "image-2x.png" 2x,
              "image-print.png" 600dpi
    );
}

使用此功能，您可以基于浏览器对显示功能和连接速度的了解，指定图像列表供浏览器选择以用作背景图像。它类似于您将对该srcset属性执行的操作。

::slotted()

::slotted(.marker) {
  background: lightyellow;
}

这是一个伪元素选择器，用于选择已放置在HTML模板内的插槽中的元素。::slotted()旨在与Web Components一起使用，后者是开发人员定义的自定义HTML元素。

还没准备好黄金时间

与任何其他实时编程语言一样，CSS包含正在积极开发的功能。

有时可以使用可以访问最新功能的浏览器来预览这些功能。Firefox Nightly和Chrome Canary是两个这样的浏览器。其他特性和功能非常新，以至于它们仅存在于W3C积极讨论的内容中。

annotation()

此功能启用备用注释表单，这些保留字符用于标记诸如注释和注释之类的内容。这些字符通常以圆形，正方形或菱形轮廓显示。

包含替代注释格式的字体并不多，因此最好在annotation()开始工作之前检查一下您使用的字体是否包含它们。Wakamai Fondue之类的工具可以为您提供帮助。

用空心和实心圆围起来的数字1和2。 紧随其后的是包围在空心和实心正方形中的字母B和R。 屏幕快照。风格替代。
乔纳森·哈雷尔（Jonathan Harrell）的文章 “带有字体变体的更好的字体设计”中的注释字形示例

counter() 和 counters()

当您使用HTML创建有序列表时，浏览器将自动为您生成数字并将其放在列表项内容之前。这些由浏览器生成的列表内容称为计数器。

通过使用组合的::marker伪元素选择，内容属性，该counter()功能，我们可以控制的有序列表上的内容和计数器的呈现。对于不支持的浏览器counter()或者counters()是，你仍然可以得到一个体面的经验，由于自动回落到其生成的内容的浏览器：

对于您嵌套的有序列表的情况，该counters()函数允许子有序列表访问其父项。这使我们可以控制其内容和表示。如果您想了解更多的权力::marker，counter(), and counters()你可以阅读“CSS列表，标记和计数器”由雷切尔安德鲁。

cross-fade()

使用此功能，您可以将一个背景图像混合到一个或多个其他背景图像中。它提出的语法类似于渐变函数，您可以在其中指定图像开始和结束的停止点。

dir()

使用此功能可以翻转语言阅读顺序​​的方向。对于英语，这意味着从左到右（ltr）的阅读顺序变成了从右到左（rtl）的阅读顺序。当前仅Firefox支持此功能dir()，但您可以通过使用诸如的属性选择器在基于Chromium的浏览器中实现相同的效果[dir=“rtl”]。

env()

body {
  padding: 
    env(safe-area-inset-top) 
    env(safe-area-inset-right) 
    env(safe-area-inset-bottom) 
    env(safe-area-inset-left);
}

env()，是环境的缩写，允许您创建条件逻辑，如果设备的用户代理匹配则触发该条件逻辑。它已被iPhone X普及，作为使用其缺口的一种方法。

话虽这么说，设备嗅探是一件荒谬的事情-您不应该考虑env()一种欺骗手段。相反，请按预期使用它：确保您的设计适用于在视口上施加了唯一硬件限制的设备。

has()

has()是一个关系伪类，它将以包含另一个元素的元素为目标，前提是HTML源代码中至少有一个匹配项。一个示例是be a:has(> img)，它告诉浏览器定位包含图像的任何链接。

该图显示了CSS选择器a：has（> img）如何仅将包含图像的链接定位为包含图像或段落的链接集合中的图像。
有趣的has()是，目前正被提议为CSS，您只能使用JavaScript编写。如果我要猜测这是为什么，那就是出于性能原因而限制选择器的范围。has()仅在告知浏览器处理条件逻辑并因此查询事物状态之后，才触发此方法。

image()

.help::before {
  content: image("try.webp", "try.svg", "try.gif");
}

此功能可让您插入静态图片（以引用url()，或通过渐变和动态绘制）element()。

三角函数
这些功能将使我们能够执行更高级的数学运算：

正弦： sin()
余弦： cos()
切线： tan()
Arccosine: acos()
反正弦： asin()
反正切： atan()
反正切： atan2()
平方根： sqrt()
The square root of the sum of squares of its arguments: hypot()
功率： pow()
我特别高兴看到比我更聪明的人会使用这些功能，特别是对于动画之类的人！

clamp()

.page-wrap {
  width: clamp(320px, 80%, 1200px);
}
body {
  font-size: clamp(12px, 1rem + 2vw, 18px);
}

提供最小，最大和首选值作为参数时，clamp()只要不超过最小和最大边界，就将遵循首选值。

clamp()将使我们能够创作诸如组件之类的东西，这些组件的大小会随着视口的大小而缩放，但是不会缩小或增长到特定的大小。这对于创建CSS锁特别有用，在CSS锁中，您可以确保响应类型的大小不会变得太小而无法读取。

:host() 和 :host-context()

老实说，我对支持Shadow DOM的行话和机制的细节有些困惑。下面是该MDN这样描述host()：

在:host() CSS伪类函数选择的影子主人的影子DOM包含CSS是内部使用（这样你就可以选择它的影子DOM中的自定义元素） -但前提是给出函数的参数选择的阴影主机相匹配。

这是他们不得不说的:host-context()：

在:host-context()CSS伪类功能选择包含CSS阴影DOM的影子主人使用它里面（这样你就可以选择它的影子DOM中的自定义元素） -但前提是给出函数的参数选择匹配的阴影主机位于DOM层次结构内的祖先。

:is() 和 :where()

:is()有点身份危机。以前称为两者matches()，供应商都以:-webkit-any/开头:-moz-any，现在它具有标准化的约定名称。它是一个伪类选择器，它接受一系列选择器作为其参数。

这使作者可以有效地对各种选择器进行分组和定位。:where()与相似:is()，只有它的特异性为零，而的:is()特异性在提供的选择器列表中设置为最高特异性。

:is()并:where()为我们选择样式的方式提供了很大的灵活性，尤其是在您可能对网站或Web应用程序的样式表没有太多控制权（例如第三方集成，广告等）的情况下。

https://twitter.com/argyleink/status/1192562385489260544

max() 和 min()

.minimum-of-these {
  width: max(500px, 50%);
}
.maximum-of-these {
  width: min(320px, 90%);
}

这些功能使您可以从提供的值范围中选择最大值或最小值。就像一样clamp()，这些功能使我们能够使事情做出响应，直到某一点为止。

:nth-col() 和 :nth-last-col()

这些伪类将允许您在CSS网格中选择一个或指定的系列列，以对其应用样式。这些伪函数如何工作的一个很好的思维模型是CSS伪类选择器的操作方式。与伪类选择器不同，:nth-col()它:nth-last-col()应该能够定位隐式网格column。

symbols()

此功能允许您指定用于列表项目符号的各种字符的列表。与相似annotation()，您将要确保尝试使用的字体包含要用作符号的字形symbols()。

不推荐使用的功能

有时，事情只是无法按照您的想法行事。尽管出于传统支持的原因，过时的CSS函数可能仍会在浏览器中呈现，但建议您不要继续使用它们。

matrix() 和 matrix3d()

这些功能变成了更多离散的大小调整和缩放功能。

rect()

此函数是不推荐使用的clip属性的一部分。使用的clip-path属性和它的值来代替。

target-counter()，target-counters()和target-text()

这些功能旨在帮助使用分页（打印）媒体的片段URL。您可以在W3C的CSS为页面媒体模块生成的内容文档中阅读有关它们的更多信息。

版式
网络是印刷术，因此给您的类型应有的照顾和关注是有意义的。虽然CSS提供了一些专门旨在释放您的网站或webapp选择的字体潜力的功能，但建议不要使用以下功能来访问这些高级功能。

而是通过font-feature-settings使用低级语法。您可以通过使用Wakamai Fondue之类的工具来确定所使用的字体是否支持这些功能 。

character-variant()，styleset()和stylistic()

专业铸造厂制作的许多字体包括对某些字母或字母组合的替代处理。一个示例用例是为设计为看起来像手写的字体提供常用字母的不同变体，以帮助使其看起来更自然。

句子的两个示例：“轻松的周日早晨和我的狐狸。 第一句话没有启用样式替代。 第二句话的确以绿色突出显示了替代字符（a，“ un”，“ m，“ rn” g，＆，m，f和x）。 屏幕截图。
Tunghsiao Liu的 “ CSS中的OpenType功能”中的样式替代示例
如果这些特殊替代字符出现在字体的字形集中，则利用这些功能将激活这些特殊替代字符。

不幸的是，它不是标准化的产品。根据排版人员选择包括的内容，不同的字体将具有不同的支持范围。在编写任何代码之前，最好先检查一下您所使用的字体是否支持这些特殊功能。

format()

当你输入的字体通过url()功能，该format()功能是可选的提示，让您手动指定字体的文件格式。如果提供了此提示，则浏览器如果无法识别指定的文件格式，则不会下载该字体。

@font-face {
  font-family: 'MyWebFont';
  src: url('mywebfont.woff2') format('woff2'), /* Cutting edge browsers */
       url('mywebfont.woff') format('woff'), /* Most modern Browsers */
       url('mywebfont.ttf') format('truetype'); /* Older Safari, Android, iOS */
}

leader()

您知道当您在餐厅阅读菜单时，有一系列时间可以帮助您弄清楚什么菜单项附加了什么价格？那些是领袖。

W3C已经为其CSS生成的Paged Media Module内容计划了这些计划，但不幸的是，似乎leader()从未设法实现这一目标。幸运的是，W3C还提供了一个示例，说明如何使用该content属性的巧妙应用来实现此效果。

local()

local()允许您指定本地安装的字体，这表示设备上存在该字体。设备附带了本地字体，也可以手动安装。

押注某人安装字体，使事情看起来像您想要的那样，风险很大！因此，建议您不要指定需要手动安装的本地字体。您的网站看起来不会像预期的那样，如果您未指定后备字体，则更是如此。

@font-face {
  font-family: 'FeltTipPen';
  src: local('Felt Tip Pen Web'), /* Full font name */
       local('FeltTipPen-Regular'); /* Postscript name */
}

ornaments()

可以使用此功能启用特殊的dingbat字符。请小心，因为并非所有的dingbat字符都经过适当的编码，如果用户执行诸如更改字体或使用专门的浏览模式之类的操作时，将可以很好地工作。

swash()

斜盘是字母的一种替代视觉处理，使它们更加华丽。它们通常以斜体和草书风格的字体出现。

将斜体应用于脚本样式字体的示例。 短语“ Fred And Ginger”有两个版本。 第一个版本没有激活斜线。 第二个例子确实如此。 在第二个示例中，字母F和和G突出显示以表明它们已被激活。 屏幕截图。
Tunghsiao Liu的“ CSS中的OpenType功能”的 Swash示例

为什么那么多？

CSS被误解的频率很高。了解为什么向我们提供所有这些功能的指导思想是，了解CSS不是规范性的-并非每个网站都必须看起来像Microsoft Word文档。

支持Web的技术的设计方式使得有足够兴趣的人可以构建他们想要的任何东西。这是一个强大的，革命性的概念，这是为什么网络如此普及的很大一部分。