CSS语法：除了属性和选择器，你还需要知道这些带@的规则-深入学习前端重构知识体系

当前位置:　首页>> 技术小册>> 深入学习前端重构知识体系

CSS语法：除了属性和选择器，你还需要知道这些带`@`的规则

在深入探索前端重构知识体系的过程中，CSS（层叠样式表）作为网页样式设计的基石，其掌握程度直接影响到网页的外观与用户体验。除了基础的属性与选择器外，CSS还包含了一系列以@符号开头的特殊规则，这些规则为CSS提供了更丰富的功能和更高的灵活性。本章将详细探讨这些带@的CSS规则，帮助你更全面地理解和运用CSS。

一、`@import`：引入外部样式表

@import规则允许你在一个CSS样式表中引入另一个CSS样式表。这对于模块化CSS代码、重用样式定义以及保持样式表的组织性非常有用。然而，需要注意的是，@import规则应当谨慎使用，因为它会增加页面加载时间，因为浏览器必须等待@import的样式表加载并解析完成后才能继续渲染页面。

@import url("base.css");
@import url("layout.css") print; /* 仅在打印时应用 */

最佳实践：尽量将@import规则放在样式表的顶部，并考虑使用HTML的<link>标签替代，以提高页面加载性能。

二、`@media`：媒体查询

@media规则是响应式网页设计（RWD）的核心，它允许你根据不同的媒体类型和条件应用不同的样式规则。这意味着你可以为不同的屏幕尺寸、分辨率、方向（横屏或竖屏）等编写特定的样式。

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
@media print {
  body * {
    visibility: hidden;
  }
  .print-section, .print-section * {
    visibility: visible;
  }
  .print-section {
    position: absolute;
    left: 0;
    top: 0;
  }
}

应用场景：通过媒体查询，可以创建在不同设备上都能良好展示的网页，提升用户体验。

三、`@font-face`：自定义字体

@font-face规则允许你在网页上使用自定义字体，而不仅仅是依赖于用户计算机上已安装的字体。这对于保持品牌一致性、提升网页视觉吸引力至关重要。

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'MyCustomFont', sans-serif;
}

注意事项：选择适当的字体格式和提供回退选项是确保兼容性和可访问性的关键。

四、`@keyframes`：定义动画关键帧

@keyframes规则用于定义CSS动画序列中的关键帧。通过指定动画开始、中间和结束时的样式，你可以创建复杂的动画效果。

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

进阶应用：结合@keyframes与animation属性，可以实现无限循环、延迟开始、动画迭代次数等高级动画效果。

五、`@supports`：条件规则

@supports规则允许你编写仅在浏览器支持特定CSS属性或值的情况下才应用的样式。这对于渐进增强（Progressive Enhancement）策略非常有用，可以在支持高级CSS特性的浏览器上提供更丰富的用户体验。

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 回退样式 */
.container {
  display: flex;
  flex-wrap: wrap;
}

应用场景：在尝试使用新的CSS布局或样式特性时，@supports规则可以确保在不支持这些特性的浏览器上也能有基本的可用性和可访问性。

六、`@document`（非标准，但值得了解）

虽然@document规则在大多数现代浏览器中并不受支持，但它最初的设计意图是在样式表中针对特定的文档（或文档的特定部分）应用样式。尽管其实际用途有限，但了解这一规则的存在有助于我们理解CSS规范的演进和多样性。

/* 示例，实际不被支持 */
@document url(http://example.com/) {
  body {
    background-color: blue;
  }
}

历史视角：@document规则是CSS试图实现更细粒度样式控制的一次尝试，尽管最终未能广泛实现，但它反映了CSS设计者对提升样式表灵活性和强大性的持续追求。

七、总结

CSS中带@的规则为前端开发提供了强大的工具集，它们不仅扩展了CSS的功能范围，还使得样式表更加灵活、模块化，并促进了响应式设计和渐进增强的实践。通过深入学习这些规则，你将能够更好地控制网页的外观和行为，为用户提供更加丰富、一致且可访问的浏览体验。在前端重构知识体系中，掌握这些高级CSS特性是迈向专业前端开发者的关键一步。