# @cssints/skeleton 中文文档

规范地址：https://npmcn.com/package/%40cssints/skeleton/

版本：0\.35\.1
npm 元数据更新时间：2026-11-07T14:55:42.124Z
中文译文更新时间：2026-11-11T03:47:08.426Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cssints/skeleton
原文对照：https://npmcn.com/package/%40cssints/skeleton/?lang=original
项目主页：https://cssints.dev/
源码仓库：https://github.com/alexeiaccio/css-in-ts-compiler

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：13 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- peer 依赖：cssints ^0\.35\.0
- 首次发布：2026-10-10T20:57:56.728Z
- 最新版本发布：2026-11-07T14:55:41.810Z
- 近 30 天下载量：7253（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：42（近 12 个月 42 个）

## 中文简介

Skeleton 加载器,用于Csints的相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相

## 安装

```sh
npm install @cssints/skeleton
```

也可以使用：`pnpm add @cssints/skeleton`、`yarn add @cssints/skeleton`、`bun add @cssints/skeleton`

## README

# @cssints/skeleton (英语)

正在装入占位符 [点缀](https://npmcn.com/package/README.md) 他的光辉在页面的相间 挂载: 一个链式成员 `cssints/plugin` `scope()`之后 [同步斯凯莱通](https://github.com/crutchcorn/sync-skeleton)。 。 。 . 没有运行时间.

```ts
import { cn, height, hover, width } from "cssints" with { type: "cssints" };
import { skeleton } from "@cssints/skeleton" with { type: "cssints" };

export const line = cn(skeleton(), height("1em"), width("12rem"));
export const avatar = cn(skeleton().radius("50%"), width("3rem"), height("3rem"));
export const branded = cn(skeleton().color("#e4e4f0").highlight("#f4f4fa"), height("8rem"));
export const card = cn(skeleton(), hover(skeleton().highlight("white")));
```

```css
@property --skeleton-p {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}
@layer _.k {
  @keyframes kf-1a2b3c4d-skeleton {
    from {
      --skeleton-p: 100%;
    }
    to {
      --skeleton-p: 0%;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    :root:has(._skeleton-clock) {
      animation: kf-1a2b3c4d-skeleton 1.5s ease-in-out infinite;
    }
  }
  ._skeleton-core {
    border-radius: var(--skeleton-r, 0.25rem);
    background-position: var(--skeleton-p) 0;
    background-image: linear-gradient(
      90deg,
      var(--skeleton-c, color-mix(in oklab, currentColor 12%, transparent)) 40%,
      var(--skeleton-h, color-mix(in oklab, currentColor 4%, transparent)) 50%,
      var(--skeleton-c, color-mix(in oklab, currentColor 12%, transparent)) 60%
    );
    background-size: 300% 100%;
    background-attachment: fixed;
  }
  /* only for targets without color-mix() (the defaults have Chrome 109) */
  @supports not (color: color-mix(in oklab, red, red)) {
    ._skeleton-core {
      background-image: linear-gradient(
        90deg,
        var(--skeleton-c, rgb(128 128 128 / 20%)) 40%,
        var(--skeleton-h, rgb(128 128 128 / 8%)) 50%,
        var(--skeleton-c, rgb(128 128 128 / 20%)) 60%
      );
    }
  }
}
@layer _.a {
  ._kkw3xj {
    --skeleton-r: 50%;
  }
  /* ... */
}
```

`skeleton()` 实值 `"_skeleton-core _skeleton-clock"`; 每种方法都增加了一个类. 两个内核都写成样式,没有生 CSS: 时钟是 `media("(prefers-reduced-motion: no-preference)")(nest(":root:has(&)")(animation(keyframes({ from: vars({ "--_p": "100%" }), to: vars({ "--_p": "0%" }) }), "1.5s ease-in-out infinite")))`,并且只有它的 `@property` 注册是一个字符串( e)`atProperty`) (中文(简体) ). 键框名是带有瞄准镜后名的阶梯的散列.

## 如何保持同步

CSS动画在元素获得风格后开始, 所以一个骨架在700ms后面运行700ms 它, 页面闪出一步。 这里没有骨架运行动画。 一个动画 `:root` 移动已注册的, 继承百分比, `--skeleton-p`每一个骨架都读作 `background-position`:有一个钟,所以 每个浏览器都有一个阶段 `@property`。动画只在文档中刻出骨架时才开始 (单位:千美元)`:root:has(._skeleton-clock)`),所以一个没有的一页一无所取;当上一页一去一去,一来一来一来一来一来一来一来一来一来一来一来一来一来一来一来一回一来一回的一去一去一去一去一去一去一去一去一去一去一去一去一去一去一回一去一去一回一去一去一去一去一去一去一去一去一去一去一去一去一来一来一去一来一去一来一去一去一去一去一去一去一去一来一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去一去 重新开始 没有什么不对劲.

梯度是三个宽的取景口 `fixed` 在取景口,所以乐队扫一页, 横穿每一个 模板,作为一幅图片(同一取景口x的同像素,由浏览器测试读取). 何处 `fixed` 没有 效果(iOS Safari,BCD标记为部分执行) 每个骨架都有自有大小的波段,仍然在 同一时钟:在时相中,不在空间.

其它方式被打分后离开: `background-attachment: fixed` 每条骨架线上都有动画 空间而非时间(每部动画仍然从自己的站台开始);负数 `animation-delay` 从 `document.timeline.currentTime` 是脚本; CSS 没有文档时间线来命名于 `animation-timeline` (仅滚动和 查看时限),以及 `animation-delay: calc()` 不能读取时间 .

## 规则

-   **方法**,每一次,任何顺序,所有可选: `radius(<length-percentage [0,∞]>)` (单位:千美元)`0.25rem`, (中文(简体) ), `color(<color>)` (底,文本颜色为12%), `highlight(<color>)` (乐队,文字颜色为4%). 每个都是一个等级的 习惯财产,所以一种方法在条件下起作用(`hover(skeleton().highlight("white"))`) (中文(简体) ).
-   **颜色.** 默认组合 `currentColor` 进入透明,所以骨架是一个更暗的盒子 在一页和一页 暗页上更轻一分,而它的乐队也更少了(一分光扫光,一分暗地取出. 内核读取 `--skeleton-c`, (中文(简体) ), `--skeleton-h` 财务报告和审定财务报表 `--skeleton-r` 默认值为倒置值,所以设定了祖先主题的值 里面的每个骨架 A 类 `background-color` 以透明颜色显示.
-   **减少运动.** 下 `prefers-reduced-motion: reduce` 时钟不运行 : `--skeleton-p` 在初始时停留 `100%`,这让乐队远离页面, 每一个骨架都是它的底色,仍然.
-   **冲突.** `skeleton()` 设置背景图像、大小、位置和附件及角:a `cn()` 那个 拿着,拿着 `background` 简称,其中一种或一种 `border-radius*` 属性是一个构建错误,来自 内核 : `cssints: skeleton: kernel core sets border-radius, background-image, background-size, background-position, background-attachment (this style also sets background)`。 。 。 . `hover(skeleton())` 也是建构错误(内核不能是有条件的); 反之, 围着一个方法.
-   **错误** 语法,在类型和建设时间: `skeleton.radius: unexpected "-4px" in "-4px", expected <length-percentage [0,∞]>`, (中文(简体) ), `skeleton.color: unexpected "4px" in "4px", expected <color>`。 。 。 .

## 浏览器

`bun run test:browsers` 装上600px骨架,然后700ms 后装上300px1 和运行相同的控制器 键框本身,暂停动画,从截图上读取每个动画一行:

| 浏览器 | 动画 | A和B(300栏) | 控制权 | 减少动议 |
| --- | --- | --- | --- | --- |
| Chrome (安装频道) | 一个,打开 `:root` | 0个栏不同 | 132 (韩语) | 无, 底色 |
| Firefox (克莱赖特建筑) | 一个,打开 `:root` | 0个栏不同 | 132 (韩语) | 无, 底色 |
| WebKit (克莱赖特干线建设) | 一个,打开 `:root` | 0个栏不同 | 132 (韩语) | 无, 底色 |

`@property` (Chrome 85、Firefox 128、Safari 16.4)和 `:has()` (Chrome 105, Firefox 121, Safari 15.4) 是内核的 `requires`:缺少目标就是建构警告. 无 `@property` 作为离散值的动画百分比 而乐队从不显示(底色,平面) `:has()` 没有动画。 目标没有 `color-mix()` 构造中添加灰色默认值 `@supports not`,只有那时.

## 限制

-   时钟动画 继承的自定义财产 `:root`因此,当一个骨架挂起时,浏览器将更新 样式。 装入页面的罚款; 将骨架放在忙碌的页面之外 .
-   页面的一时钟:持续时间(1.5s),放松和方向对每一个骨架都是一样的,有 对他们来说没有方法.
-   骨架内有文字显示:将文字写出空出,或者隐藏其子孙. 骨架上透明的文字颜色 默认也透明( 它们混合) `currentColor`; 给它 `skeleton().color(...).highlight(...)` 那麽.
-   频段为横向,从左到右;没有脉冲变体.

```bash
cd packages/skeleton && bun run test           # fixtures through the engine (output, conflicts, errors); bun run typecheck for the type test
cd packages/skeleton && bun run test:browsers  # the phase and reduced motion in Chrome, Firefox and WebKit
```

## 贷项

共享时钟如下 [同步斯凯莱通](https://github.com/crutchcorn/sync-skeleton) (麻省理工学院, Corbin Cruchley). 这个 CSS在此被写入; 没有复制代码 .

## 常见问题

### @cssints/skeleton 是什么？

Skeleton 加载器,用于Csints的相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相

### 如何安装 @cssints/skeleton？

在项目目录运行 npm install @cssints/skeleton，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：cssints（^0\.35\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cssints/skeleton 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cssints/skeleton 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cssints/skeleton 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cssints/skeleton 可以商用吗？

@cssints/skeleton 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cssints/skeleton 的下载量有多少？

根据 npm 官方下载统计，@cssints/skeleton 在 2026/10/11 – 2026/11/09 这 30 天内被下载 7,253 次，日均约 242 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cssints/skeleton 还在维护吗？

最新版本 0\.35\.1 发布于 2026/11/07（3 天前）；至今共发布 42 个版本，其中过去 12 个月发布了 42 个；首次发布于 2026/10/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。