随着 WWW（万维网）的发明，一个新的数字时代诞生了。早期的 WWW 仅包含纯 HTML 文档，这些文档使用语义 HTML 标签来区分网页元素之间的基本样式。后来，CSS 作为一种基于键值的简单样式语言被引入，用于为语义 HTML 标签设置样式。CSS 不断演进，现如今，网页设计师可以使用 CSS 创建现代风格、动画、响应式元素和图像滤镜，且语法对开发者友好。
现代 CSS 标准不仅仅是基本的键值语法，还提供了函数和嵌套块（如 at-rules）。此外，现代 CSS 语法支持伪元素、伪类和选择器组合。这些 CSS 特性旨在提高开发者的生产力，帮助他们构建可用的现代网站，这些网站在标准网页浏览器上运行流畅。
以下是一些大多数网页设计师在设计网站时不常用的 CSS 特性。掌握这些鲜为人知的 CSS 特性，以充分利用 CSS 的潜力，根据高质量的设计需求，优化选择 CSS 特性来高效设计网站！
传统的响应式设计概念鼓励开发者根据设备视口大小调整网站布局。而流体设计概念则建议使用相对单位和 CSS 数学函数，根据视口大小动态调整整个网站元素。
假设你需要根据视口宽度动态调整标题字体大小，使用最小和最大字体大小边界。你可以使用 CSS 的 clamp() 函数实现一行解决方案：
<style> h1 { font-size: clamp(2.2em, 3vw + 1em, 2.5em) }</style><h1>CSS math functions</h1>上述 clamp 函数调用使用 3vw + 1em 表达式动态设置字体大小，但防止字体大小超出 2.2em 和 2.5em 的边界。
同样，你可以使用 min() 和 max() 函数仅设置一个边界的动态计算数值 CSS 值。例如，以下 CSS 代码片段去除了前一个 clamp() 函数示例的上限边界：
h1 { font-size: max(2.2em, 3vw + 1em) }你可以使用这些 CSS 数学函数根据流体设计原则调整布局元素的间距和尺寸。此外，现代 CSS 提供了几个以网格为重点的函数，通过不使用媒体查询实现流体设计以提高响应性。
看一下以下的 HTML 代码片段：
<style> .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); grid-gap: 1em; justify-self: center; > div { background: #ddd; padding: calc(2vw + 0.5em); font-size: calc(1vw + 1em); font-weight: bold; text-align: center; border-radius: 0.5em; } }</style> <div class="container"> <div>Block 1</div> <div>Block 2</div> <div>Block 3</div> <div>Block 4</div></div>
每种通用编程语言通常提供十进制舍入函数和内置余数/取模运算符，以实现一些通用的数学算法。CSS 规范在流行的旧 calc() 函数后开始引入更多数学函数。自 2024 年起，每个流行的网络浏览器都最终在其 CSS 引擎中添加了 round()、rem() 和 mod() 阶梯值函数。
假设你使用 --width CSS 变量发送 1 到 1000 之间的任何像素值，但你需要使用最接近的 10 而不使用 JavaScript。以下 CSS 代码片段可以实现这一目标：
<style> :root { --width: 527px } .container { background: #aaa; width: round(var(--width), 25px); height: 2em; }</style> <div class="container"></div>在浏览器上运行上述 HTML 片段并增加 --width 变量。容器宽度只会更新为可以被 25 整除的像素值，如下预览所示：
round() 函数还允许开发者自定义舍入策略，如官方 MDN 文档所述。
rem() 函数让你在 CSS 中使用 JavaScript 的 % 运算符，并帮助你找到特定被除数-除数对的余数，如下面的 CSS 片段所示：
:root { --width: 50em; --block: 15em; --extra: rem(var(--width), var(--block)); /* --extra: 5em */}mod() 函数的行为与 rem() 函数相似，但其结果总是取除数的符号。
过去，大多数网站使用固定宽度，有些甚至标明用户需要特定的屏幕分辨率才能获得更好的可用性。响应式设计概念引入了一种使用 CSS 媒体查询为不同屏幕渲染高可用性网站布局的方法。我们都知道媒体查询的响应式设计技巧，但媒体查询不仅仅是为响应式设计实现的——它们还解决了一些其他关键用例。
例如，你可以使用媒体查询为打印文档提供自定义样式：
@media print { header, footer { display: none; }}打印预览窗口可以帮助测试打印媒体类型，因此将上述 CSS 片段添加到现代网页中，然后按 Ctrl + P 键组合。
可以使用 display-mode 媒体查询功能来调整网页全屏模式的样式，如下所示：
@media (display-mode: fullscreen) { body { margin: 0; padding: 2em; border: 0.5em solid #aaa; }}上述 CSS 片段仅在全屏模式下应用边框。还可以使用 aspect-ratio 媒体查询功能检查设备的纵横比：
@media (aspect-ratio: 16 / 9) { body { background: darkcyan }}Chrome 设备模式可以帮助我们测试上述代码片段，如下图预览所示：
媒体查询还提供各种媒体功能，以检查设备方向、系统颜色主题设置、JavaScript 是否启用/禁用、屏幕 DPI（每英寸点数）值等。请从官方 MDN 文档查看所有支持的媒体功能。
基础的 HTML 表单控件，如按钮、文本输入、单选按钮和复选框，从早期的 HTML 规范开始就可用。后来，HTML 规范引入了范围滑块、日期选择器、颜色选择器等控件，以构建现代 Web 应用程序。然而，大多数开发者不喜欢这些原生表单控件，因为它们的可定制性问题。他们使用基于 CSS 的自定义表单控件，但现在 CSS 开始引入新的属性以自定义原生表单控件。
accent-color 属性允许你更改原生表单控件的默认配色方案：
<input type="checkbox" style="accent-color: cadetblue"/><input type="radio" style="accent-color: teal"/><input type="range" style="accent-color: hotpink"/><br/><progress style="accent-color: darkcyan"></progress>上述代码片段以不同的颜色方案渲染原生表单控件，如下预览所示：
accent-color 属性通过更新基于输入颜色的所有原生表单控件的子元素来生成可访问的颜色方案。目前，此功能仅适用于上述示例中显示的表单元素。
CSS 还提供了 color-scheme 属性，可与 accent-color 属性一起使用，以提高在明亮和暗黑的系统主题上的原生表单控制可见性：
@media (prefers-color-scheme: dark) { body { background-color: black; color: white; } input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: white; color-scheme: dark; }}上述媒体查询按如下方式更改原生表单控制颜色方案：
在未来，CSS 将提供新的属性来调整原生表单控件样式，并扩展 accent-color 对其他原生元素的支持，但你无疑可以使用现有的 CSS 功能来自定义文本输入和按钮。
CSS 计数器特性提供了一种创建计数器的方法，你可以在 CSS 选择器中增加/减少计数器。我们可以将此功能应用于各种用例。一个简单的用例是根据元素的出现次数显示计数器值。
例如：
<style> :root { counter-reset: references } a[href]:empty { text-decoration: none } a[href]:empty::after { counter-increment: references; content: '[' counter(references) ']'; }</style><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in eleifend dolor <a href="https://example.com/link1"></a>. Integer mauris eros, posuere vitae ex feugiat, pretium ultrices ex <a href="https://example.com/link2"></a>. Nulla et nibh feugiat, pharetra ipsum vel, accumsan augue <a href="https://example.com/link3"></a>.</p>以上 CSS 定义创建了一个名为 references 的计数器，并使用 CSS 计数器为空的超链接标签显示 IEEE 引用格式。在这里，我们在 :root 选择器中初始化计数器为 0，并通过每个空超链接的 ::after 伪类增加它。最后，我们通过访问 counter() 函数的计数器值使用 content 属性渲染计数器值。以上 HTML 文档渲染出以下结果：
通过掌握这些鲜为人知的 CSS 特性，你可以根据高质量设计需求，优化选择 CSS 特性，高效设计网站。希望这些小技巧能帮助你在网页设计中更上一层楼！
本文链接：http://www.28at.com/showinfo-26-99650-0.html应该立即学习的鲜为人知的 CSS 特性
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
