编程语言编译器语言运行时【免费下载链接】imba The friendly full-stack language项目地址https://gitcode.com/gh_mirrors/im/imba点击查看免费下载CSS 单位如px、em、vw是样式系统中最基础的元数据之一。本篇文章以 apps/imba.io/scripts/mdn-data/css/units.md 为核心结合仓库中实际落盘的 units.json 数据文件、units.schema.json 校验规则与 definitions.json 模块清单完整解析这套 CSS 单位元数据的数据结构、字段语义与校验方式。读完本文你将掌握如何阅读、校验和扩展这套单位数据并理解它在 Imba 官网文档工具链中的位置与用途。一、这套数据是什么、在仓库中的位置units.md所描述的是 MDN 开源数据仓库中css/units.json这一数据文件的格式规范。imba.io 官网项目在 apps/imba.io/scripts/mdn-data/ 目录下维护了整套 MDN CSS 数据的副本其中 CSS 部分包括六类数据文件全部位于 apps/imba.io/scripts/mdn-data/css/数据类别数据文件校验规则格式说明单位units.jsonunits.schema.jsonunits.md属性properties.jsonproperties.schema.jsonproperties.md选择器selectors.jsonselectors.schema.jsonselectors.md语法syntaxes.jsonsyntaxes.schema.jsonsyntaxes.md数据类型types.jsontypes.schema.jsontypes.md规则at-rules.jsonat-rules.schema.jsonat-rules.md从该目录下的 readme.md 可以看出这些文件是对应 MDN Web 文档中 CSS 语言特性at-rules、properties、selectors、syntaxes、types、units的结构化描述。units 数据集记录了 CSS 单位本身em、px等其大部分单位定义来源于 CSS Values and Units 规范。文档的核心信息是每个单位记录由groups所属模块组与status标准化状态两个必填字段构成。二、units.json单位清单与统计概览打开 units.json可以看到当前仓库实际收录了 28 个 CSS 单位全部以单位名称为键如ch、px、deg值为记录对象{ ch: { groups: [CSS Units, CSS Lengths], status: standard }, px: { groups: [CSS Units, CSS Lengths], status: standard }, fr: { groups: [CSS Units, CSS Flexible Lengths, CSS Grid Layout], status: standard } }完整的 28 个单位清单为ch、cm、deg、dpcm、dpi、dppx、em、ex、fr、grad、Hz、in、kHz、mm、ms、pc、pt、px、Q、rad、rem、s、turn、vh、vmax、vmin、vw、x。按groups字段聚合统计当前数据集覆盖的模块分布如下CSS Lengths长度15 个ch、cm、em、ex、in、mm、pc、pt、px、Q、rem、vh、vmax、vmin、vwCSS Angles角度4 个deg、grad、rad、turnCSS Resolutions分辨率4 个dpcm、dpi、dppx、xCSS Frequencies频率2 个Hz、kHzCSS Times时间2 个ms、sCSS Flexible Lengths CSS Grid Layout弹性长度/网格1 个fr值得注意的是fr是唯一同时归属于两个业务模块CSS Flexible Lengths 与 CSS Grid Layout的单位这正体现了groups数组支持一个单位可同时属于多个模块的设计。三、记录结构groups 与 status 两个必填字段units.md明确指出每个单位记录包含两个均必填的属性缺一不可3.1groups字符串数组单位所属的 CSS 模块CSS 规范按模块组织例如 CSS UnitsCSS 单位或 CSS LengthsCSS 长度。MDN 也以同样的分组方式组织特性因此groups中应包含定义该单位的一个或多个模块名。类型array of strings约束至少包含 1 个模块名且不能有重复项约定所有单位都必然首先属于 CSS Units 组再按语义归入具体模块组以ch为例它同时被标注为 CSS Units 与 CSS Lengths 两个模块的成员deg则属于 CSS Units 与 CSS Angles。3.2status枚举字符串单位的标准化状态status是一个枚举字段取值只能是以下三者之一用于标识该特性的标准化进度取值含义standard已标准化的特性可放心使用nonstandard非标准特性通常为浏览器私有实现需谨慎使用experimental实验性特性规范或实现仍可能变动当前 units.json 中的 28 个单位状态全部为standard即数据集内不包含任何非标准或实验性的单位。四、groups 的取值边界definitions.json 中的模块清单groups并不是任意字符串其取值受到 definitions.json 中groupList枚举的严格约束。该文件定义了一份完整的 CSS 模块名清单共约 70 个条目涵盖基础模块Basic Selectors、CSS Color、CSS Text、CSS Fonts、CSS Box Model、CSS Backgrounds and Borders 等布局模块CSS Grid Layout、CSS Flexible Box Layout、CSS Box Alignment、CSS Display、CSS Positioning 等特效与动画CSS Animations、CSS Transitions、CSS Transforms、Compositing and Blending、Filter Effects 等单位相关CSS Units、CSS Lengths、CSS Angles、CSS Resolutions、CSS Frequencies、CSS Times、CSS Flexible Lengths其他Media Queries、CSS Variables、CSS Houdini、MathML 以及 Microsoft / Mozilla / WebKit 扩展组等这意味着任何单位记录中groups内出现的模块名都必须能在groupList中找到。units.json 中实际用到的 8 个模块组CSS Units、CSS Lengths、CSS Angles、CSS Resolutions、CSS Frequencies、CSS Times、CSS Flexible Lengths、CSS Grid Layout均是该枚举的有效成员。五、JSON Schema 校验units.schema.json 的规则解读units.schema.json 是这套数据的机器可读校验规则与文档描述一一对应{ type: object, additionalProperties: { type: object, additionalProperties: false, properties: { groups: { type: array, minitems: 1, uniqueItems: true, items: { $ref: definitions.json#/groupList } }, status: { enum: [standard, nonstandard, experimental] } }, required: [groups, status] } }逐条解读其校验约束顶层为对象units.json整体是一个以单位名为键的对象。additionalProperties: false单位记录内不允许出现未知字段数据必须保持纯净只有groups与status两个字段。groups约束必须是数组type: array至少 1 个元素minitems: 1元素不可重复uniqueItems: true且每个元素通过$ref引用definitions.json#/groupList的枚举即必须属于既定的模块名清单。status约束必须是standard、nonstandard、experimental三者之一。required: [groups, status]两个字段均必填缺任一字段即校验失败。这套 schema 与同目录下其他数据文件的 schema 保持一致的风格。作为参照types.schema.json数据类型在相同的groupsstatus必填结构基础上额外允许一个可选的mdn_url字符串字段须以https://developer.mozilla.org/docs/Web/CSS/开头而 units 数据目前不包含 URL 字段这从侧面说明单位数据更侧重于分类 状态的轻量描述。六、在项目中的消费方式与配套结构6.1 统一入口index.jsapps/imba.io/scripts/mdn-data/css/index.js 是这套 CSS 数据的统一导出入口module.exports { atRules: require(./at-rules), selectors: require(./selectors), types: require(./types), properties: require(./properties), syntaxes: require(./syntaxes), units: require(./units), }因此在脚本中可以直接以require(./mdn-data/css).units的方式拿到全部单位记录再结合 schema 做数据完整性校验或按groups字段过滤出某个模块下的单位集合例如筛选出所有属于 CSS Lengths 的单位用于渲染文档导航。6.2 数据文件与站点构建的关系从目录结构看mdn-data位于 apps/imba.io/scripts/ 下与 build-content.imba、build-api-docs.imba等站点构建脚本同级是 imba.io 官网内容生成流程中使用的静态数据资产。同一mdn-data目录下还维护了api/子目录如inheritance.json及其 schema用于描述 Web API 的继承关系说明这类数据 schema 说明文档三件套是该项目沉淀外部 Web 平台数据的统一模式。6.3 与 Imba 样式系统的间接关联Imba 的样式系统与 CSS 单位存在天然联系在 packages/imba/typings/styles.generated.d.ts 中大量样式属性的注释直接引用 MDN 文档链接如width、position、margin等属性的[MDN Reference]注释说明 Imba 的样式类型体系以 CSS 规范为事实来源。可以推断官网这套 mdn-data 数据正是为了支撑站点中 CSS 相关的文档渲染、类型提示与 API 参考内容而 vendored 进仓库的。七、实践要点小结数据读取以单位名为键遍历 units.json每个值必然含groups数组与status枚举两个字段。数据校验使用 units.schema.json 配合 JSON Schema 校验器如ajv验证数据完整性additionalProperties: false意味着任何多余字段都会导致校验失败。新增单位若需录入新单位必须同时满足三条约束——groups中的模块名来自 definitions.json 的groupList枚举、status取三个合法值之一、两个字段缺一不可。语义区分standard/nonstandard/experimental三态直接决定了文档中该单位能否被推荐使用非标准或实验性单位应在 UI 上给出对应提示。这套规范的价值在于它以极简的两字段结构把 CSS 单位的分类归属与标准化状态两种关键信息机器可读化再通过 JSON Schema 保证数据质量为文档站、类型生成器等下游消费方提供了稳定可靠的数据契约。赞分享编程语言编译器语言运行时【免费下载链接】imba The friendly full-stack language项目地址https://gitcode.com/gh_mirrors/im/imba点击查看免费下载相关推荐Imba 文档站 CSS 数据类型清单mdn-data/css/types 的 JSON 结构与校验规范解析Imba 文档站 CSS 数据类型清单mdn data/css/types 的 JSON 结构与校验规范解析 本指南聚焦 imba 仓库 apps/imba.编程语言编译器语言运行时Spacedrive UI 音效资产管理指南从 ffmpeg 音频转换到 sd/assets/sounds 集成实战Spacedrive UI 音效资产管理指南从 ffmpeg 音频转换到 sd/assets/sounds 集成实战 Spacedrive 作为一个跨平台文编程语言编译器语言运行时MDN CSS 选择器数据规范全解selectors.json 结构、Schema 校验与 Imba 文档站集成实践MDN CSS 选择器数据规范全解selectors.json 结构、Schema 校验与 Imba 文档站集成实践 CSS 选择器CSS Selector编程语言编译器语言运行时上一篇高效开启RPCS3自动更新3步让PS3模拟器保持最新状态下一篇3B参数大模型突破企业落地瓶颈Granite-4.0-H-Micro如何重新定义AI效率标准创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考