@ cssints/ 重设

一个小型的现代 CSS 重置用于 点缀,在工作表的其他样式下方的一层,所以任何样式 不管它的特异性如何都比它强 它是一位呼叫成员 cssints/plugin scope() 回到全球规则。 没有 运行时间.

import { reset } from "@cssints/reset" with { type: "cssints" };

// reset({ media?, prose? })
reset({ media: true, prose: true });

@layer reset;
@layer _.k, _.a, _.b, _.c, _.d, _.e;
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    line-height: 1.5;
  }
  :where(input, button, textarea, select) {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: inherit;
  }
  :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
    border: 0;
  }
  :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }
  :where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }
  :where(p) {
    text-wrap: pretty;
  }
  :where(ul, ol)[role="list"] {
    list-style: none;
    padding: 0;
  }
}
/* prose: true */
@layer reset {
  :where(h1, …, p, ul, ol, dl, blockquote, pre, figure, table, hr):not([class])
    + :where(h1, …, hr):not([class]) {
    margin-block-start: 1em;
  }
  :where(h1, h2, h3, h4, h5, h6):not([class]) {
    line-height: 1.25;
  }
}
/* media: true */
@layer reset {
  :where(img, picture, video, canvas, svg) {
    display: block;
    max-inline-size: 100%;
  }
  :where(img, video) {
    block-size: auto;
  }
}

规则

• 基础 是最现代的重置者所同意的乔希·克洛, (中文(简体) ), 杰克·拉扎罗夫, (中文(简体) ), 谷类: border-box,无边距,可读行高,移动上没有文本膨胀,页面字体中的窗体控件和 颜色,不包含浏览器边框的按钮(其比维尔;文本字段,文本区域并选择保留其边框),长 将标题和段落围起来、平衡、无孤儿。 按钮保留背景和粘贴 浏览器(Tailwind的飞行前会丢掉背景;此重置不会). 垫子留了下来(列表保留了空间) 的标记 ) role="list" (Andy Bell's),因为Safari停止宣布一个 列表中 list-style: none。 。 。 .
• media: true 制作从未溢出容器的图像、录像、画布和 SVG 块,并保存 图像或视频的外观比 height 属性设置.
• prose: true 添加文本的空格 : 1em 在相继相继的流出元素之间( Andy Bell's 流动)),并收紧标题,只收紧没有 班级(杰克·拉扎罗夫) :not([class])马克德的作品 带有克辛斯类的元素被单独保留.
• 所有东西下面. 规则在顶层 reset,在引擎层前声明(a) layers 条目 before: true),所以重置位于内核下方, global() 和象征性规则 _.k,在类以下 层和您以 layers();一个没有层次的样式表也胜过它.
• 层层你自己的之间. 之后再申报 reset在发动机之前: layers("reset", "base", { before: true }) 设置 base 在重置的上方和下方的每个相色素样式.
• 一次 一次吗. 每个区块是其文本所确定的一条全球规则: reset() 在两个模块中,或 reset() 财务报告和审定财务报表 reset({ media: true }),打印基地一次.

基线变量

@cssints/reset 是整个重置. @cssints/reset/<group> 同样的呼吁是: 成份基准组 仅限(inGroup 联 合 国 cssints/plugin,来自 cssints 的组数据 : widely-available, (中文(简体) ), newly-available, (中文(简体) ), baseline-2015 改为 baseline-2026 (该年年底的基准是什么) 每个 /with-downstream (也与歌剧,三星互联网,Android WebView,UC和QQ对照). A 类 声明其财产或价值没有被排除在外,没有声明的规则就会失效. limited-availability 是一切,因为 @cssints/reset。 。 。 . not-discouraged 没有变体:它禁止三个属性 重置不使用的四个关键字。 无基线组的名称是一个类型错误.

import { reset } from "@cssints/reset/widely-available" with { type: "cssints" };

reset({ media: true, prose: true });

每个变体都掉到什么去( 由 node test/reset.mjs --write,检查 bun run test:

放弃的申报没有被替换. text-wrap: balance 财务报告和审定财务报表 pretty 是进步的:没有他们 和往常一样 无前缀 text-size-adjust 只针对不读取的浏览器 -webkit-text-size-adjust, (中文(简体) ), 每一个变种都保留着它(每个变种中都有一种财产).

限制

• 选择者不检查 . 组数据有没有参数的伪类(:hover),没有 功能伪类( u):where(), (中文(简体) ), :not()),伪元素(::before, (中文(简体) ), ::backdrop,属性选择器或 组合器 。 一个变体保持每个选择者都写,所以 baseline-2015 改为 baseline-2020 保持规则与 :where() (基准2021)和 :not() 带有一个选取者列表,只放弃他们的申报.

• reset 合同名称: a layers("reset") 无 before,或者另一个声明的插件 reset 之后 引擎的层,是一个构建错误.

• 规则集是固定的:每个规则没有选项. 你不希望的规则被你的任何风格所压倒.

• 在模块的顶级, 在页面加载的模块( 条目) 中调用它 : 重置在模块的工作表中 那叫它,然后和他们一起离开.

cd packages/reset && bun run test   # fixtures through the engine (the order of the sheet, the flags, each variant), and the type test via bun run typecheck
cd packages/reset && bun run variants   # rewrite src/groups after a bun run groups in packages/cssints

贷项

基础遵循什么 乔希·克洛, (中文(简体) ), 杰克·拉扎罗夫 财务报告和审定财务报表 谷类 出版; role="list" 流动规则是 安迪・贝尔的编辑 这些声明是这些重新发行的。 它们被写在这里,作为全球 scope(); 没有复制文件.