❕数据类型和函数

CSS 属性可以接受的通用数据类型（值和单位）

每个 CSS 声明都包含一个属性:值对。根据不同的属性，其值可能是一个关键字或数值，也可能是一系列关键字或值，它们有的带单位有的不带单位。在 CSS 中，就有一组 CSS 属性可以接受的通用数据类型（值和单位）。

CSS 数据类型定义了 CSS 属性和函数所能接受的典型值（值和单位）。CSS 函数也是一种 CSS 值，它能表示更复杂的数据类型或是调用特殊的数据处理和计算逻辑。

最常用的数据类型和函数都定义在《CSS Values and Units》规范中，其它的数据类型就定义在与其相关联的规范中。

• CSS data type，CSS 数据类型

• CSS functional notation，CSS 功能符号，通常叫 CSS 函数

这部分只介绍被 <> 括起来的数据类型（不包含关键字）和常见的 CSS 函数。

数据类型

1. 基本（4个）

数据类型	说明
<string>	字符串
<number> <integer>	数值
<position>	top, right, bottom, left center <length-percentage>

2. 尺寸（8个）

数据类型	格式	说明
<dimension>	<number>+单位	指定距离/时间/频率/分辨率等尺寸
<length>	<number>+单位	绝对单位（长度）： px, pc, pt in cm, mm, Q 相对单位（字体）： em, rem ex, rex cap, rcap ch, rch ic, ric 相对单位（视口）： vw, vh vmin, vmax svh, lvh, dvh svw, lvw, dvw 相对单位（查询容器）： cqw, cqh, cqi, cqb, cqmin cqi, cqmax cqi
<time>	<number>+s|ms	单位 s, ms
<angle>	<number>+单位	单位 deg, grad, rad, turn
<flex>	<number>+fr	单位 fr
<resolution>		分辨率，像素密度 单位 dpi, dpcm, dppx, x
<ratio>	<number>/<number>	纵横比，媒体查询，eg.16/9
<percentage>	<number>+%

3. %（3个）

数据类型	说明
<length-percentage>	<length> 或 <percentage>
<time-percentage>	<time> 或 <percentage>
<angle-percentage>	<angle> 或 <percentage>

4. 文件（1个）

数据类型	说明	相关函数（1个）
<url>	an absolute URL a relative URL a data URI	url()

5. 二维图像（2个）

数据类型	相关函数（11个）
<image>	二维图像，综合型 可以是以下类型： <url> <gradient> 可以是以下函数： element() image(), image-set() cross-fade() paint()
<gradient>	linear-gradient() conic-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() repeating-conic-gradient()

6. 颜色（2个）

数据类型	说明	相关函数（10个）
<color>	综合型 可以是各种关键字	rgb(), rgba() hsl(), hsla() hwb(), lch(), lab() color() color-mix() color-contrast()
<blend-mode>	当元素重叠时如何显示颜色 用在如下属性： background-blend-mode mix-blend-mode

7. 形状（1个）

数据类型	说明	相关函数（6个）
<basic-shape>	在以下属性中使用： clip-path shape-outside offset-path	inset() 矩形 circle() ellipse() polygon() path()
<shape>（已废弃）	用在 clip 属性（已废弃） 已被 clip-path 属性替代	rect() 已废弃

8. 函数（3个）

数据类型	说明	相关函数（33个）
<transform-function>		rotate() rotate3d() rotateX() rotateY() rotateZ()
		scale() scale3d() scaleX() scaleY() scaleZ()
		skew() skewX() skewY()
		translate() translate3d() translateX() translateY() translateZ()
		matrix() matrix3d()
		perspective()
<timing-function>	ease ease-in ease-out ease-in-out	cubic-bezier()
	step-start step-end	steps()
<filter-function>	图像效果	grayscale() opacity() blur()
		brightness() hue-rotate()
		contrast() drop-shadow() invert() saturate() sepia()

9. display（6个）

数据类型	说明
<display-outside>	block, inline, run-in
<display-inside>	flow, flow-root table, flex, grid ruby
<display-listitem>	block, inline, run-in ? && flow, flow-root ? && list-item
<display-internal>	table-header-group table-footer-group table-column-group table-row-group table-caption table-column table-row table-cell
	ruby-base, ruby-text ruby-base-container ruby-text-container
<display-box>	contents, none
<display-legacy>	inline-block inline-table inline-flex inline-grid inline-list-item

10. 其它（6个）

• <ident> 和 <custom-ident> 表示用作标识符的任意（用户定义）字符串

• <frequency> 和 <frequency-percentage> 没有元素使用

• <shape> 已废弃。为了方便对比，也在上述表格中列出来了

• <an-plus-b>

CSS 函数

除了上述表格中列出的与特定类型相关的函数之外，还有以下 CSS 函数。

1. 数学（21个）

函数	说明
calc()
clamp() min(), max() abs(), sign()
sqrt() pow(), exp() log() round()
sin(), cos(), tan() asin(), acos(), atan(), atan2()
hypot() mod(), rem()

2. 引用（4个）

函数	说明
attr()	属性
var()	自定义变量
env()	环境变量
url()

3. 计数器（3个）

函数	说明
counter() counters()	content 属性
symbols()	list-style 属性, counter styles

4. Grid（3个）

函数	说明
repeat() minmax() fit-content()

5. 字体（8个）

函数	说明
stylistic() styleset() character-variant() swash() ornaments() annotation()	font-variant-alternates 属性
local(), format()	@font-face 的 src 描述符的值

6. 其它（7个）

• target-counter(), target-counters(), target-text()

• type(), layer(), leader(), selector()

总结

这部分主要对 CSS 的通用数据类型（值和单位）和常见函数做了下分类整理，旨在对其有个整体印象。

1. 数据类型（36 个）

   • 基本 + 尺寸（有单位） + 百分比

   • 文件 + 图像 + 颜色 + 形状（都有函数）—— 相关函数 1+11+10+6 = 28 个

   • 函数：转换 + 时间 + 滤镜（都是函数）—— 相关函数 33 个

   • display

2. CSS 函数（46 个）

   • 数学 + 引用 + 计数器 + Grid

   • 字体

扩展阅读

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units

• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
let datatypeArr = [], funcArr = [], unitArr = [];
document.querySelectorAll(".index code").forEach(item => {
  if(/^:/.test(item.innerText)) {}
  else if (/<[a-z-]+>/.test(item.innerText)) datatypeArr.push(item.innerText);
  else if (/\(\)$/.test(item.innerText)) funcArr.push(item.innerText);
  else if (/#/.test(item.innerText)) unitArr.push(item.innerText);
});
// 37(36+1), 82, 30
console.log(datatypeArr.length, funcArr.length, unitArr.length);