CSS-@规则(At-rules)常用语法使用总结

2023-02-03 10:12 由 jimojianghu 发表于 #前端开发

At-rules规则是目前CSS中一种常见的语法规则，它使用一个"@"符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可。
这种规则一般用于标识文档、引入外部样式、条件判断等等，本文是对该规则的使用总结。

常用规则

@import

@import 主要用于从其他样式表导入新的样式规则，语法：@import url|string list-of-mediaqueries;。

url|string：需要引入的样式资源路径，相对路径或绝对路径都可以；
list-of-mediaqueries：逗号分隔的条件列表，判断什么条件下才引入该样式资源，支持媒体查询条件。

@import "./reset.css";
@import url("./reset.css")

当使用条件判断时，可以使用媒体查询条件。

/* 宽度小于1000px才会生效 */
@import "./reset.css" screen and (max-width: 1000px);

另外，当在html文件或样式文件中使用该语法(不使用现代框架)，有两点需要注意：

引入位置：必须位于样式文件或<style>区块的头部，前面不可以出现其他css样式，但可以在@charset 后面。
不能在条件嵌套语法中使用。

当使用vue等框架的时候，则可以在 @import 前出现css样式，也能在条件嵌套语法中使用，是因为导入的样式资源会被解析具体的样式到页面上。

@font-face

@font-face 用于加载自定义字体。属于目前前端比较常用的语法，也有多开源的字体图标库可以使用。
既支持提供字体资源文件路径进行加载，也支持用户本地安装的字体加载。

@font-face {
  font-family: "iconfont";
  src: url('https://at.alicdn.com/t/font_....ttf?t=1545807318834');
}
@font-face {
  font-family: "iconfont";
  src: url('./font_985780_km7mi63cihi.ttf?t=1545807318834');
}

如上，就是一个加载字体资源的示例，一个加载cdn上的地址，一个加载本地文件。

@font-face 定义了一个CSS区块，有多个属性取值：

font-family：指定字体名字，被用于font或font-family属性；
src：加载字体资源；
1. url()：加载字体资源文件；
2. local()：加载本地电脑字体名称，如 src: local("Arial");；
font-style：对src指定字体的描述；
font-variant
font-weight

@font-face {
  font-family: "sys-Arial";
  src: local("Arial");
  font-weight: normal;
}

如上，使用local加载当前电脑系统的字体名称。

@charset

@charset 为样式表文件指定所需要使用的字符编码，只能在CSS文件中使用，语法：@charset "charset";。

charset：指定使用的字符集。

@charset "UTF-8";

特点：

在样式表文件中使用，不能在html文件的<style>区块或元素内样式属性中使用。
必须出现在样式表文件的最前面。
使用有效的字符编码和双引号，并且中间只能间隔一个空格字符，且以分号结尾。
不能在条件嵌套语法中使用。
如果有多个@charset声明，则只有第一个会生效。

浏览器解析样式表文件使用字符编码的顺序：

文件的编码格式；
http请求响应中的charset属性值；
@charset；
link设置；
默认UTF-8；

@keyframes

@keyframes 通过定义动画序列中的关键帧的样式，用来控制CSS动画的中间步骤。
语法定义：@keyframes animationname { keyframes-selector { css-styles; } }。

animationname：动画名称，作为动画引用时的标识符；
keyframes-selector：关键帧的名称选择器，用于指定关键帧被用于动画过程中的哪个节点，一般是时间节点，有两种取值方式：
1. 百分比：0% - 100%，时间百分比的节点
2. from和to：from等同起始时间from，to等同结束时间
css-styles：指定当前关键帧的样式属性值。

@keyframes dropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wave {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

如上，使用两种方式定义的关键帧动画样式。

特性说明：

当没有指定开始或结束状态，则将元素的享有样式作为开始或结束状态；
当有多个同名称的关键帧时，样式属性相同以最后一次为准，样式属性不同则会合并所有属性共同起作用；
如果再关键帧样式中使用不能用作动画的属性，会被忽略；
在关键帧中使用 !important 限定样式会被忽略，不起作用。

为了获得最佳动画体验，应该始终定义开始和结束状态。

@media

@media 媒体查询，是基于不同的媒体查询结果定义不同的样式。多用于针对不同屏幕尺寸进行差异化的样式设置，做一些响应式页面设计。另外，如果缩放浏览器的大小，也可以根据查询宽高重新渲染页面样式等。

语法： @media mediatype and|not|only (media feature) { CSS-Style; }。

说明：

mediatype：媒体类型，描述设备类别，一般有 all、print、screen、speech，默认all：
- all：所有设备；
- print：打印预览模式；
- screen：用于屏幕；
- speech：语音合成器；
媒体特性(media feature)：描述设备、环境的具体条件特征；必须使用括号括起来，常用的有：
- 宽高类：width、max-width、min-width、height、max-height、min-height等；
- 其他：color、grid、orientation、resolution、scan等；
逻辑操作符：and、not、only、，：
- and：多个规则组合，每条都满足才行；
- not：否定某个查询规则；
- only：整个查询匹配时才满足；
- 逗号，：将多个查询组合，一条满足即可，类似 or;

@media screen (max-width: 1000px) { 
  div {
    background-color: red;
  }
}

/*或者嵌套*/
@media screen {
  @media (max-width: 1000px) {
    div {
      background-color: red;
    }
  }
}

如上示例，即是我们经常使用的方式。

@media 媒体查询也能作为 @import 的条件使用，可见上面已有介绍。

link和style中使用

在引入样式表的 <link> 语句中，也可以使用媒体查询，根据不同的条件加载不同的样式文件：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="./reset.css">

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="./reset.css">

在 <style> 样式区块也可以使用媒体查询：

<style media="screen and (max-width: 1000px)">
  div {
    background-color: red;
  }
</style>

JS检测媒体查询

使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。
使用方式：

// 获取媒体查询MediaQueryList对象，有matches
const screenMediaQueryList = Window.matchMedia('(max-width: 1000px)')
console.log(1, screenMediaQueryList)
// matches: true  -- 当前媒体查询规则已生效，为false则不生效
// media: "(max-width: 1000px)"

screenMediaQueryList.addEventListener('change', (res) => {
  console.log(2, res)
})

可以获取当前是否已使用该媒体查询规则，或者监听媒体查询状态的变化事件。

非常用规则

以下是一些使用较少的@规则。

@supports

@supports 用于指定依赖于浏览器一个或多个特定CSS功能的支持申明。常用来判断当前浏览器是否支持某个CSS特性功能，所以又被称为特性查询。
ie不支持。

如判断自定义属性，详见自定义属性知识介绍。

@supports ((--a: 0)) {
  /* 支持自定义属性 */
}
@supports (not (--a: 0)) {
  /* 不支持自定义属性 */
}

语法，由一组样式声明和一条支持条件构成，支持条件可以是多条，可以使用 and、or、not 等进行结合处理；还可以使用圆括号调整优先级。

/* 浏览器支持grid */
@supports (display: grid) {
  div {}
}

/* 不支持grid */
@supports not (display: grid) {
}

/* 不支持gri和flex */
@supports not ((display: grid) and (display: flex)) {
}

其他

@namespace：是用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。
@page：主要用于打印文档时修改某些CSS属性，兼容性不高。
counter-style：定义如何把一个计数器的值转化为字符串表示。

关于react的Tabs组件中TabPane的bug

今天解决了我自认为一个很不起眼的Bug。我的Tabs下面有5个tabPane，并且这几个tabPane共用了一个search组件，今天遇到了一个bug，就是这几个组件使用公共查找组件的时候，前一个组件的值会影响下一个组件的值。找了半天发现，原来我应该在父组件Tabs中定义一个useState的状 ...阅读全文

分析web应用内引用依赖的占比

背景针对目前团队自己开发的组件库，对当前系统内引用组件库占比进行统计分析，以实现对当前进度的总结以及后续的覆盖度目标制定。主要思路目前找到的webpack分析插件，基本都是针对打包之后的分析打包之后的chunk进行分析，但是我希望的是分析每个页面中的import数，对比一下在所有页面中的imp ...阅读全文

记录-记一次不规范使用key引发的惨案

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助前言平时在使用v-for的时候，一般会要求传入key，有没有像我一样的小伙伴，为了省心，直接传索引index，貌似也没有遇到过什么问题，直到有一天，我遇到一个这样的需求场景在一个下单界面，我需要去商品列表选商品，然后在下单界面遍历显 ...阅读全文

【D02】Bootstrap免费精选模板推荐，附上Django中使用模板教程

前端模板 - Anchor UI KIT 前言今天介绍一款制作精良、开源、免费的 Bootstrap 模板 —— Anchor UI KIT 该模板使用的是Bootstrap v4版本本文将介绍如何在Django中导入该模板的静态资源包并使用介绍官方文档 Anchor - a free Bo ...阅读全文

由 Base64 展开的知识探讨

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。。本文作者：霜序(掘金) 前言在我们的业务应用中越来越多的应用到编码内容，例如在 API 中，给到后端的 SQL 都是通过 Base64 加密的数据等等。能够发现我 ...阅读全文

面试题：JS如何最快的执行垃圾回收机制

因为没看见答案，所以也不知道对不对。 JavaScript 的垃圾回收机制是由 JavaScript 引擎自动管理的，通常情况下我们无法控制垃圾回收机制的执行时间和频率。然而，我们可以采取一些优化策略来减少垃圾回收的性能开销，从而提高代码执行速度。减少全局变量：全局变量不易被垃圾回收，因为它们始 ...阅读全文

Nuxtjs实现服务端渲染和静态化站点

本文将介绍如何使用Nuxtjs对vue项目进行ssr和静态化处理。 Nuxtjs简单介绍首先，我们简单了解下Nuxtjs框架，Nuxt.js是一个基于Vue的通用框架，主要用于解决Vue项目的服务端渲染(SSR)。它本质上是一个Vue框架，增加一层node服务，通过对客户端/服务端的抽象封装，使 ...阅读全文

涨姿势了，有意思的气泡 Loading 效果

今日，群友提问，如何实现这么一个 Loading 效果：这个确实有点意思，但是这是 CSS 能够完成的？没错，这个效果中的核心气泡效果，其实借助 CSS 中的滤镜，能够比较轻松的实现，就是所需的元素可能多点。参考我们之前的：使用纯 CSS 实现超酷炫的粘性气泡效果巧用 CSS 实现酷炫的充电 ...阅读全文

【D01】Django中实现带进度条的倒计时功能（简易版）

首先说明简易版是只有一个倒计时和一个进度条，页面加载后自动开始计时，下次计时需要手动刷新页面。后续会更新实现完整的倒计时功能的文章前期准备前端框架你需要准备一些前端框架：Bootstrap4 和 jQuery 安装方法请自行查阅官方文档或教程 Bootstrap4：https://v4 ...阅读全文

记录-vue项目中使用PWA

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助前言：梳理了一下项目中的PWA的相关用法，下面我会正对vue2和vue3的用法进行一些教程示例，引入离线缓存机制，即使你断网，也能访问页面。一旦用户访问了我们的网页，我们就像牛皮糖一样粘连着他，他永远都可以访问，即使断网也能访问。有一天 ...阅读全文