原来的：
学习使用最新、最好的 CSS 属性来构建和设计面向未来的网站。
CSS 仍在不断发展，规范中添加的许多功能使其成为网页设计师手中的强大工具。
CSS Grid 将布局提升到了前所未有的水平，自定义属性引入了变量的概念，函数查询监视浏览器是否支持。 由于新的访问属性，媒体查询也被提升到了一个新的水平。 可变字体可以用最少的代码实现最大的创造力，并且滚动捕捉消除了对 JavaScript 的需要。 查看我们令人惊叹的 CSS 动画示例()，看看您可以创建什么。 或者，尝试使用 Website Builder() 构建网站（无需编码）。
对于创意思维来说，有用于精美布局的 CSS 形状，以及用于类似 Photoshop 设计效果的大量混合模式和滤镜。 继续阅读以了解如何使用最新版本中这一必须尝试的新功能。 但请记住，复杂的网站意味着您需要能够支持您的需求的网络托管服务。
01.自定义属性
如果您已经使用像 Sass 这样的预处理器，或者确实像 JavaScript 这样的编程语言。 那么您一定熟悉变量的概念——为在代码中重用而定义的值。 自定义属性允许我们在 CSS 中做到这一点，而不需要预处理器。 变量可以在 :root 级别（创建全局变量）或选择器范围设置。 然后就可以用var（变量名）这样的句型来调用了。 例如，我们设置一个类似 --primaryColor 的变量，如下所示：
/* On the root element (a global variable) */
:root {
--primaryColor: #f45942;
}
/* Scoped to a selector */
.my-component {
--primaryColor: #4171f4;
}然后我们可以使用这个变量作为属性的值：
h1 {
color: var(--primaryColor);
}自定义属性是继承的，使得可以形成一些特别有用的结果。 其中之一是网站的主题。 继续里面的例子：我们能否在根节点上为--primaryColor（#f45942——亮橙色）定义一个全局值，这样我们每个使用这个变量的地方都会有一个橙色值。 但我们可以在选择器内使用不同的值（#4171f4 - 中红色）重新定义该变量。 因此，每次在选择器中使用 --primaryColor 变量时，其估计值都将为红色。
>> 设置默认值
变量作用域是一个很好的功能，但有时它会让您感到惊讶。 如果您尝试使用尚未定义的变量，则该变量的值将回退为浏览器的默认值或继承值。 而不是级联中进一步定义的值。 在个别情况下，设置默认值是合适的：
h1 {
color: var(---primaryColor, blue);
}>> 自定义属性与预处理器变量有何不同？
自定义属性在几个关键位置与预处理器变量不同。 预处理器变量在代码发送到浏览器之前进行编译。 浏览器永远不知道该值是一个变量，它只看到最终结果。 自定义属性的值在浏览器中评估。 您可以在现代开发工具中检查它们、更改变量并查看解析的结果。 它们是动态变量，这意味着它们的值可以在 CSS 中更改，或在 JavaScript 运行时更改。
与预处理器变量不同，自定义属性不能在选择器名称、属性名称或媒体查询声明中使用——它们只能用作 CSS 属性值。 CSS 预处理器一直有很多用途，因此我们可能会看到它们一段时间，但它们可能更多地与自定义属性结合使用。
02.功能查询
功能查询是测试浏览器是否支持 CSS 文件中特定 CSS 属性值组合的一种形式。 它们实际上消除了对像 Modernizr 这样的功能检查库的需要。 它的语法类似于媒体查询：使用@supports关键字，后跟属性值对。 如果浏览器满足这个特殊条件，它也会执行包装的代码。
现代浏览器对特征查询的支持相当好。 但它们是相对较新的浏览器，另一个问题可能是你想要测试是否支持某个属性的浏览器本身可能不支持特征查询。 通常，处理这些问题的最佳形式是提供后备样式（功能查询之外），然后将浏览器支持增强功能包装在 @suports 规则中。
要非常小心，函数查询需要谨慎使用。 CSS 最大的特性之一是浏览器会简单地忽略它们不理解的任何属性和值。 仅使用特征查询（如果不这样做会产生视觉错误），否则您将为自己节省大量额外的工作。
如何使用函数查询
为了测试对单个属性值的支持，我们可以首先提供后备样式。 在下面的示例中，我们为不支持网格布局的浏览器提供了 Flexbox 后备样式。
.my-component {
display: flex;
}
@supports (display: grid) {
.my-component {
display: grid;
}
}
// 或者
.my-component {
display: grid;
}
@supports not (display: grid) {
.my-component {
display: flex;
}
}03.媒体垂询
您可能已经习惯使用媒体查询来检测图层的长度和高度，以及媒体类型（通常是屏幕和副本）。 Level 5媒体查询规范为我们带来了一些需要测试的可选新媒体功能，并且它们已经在各个浏览器中得到支持。 这些都为无障碍提供了很好的帮助。
患有前庭疾病和晕动病的用户可能不喜欢有大量运动的页面，例如动画和视差滚动效果。 通过使用prefers-reduced-motion媒体查询，我们可以为用户提供减少动画的选项。
.my-element {
animation: shake 500ms ease-in-out 5;
}
@media (prefers-reduced-motion: reduce) {
.my-element {
animation: none;
}
}
提供可选红色主题的网站长期以来一直很受欢迎。 Prefers-colors-scheme 将帮助我们查询用户是否设置了系统范围的颜色首选项（使用关键字“深色”、“浅色”或“无首选项”）并相应地显示适当的颜色方案。
/* Media queries 02 */
body {
background: linear-gradient(to
bottom, #b5faff, #ffe2b4);
}
@media (prefers-color-scheme: dark) {
body {
color: white;
background: linear-gradient(to
bottom, #0c1338, #3e3599);
}
}04.可变字体
通常，如果我们想在网页上包含一系列同族的不同字体，通常也需要加载相同数量的字体文件。 您加载的字体文件越多，您的网页就会越重。 这会影响性能 - 因此通常明智的做法是加载不超过三个或四个字体文件（取决于您的性能预期）。
可变字体将改变这一切问题。 它迫使我们只需要一个字体文件来加载整个字体系列。 虽然此文件通常比单个字体文件大一点，但如果您想使用不同的粗细和样式，可变字体是一个性能更高的解决方案。 如果您已经订阅了整个字体加载，请记住将其安全地存储在云存储中，以避免丢失文件。
>> 改变轴
不仅如此，对于可变字体，我们也仅限于少量的字体粗细。 使用传统字体时，我们可用的字体粗细通常以 100 的倍数来描述。通常，400 是常规粗细，300 是轻细，700 是 Arial - 不同的字体系列支持不同的粗细。 可变字体有一个可变轴，它为我们提供了各个属性的一系列值，例如字体粗细。 字体的变化轴可以是1-900，这将允许我们使用900种不同的字体粗细。
该变化轴不限于字体粗细。 可变字体可以具有不同的 x 高度、倾斜、衬线宽度、对比度变化轴（仅举几个反例），这意味着单个字体文件可以为我们提供数百甚至数千种变化。 我们甚至可以为这些属性设置动画，从而获得一些非常酷的效果。 曼迪·迈克尔 (Mandy Michael) 有很多真正挑战极限的创意示例。
浏览器对可变字体的支持非常好。 许多字体生产商正在积极开发新的可变字体，您现在就可以使用。 尽管它们通常是专业版本，尤其是这些具有更多功能的字体系列。 如果您只是想尝试可变字体并看看它们能做什么。 有许多可变字体试用网站。
请注意，如果您想立即使用可变字体，那么您需要确保您的操作系统是最新的。 它们不适用于旧系统。
>> 字体变化设置（font-variation-settings）
当我们想要改变字体粗细时，我们只需使用CSS的font-weight属性即可。 font-variation-settings 是一个新属性，它还使我们能够完全访问字体的不同变化轴。 它们包含预注册轴和自定义轴。
>>> 预定义轴
有五种不同的预定义轴，对应于 CSS 中的不同属性。 其中每一个都有一个所谓的“轴标签”。 这些预定义的轴是： wght （字体粗细）、 wdth （字体拉伸）、 slnt （字体样式：倾斜/角度）、 ital（字体样式：斜体）、 opsz （字体光学尺寸） 。 我们可以通过单独的 css 属性或通过 font-variation-settings 属性访问这些轴。
这些轴不必全部包含在可变字体中（其中一些可能只有一个或两个可变轴），但它们可能看起来更通用。
>>> 自定义轴
自定义轴是字体设计器包含的自定义轴，可以是任何东西。 它们可以包括（例如）衬线长度、x 高度，甚至包括旋转等更具创意的内容（在排版中不常见）。
这两个不同的轴必须表示为四字符标签。 预定义轴必须为小写，而自定义轴必须为大写。 所有这三个都可以在 Font-Variation-Settings 属性中组合。 Font-Variation-Settings 设置是可动画的css去掉滚动条，可以实现一些特别酷的 UI 效果！ 在图标字体方面也进行了一些特别有趣的实验。
05.图片疗效
如果您熟悉 Photoshop 和 Illustrator 等设计工具，那么您可能已经注意到混合模式以及如何使用它们在图像上创建不同的效果。 混合模式的工作原理是使用物理公式将两个或多个图层混合在一起，以估计每个像素的结果值。 图层可以是任何东西 - 图像、渐变或只是黑色。 其中一些混合模式会产生较暗的结果（例如，Multiply，它将视口的像素值相加），而另一些则会产生较亮的结果（例如，Mask 和 Overlay）。 然而，我们不需要了解它们的物理原理就可以使用它们。 尝试不同的混合模式可以让我们很好地了解哪种混合模式与不同图层组合时会产生所需的效果。
通过CSS属性mix-blend-mode和background-blend-mode，我们可以在浏览器中获得像Photoshop一样的照片效果。 这两个属性使用相同的属性值，但工作方式略有不同。
>> 背景混合模式
背景混合模式将目标的背景图层混合在一起。 我们的元素有背景图像、颜色和渐变。 它们可以相互混合而不影响前景内容。 我们可以为background-blend-mode指定多个值，每个背景层单独指定一个值。
.my-element {
background: url(#myUrl),
linear-gradient(45deg, rgba(65, 68,
244, 1), rgba(203, 66, 244, 0.5)),
rgba(244, 65, 106, 1);
background-size: cover;
background-blend-mode: screen,
multiply;
}>> 混合混合模式
混合混合模式影响元素与其父元素和同级元素的混合方式，包括任何前景和背景内容以及伪元素。 通过混合覆盖伪元素（::before、::after）可以实现一些有趣的创意效果。
.my-element {
background: rgb(244, 65, 106);
mix-blend-mode: multiply;
}>> CSS 过滤器
CSS 过滤器属性还用于通过使用过滤器属性和过滤器函数值来创建引人注目的视觉效果。 与混合模式不同，它们将图像效果直接应用于它们指定的元素，并且可以将多个滤镜应用于一个元素。
>> 改变灰度
与依赖混合模式相比css去掉滚动条，我们可以更大程度地控制元素的颜色。 滤镜可以使图像变成黑白，调整亮度、对比度和饱和度，模糊元素或减少阴影。 它们还支持动画，并且与悬停结合可以产生更好的效果。
>> SVG 滤镜（滤镜）
css过滤器实际上是SVG过滤器的简化版本。 CSS 过滤器属性还接受 url() 函数，允许我们传递指向 SVG 过滤器的 URL。 SVG 滤镜功能强大，可以实现一些令人难以置信的图形效果，但它们也比 CSS 滤镜功能复杂得多。 如果您有兴趣编写自己的自定义 SVG 过滤器，Sara Soueidan 有一系列关于 Codrops 的文章。 请阅读这篇文章（）。
>> 剪切和遮罩：超越圆圈
我们习惯了网上的袋子，但并不是所有东西都必须是方形的。 剪切和遮罩是同一枚硬币的两面，是显示或隐藏元素不同部分的两种不同方式，从而使背景得以显示。 这使我们能够将有趣且富有创意的形状引入到我们的设计中。
>>> 剪辑路径
Clip-path() 属性允许我们通过定义路径来剪辑元素。 它使用一些基本的形状函数，inset()、circle()、ellipse() 或 Polygon()。 它允许我们使用一对 xy 坐标来定义路径，以制作日益复杂的剪切形状。 此外，我们还可以将SVG路径传递给path()函数，或者使用url()函数提供SVG路径id。
>>> 不在路径范围内
剪切元素将剪切您定义的路径之外的任何内容，但该元素仍然是一个圆形。 如果内容超出了路径的范围，它也会被剪切——它不会包裹在形状内。
>>> 蒙版图像
mask-image 允许我们使用图像（SVG 或透明 PNG）或渐变作为遮罩来显示或隐藏图像的各个部分。 与剪辑路径不同，我们可以使用图层向图像添加纹理，因为遮罩源不是路径，所以允许是透明的。
06.CSS形状
CSS Shapes 规范允许我们将文本包裹在浮动的几何形状周围，创建有趣的、类似日记的布局。 使用 shape-outside 属性来执行此操作。 与clip-path类似，我们可以给这个属性一个基本的形状函数，circle()、ellipse()、inset()、polygon()，或者指向SVG的路径，事实上，这两者配合得很好。 shape-outside 有效地包裹了我们的文本，但不影响浮动元素。 如果我们希望文本看起来环绕图像或浮动，我们也可以使用与 Clip-path 相同的值。 使用 shape-margin 来增加形状路径和包围它的内容之间的空间。 请访问 Stuff & Nonsense () 网站，了解如何使用 css-shape 将文本环绕位于中心的图像周围。
FireFox 在开发人员工具栏面板中有一个形状路径编辑器，这对于复杂的形状工作特别有用。 但是，必须小心使用。 对一段文字的开头进行换行具有很好的艺术效果，但并不一定具有最好的用户体验。 复杂的锯齿状形状会使该文本极难阅读。 对于重要的文本，您仍然希望它清晰易读。
07. 滚动捕捉
许多网站利用 JavaScript 库来提供像本机应用程序一样流畅的滚动体验。 当用户滑动页面时，内容快速定位到指定位置。 现在，随着滚动捕获规范的制定，我们可以在 CSS 文件中完成它 - 而不必导入大量使页面看起来很重的 JS 模块。
为了实现滚动捕获，我们需要一个元素作为滚动容器。 容器的直接子元素指示要捕捉的位置，并且可以在捕捉区域内以各种不同的方式对齐。
与另一个新的 CSS 属性值 --position:sticky 结合使用时，滚动捕捉会更加有效。 这个position的值意味着当子元素在容器内部滚动时，它会“粘”在指定的位置——这又是一个以前只能用javascript才能实现的功能。 单击可查看滚动捕捉和位置组合的示例。 粘性和交集观察者示例（）。
08.CSS网格布局
前端开发人员使用当时可用的任何工具来突破布局的界限——最新的 Flexbox，这是大多数网格系统所使用的。 但flexbox并不是严格为网格布局而设计的，它的目的是弹性布局。
CSS Grid 是第一个为二维布局设计的规范，使我们能够完全控制行和列上元素的布局和放置。 使用 Grid 构建响应式布局不需要 calc() 或使用负边距进行修改。 秘密武器是 fr 单元 - 一种仅在网格布局中可用的新单元。 fr 单元按列的比例为网格轨道（行和列）分配可用空间。 它会考虑所有固定轨道、间隙和内容，并相应地分配剩余空间。 Jen Simmons 创造了“真正的网页设计”一词来描述网格用户所生活的网络新时代。
>> 如何使用 CSS 网格
网格需要将“display”属性设置为“grid”的元素作为网格容器。 网格容器的直接子项都是只能放置在网格轨道上的项目。 我们使用 grid-template-rows 和 grid-template-columns 属性来定义网格轨道（行和列），并使用 column-gap 和 row-gap 来定义间隙（轨道宽度）。
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 200px);
gap: 20px;
}我们使用repeat()函数使代码更加简洁，并用作纯手写替换（例如grid-template-columns: 1fr 1fr 1fr 1fr）。 这也使用行间隙和列间隙的缩写间隙。
上面的代码为我们提供了一个四行轨道，每个轨道高 200px，还有四个列轨道，每个轨道使用 fr 单位平均划分总可用空间。
值得注意的是，这并不是创建网格布局的唯一方法。 可以通过放置网格项来创建隐式轨道。 如果您使用网格布局，了解这一点很有用。 只有更深入地理解网格布局在不同条件下的行为才能使布局代码更加简洁。
我们可以通过参考网格线编号来放置元素，网格线编号是位于每个轨道之间的编号线。 我们使用缩写 grid-column 和 grid-row 来代替 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end。 这是告诉浏览器我们的项目在每个轴上的开始和结束位置的数轴。
.item {
grid-column: 1 / 4;
grid-row: 2;
}网格为我们提供了很多放置元素的方法：我们可以使用名称来代替网格线吗？
.grid {
display: grid;
grid-template-columns: [image-start] 1fr
1fr 1fr [image-start] 1fr;
grid-template-rows: 200px [image-start]
200px 200px [image-end] 200px;
gap: 20px;
}或者让我们通过使用 grid-template-area 属性使用文本来绘制布局
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 200px);
gap: 20px;
grid-template-areas:
‘. . . .’
‘image image image .’
‘image image image .’
‘. . . .’;
}使用这三种方法中的任何一种，我们在放置网格项时都可以简单地引用相应的网格区域。
.image {
grid-area: image;
}本文最初发表于创意网页设计杂志( )。
发表评论