@ canonical/ styles-vanilla- 适应器

运行 pragma 的组件在一个应用程序中,这个应用程序仍然与 Vanilla Framework 一同被构建. 这两个框架的样式是同一页,而不互相接触,因此可以一次移取一页,而不是一次全部移取一页.

您的现有样式表将保留 。 所有香草都移动在一个级联层内,这个包的订单语句会超过它,而普拉克马的CSS从它的后第二个条目被加载. 您的选取器没有更改, 任何内容都无法用构建步骤重写 .

包装了三个样式表,只取决于 @canonical/styles。没有提及字体、图像或图标,因此在构建时没有新内容被下载或复制.

设计背后的推理是Pragma的级联解释, docs/explanations/STYLES_CASCADE.md。 。 。 .

先决条件

惠璶 @canonical/styles 0.38.0或以后,将样式表作为三个出入口的放行: tokens.css, (中文(简体) ), elements.css 财务报告和审定财务报表 layout.css. 早期的释放将行不通,因为进口 adapter.css 不要解决,没有任何东西可以将封闭的拷贝作为拷贝.

依赖性是正常的,有护身符范围,如组件包中,它会将拷贝取自的放出贴上. 一个测试将副本与这个寄存器中的该发行源进行比较,因此两者不能相去甚远.

此软件包随同发布 @canonical/styles,它的依赖范围随它而移动,所以一个安装总是将被限制的复制件与它从中取走的发行相配.

安装

这些步骤假设你的"香草"建筑是"萨斯",因为这就是"香草"的船和经营它的每一个站点今天的编译方法. 第二步和第三步被写作"Sass",其余部分是平地CSS和标记. 如果你没有萨斯台阶, 没有构建步骤的页面 食谱下同样使用链接标签和导入 用捆绑器构建的应用程序 覆盖一个 JavaScript 条目 .

1. 增加包件

bun add @canonical/styles-vanilla-adapter @canonical/ds-assets

@canonical/styles 该包裹的附属物, 在释放时, 封装的副本被取自。 混合页面不直接导入, 因为 adapter.css 这样做是为了你。 当这个包裹离开时 它会移动到你自己的货单上,它被覆盖 删除。 。 。 .

2. 将香草放入一层

在你已经拥有的样式表里, 将香草和所有建在它上面的东西包装成一个单子 @layer vanilla { … } 块: @import "vanilla-framework" 线条本身,您的图案,您的覆盖, 以及任何第三方 CSS 您的内置。 没有选择器更改, 文件没有移动 .

香草进口在块内而不是上方,因为香草在进口时会发布一条规则(hr.is-fixed-width然后与其它一切一起降落在地层里。 在街区外别管香草时代的规矩.

3. 将订单说明放在上面

命令语句必须是浏览器所读的第一个规则,在它命令任何规则之前. 仅 @charset 可能来之前.

这是没有安全网的一个步骤。 当浏览器第一次看到它的名称时,一层层就取而代之,以后的语句都无法移动它,所以一个样式表会打开一个 ds 读出之前的一层将每个平板层置于边界下方——然后将平板层取而代之,取而代之。 每个部件都是赤裸裸的 控制台里什么都没有 "这个包裹不修"有细节;第七步就是如何检查.

/* styles.scss — your existing stylesheet, with two changes */
@use "@canonical/styles-vanilla-adapter/src/layers";

@layer vanilla {
  @import "vanilla-framework";   /* everything you already had, unchanged, inside the block */
  @include vanilla;
  /* your patterns and overrides, as today */
}

这需要 node_modules 在您的 Sass 载入路径上, 大部分设置已经存在; 在命令行上是 --load-path=node_modules. Sass读取了文件,并插入了您所写的语句,所以该语句是您编译的 CSS 的第一个规则. @use "@canonical/styles-vanilla-adapter/src/layers.css" 如果您喜欢命名扩展名, 也会做同样的事情.

src/layers.css 是一个支持的路径,而不是内部路径。 它在这里命名, 而不是通过软件包的导出映射, 因为 Sass 解析一个负载路径 exports。 。 。 .

一种形式不起作用,它悄悄地失败: @import 带有 .css 后缀。 萨斯离开它作为文字 @import 因此,浏览器被要求获取一个空包名称,而语句从未到达。 使用 @use,这也是达特·萨斯3存活下来的形态 @import 删除.

4. 将Pragma的CSS放入第二个条目

常规创建第二个条目 pragma.css开始于 adapter.css 并继续使用您使用的组件包:

/* pragma.css */
@import url("@canonical/styles-vanilla-adapter/adapter.css");
@import url("@canonical/react-ds-global-form/dist/esm/index.css");

这里不需要一个 layer() 关键词或你自己的包装。 每个样式表平板船已经写进自己的图层: 设计系统自己的规则 normalize, (中文(简体) ), ds.reset, (中文(简体) ), ds.typography 其余部分,以及每个组件包入层中,用于其分层。 第3步固定了所有这些名字的顺序,因此每张被子在装载时会降落在它所属的地方.

这是与"香草"的区别,"香草"对地层一无所知,因此必须用第2步的手来包裹.

出于同样的原因,本条目内的进口顺序无关紧要:分层决定优先,而不是顺序. 重要的是,它没有进入 vanilla 将Pragma的规则 置于边界下方 让香草远离它们 以任何已经解决的软件包进口问题来解决输入问题.

第一个导入带来 @canonical/styles/tokens.css, (中文(简体) ), @canonical/styles/layout.css 这个包裹 elements.css 带着它 不导入 @canonical/styles 或编号 elements.css 在混合页面上:这些样式是整个文档的样式,这是一个只使用平板电脑的页面想要的,是混合页面需要避免的.

5. 将它们联系起来,并确立根类

<html class="site comfortable light">
  <head>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="pragma.css">
  </head>

使用 app comfortable light 改为 site comfortable light 在申请中。 一个上下文类,一个密度类,和 light。没有迹象表明该页面是混合的,因为不需要.

链接顺序不能决定哪个框架获胜,因为层层这样做. 重要的是命令语句是浏览器所看到的第一个规则,该步骤3安排了.

这就是整个设置。 将 pragma 组件写入 Vanilla 仍然拥有的页面是一个单独的事务 领土 财务报告和审定财务报表 规则 范围: ds 根可能去,什么可能不进入一个内部, 光和暗如何到达一个组件.

6. 两种框架的字体一次申报

两个框架都想要一个字体,两个框架都没有。 香草取出一个家族的名字,并期望页面会宣布;pragma也这样做. 在您自己的样式表中, 将面孔声明一次, 并将两个框架指向这些名称 .

此软件包中没有样式表可以获取任何东西 。 普拉玛的一件事 tokens.css 带来文件名称: 临界修饰符声明 --modifier-icon 作为 url("/icons/…")绝对的路 除非某个组件读取该符号,否则不会获取任何东西,而设计系统中的任何组件今天也不会获取,但是,如果你写一条规则,那么就从自己的根来服务这些图标,或者覆盖该符号.

在您的香草设置中, 在香草导入前:

$font-base-family: "Ubuntu Sans", "Ubuntu", "Cantarell", system-ui, -apple-system, "Segoe UI", sans-serif;
$font-monospace: "Ubuntu Sans Mono", "Ubuntu Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

在自己的样式表中,面相本身:

@font-face {
  font-family: "Ubuntu Sans";
  src: url("@canonical/ds-assets/fonts/ubuntu-sans/UbuntuSans[wdth,wght].woff2")
    format("woff2-variations");
  font-weight: 100 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu Sans";
  src: url("@canonical/ds-assets/fonts/ubuntu-sans/UbuntuSans-Italic[wdth,wght].woff2")
    format("woff2-variations");
  font-weight: 100 800;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

三件事来了解这些街区。 调整两者 url() 您的构建会解决软件包资产。 没有单空格可以声明, 因为文件 @canonical/ds-assets 这个名称下的船还没有字体,所以单相距文字倒回上方的堆栈,不管怎样它都会降落在那里. 离开 @canonical/styles/fonts 调出 pragma.css:它从这些相同的文件中宣告这两个相同的面相,所以加载它以及每个面相声明两次.

备选方案是让每个框架都命名自己的家庭,下载了两次相同的打字机,使两个领土略有不同.

7. 检查一下

五事告诉你,页面设置正确. 命令声明是您所构建的CSS的第一条规则, 在提到一个 ds 层。 每个规则都坐落在一个宣布的地层中. 唯一一个 !important 在您自己的"香草样式表"之外的声明是本套件所写的4个,它回答了"香草"自己的问题. 根能随类. 也没有香草课出现在任何下面 .ds。然后运行自己的视觉检查:如果五人中的第一个错误,页面看起来会像没有被设定的标记,而不是隐蔽地关闭.

如果有什么不对劲, 解决问题 从症状开始.

领土

带有类的元素 ds里面的一切都属于普拉克马 香草课不去那里:不 p-*, (中文(简体) ), u-*, (中文(简体) ), l-* 或者说 is-* 任何深度的课,没有遗留的组件, 和没有包装让香草回来.

如果把香草标记放入一个普拉格玛组件中,那么它就不用香草的风格就能制作出,取而代之的是浏览器的默认和普拉克玛的元素基线. 边界是正常的而不是错误的。 将内容先移走,或者离开集装箱香草,直到你能够.

可渗透组件

这种默认适合儿童本身是一团一团的部件,例如卡片头和身体。 一个布局组件经常是相反的情况:一个网格或响应包装器存在来安排内容,而不是拥有,它所安排的内容可能仍然是香草. 添加 ds-permeable 并行 ds 其领土仅止于本身,而不延伸至它所包含的:

<div class="ds grid ds-permeable">
  <div class="col-6 p-card">…Vanilla, unchanged…</div>
  <div class="ds card">…an ordinary pragma component, also unchanged…</div>
</div>

根子仍然是普拉克马的:它像任何其他岛屿一样获得边界和被限制的基线. 停止的是它包含的伸展力。 一个普通的香草孩子 保持其香草的风格 完全如它所愿 在网格外, 因为边界和 封闭的复制都看不到 ds-permeable 根入其内. 上面的卡片不受影响: 它携带 ds 这块地盘一直被钉在地上 所以它是一个完整的岛屿 不论它在哪里筑巢.

有一件事是不会停止的 ds-permeable 根:继承. 根仍然宣称普拉克马自己的字体,颜色和行高,与任何岛屿根相同,一个对其中一个地产没有自己规则的"香草"孩子继承了普拉克马的价值而不是主页的价值,任何CSS继承都一样跨越任何元素. 香草的大部分内容没有受到影响,因为香草自己的组件一般会设定自己的打字方式,而不是依靠继承. 依赖它的内容,比如没有香草类的裸段落,不是什么 ds-permeable 被写成; 将它用一个香草元素来包装, 设置它自己的字体和颜色, 或将其保存在网格之外, 并将网格的物品作为兄弟姐妹放置.

规则

规则是编号的,以便审查可以指向一个.

领土

1. 没有香草课到里面去 .ds如上文所述.
2. 每个元素都有一个所有者。 不要把香草课放在一个 .ds 根,不设置 ds 在香草的标记。 转而环绕 : <div class="col-6"><div class="ds card">…包装器在任何以直接儿童为对象的香草集装箱内是必要的,例如: .row, (中文(简体) ), .p-form--inline, (中文(简体) ), .p-equal-height-row, (中文(简体) ), .p-divider 或者说 .p-navigation__dropdown,因为 .ds 放置在那里的根会失去其网格设置.
3. 交换内出部分:先是控制,再分组,再是容器,再是页壳. 改变一个容器,一旦没有香草留在里面, 并给一个区域 ds 一旦它清除出香草.

根要素

4. 从第一天开始,写 <html class="site comfortable light"> 在一个地点,或 app comfortable light 在应用程序中:一个上下文、一个密度和 light。没有迹象表明该页面是混合的,因为不需要。 普拉格玛的地盘是携带着 ds,以及 elements.css 将Pragma的元素风格局限于它们本身. 别放 ds 打开 <html> 而香草在页面中, 因为这使得整个文件 是一个普拉克马岛和边界 然后恢复其中的每个香草规则.
5. 从一个框架到另一个框架没有任何翻转。 平板页和混合页带有相同的根类,只有样式表不同. 一个 pragma 页面加载 @canonical/styles,其元素层样式为整个文档。 混合页面加载此软件包。 香草去之前的最后一座州只是一页,里面没有香草课.

光和暗模式

6. 虽然两个框架都在页面上,但"香草"模式类决定了光或暗,其他都无所作为. 暗页是 <body class="is-dark">,一个黑暗的部分是 .p-strip--dark 或者说 .p-strip.is-dark里面的一座浅岛是 .is-light 或者说 .is-paper。其中的Pragma组件通过桥继承了正确的模式,而你没有为它加分.
7. A 类 .dark 或者说 .light 在香草页内的平板根上进行分类没有效果,因为桥会赢得长久 adapter.css 已装入。 如果一个区域周围没有香草模式类,需要自己的模式,请声明 color-scheme 从你的 app 它坐落在包括桥在内的每层平面上.
8. 操作系统的暗模式在两个框架都在上面时没有到达页面. 此软件包一去不复返, 便会决定模式: 保存 light 或者说 dark 打开 <html> 作为切换,或去掉接上系统的接针.
9. 离开 color-scheme 到桥上。 无阶地 :root 规则设置它比 每一个模式类和每一层.

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}什么是达不到的

10. 这种安排不需要四样东西,每样东西都显示有别的东西是错误的. 一个 !important 以赢得一个争论,从而将决定从层取出。 这个软件包写了四个, 在一个叫做 vanilla.escapes,它们是显示规则的例外。 它们共同构成"第二个边界": 香草船有五条重要规则可以到达一岛内,而一个重要的宣言只能由从下层的另一条规则来回答,因此它们坐落在香草下方而不是上方. 每个名称都是单一财产,而不是 all,每个火只下放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出放出 手写对了香草, 当边界已经这样做了, 真正的问题在领土上。 包子或者让香草回到里面的小岛 .ds。一个建构步骤或一个变换使两个框架合用,这通常意味着有些东西在边界的错误一面.

可渗透组件

11. ds-permeable 只要缩小一个领土, 永远不扩大一个领土。 它阻止根的领地到达它的子孙;它不让香草进入 .ds 而且它也不能免除一个被窝住的平板块 成为其中之一。 用布局来安排香草内容, 而不是用孩子本该是花花公子的.

设计说明

地层,边界,模式桥和封闭的复制工作, 以及为什么选择者被写的方式 设计。 。 。 .

浏览器支持

最后一栏是支持该功能的履带全球浏览器使用份额,从2026年9月的Caniuse-lite 1.0.30001780. 运行 bunx browserslist --coverage "supports css-cascade-scope" 自己去检查他们中的任何一个.

下方的浏览器 @scope 地板将每个被限制的块整体降下,因此在边界仍然被保持的情况下,pragma的组件会用浏览器本身的默认来渲染出三个元素层. 仅限普拉克玛的页面不受影响,因为 @canonical/styles 写入否 @scope普拉格玛自己的楼层 light-dark(), (中文(简体) ), mod() 编辑 cap 单位,该软件包的README中记录并适用于两种页面.

食谱

一个萨斯站点

static/sass/styles.scss数字 :

/* 1. The order contract, inlined in place. Needs `node_modules` on the Sass
      load path; see step 3. */
@use "@canonical/styles-vanilla-adapter/src/layers";

/* 2. Vanilla and everything built on it: one layer, one territory.
      global-settings sets $font-base-family and $font-monospace to
      pragma's stacks, and fonts declares the two faces (step 6). */
@import "global-settings";
@layer vanilla {
  @import "vanilla-framework";   /* inside the block: Vanilla emits a rule at import time */
  @import "cookie-policy";       /* inlined third-party CSS moves inside the layer */
  @include vanilla;
  @import "fonts";               /* the two @font-face rules from step 6 */
  @include site-patterns;        /* local patterns, as today */
  /* … overrides, as today … */
}

pragma.css,第二个条目由您现有的导入解析器解决,并且从未清除:

@import url("@canonical/styles-vanilla-adapter/adapter.css");
@import url("@canonical/react-ds-global-form/dist/esm/index.css");

写入 <html class="site comfortable light"> 和链接 styles.css 在此之前 pragma.css。 。 。 .

用捆绑器构建的应用程序

@import url("@canonical/styles-vanilla-adapter/layers.css");
@import url("./fonts.css");                        /* the two @font-face rules from step 6 */
@import url("./vanilla.css") layer(vanilla);       /* Vanilla compiled to a file */
@import url("@canonical/styles-vanilla-adapter/adapter.css");
@import url("@canonical/react-ds-global-form/dist/esm/index.css");
@layer app { /* your pragma-era CSS */ }

写入 <html class="app comfortable light">。 。 。 .

Bundlers 发射 CSS 按其模块图到达的顺序,而不是按您条目列出事物的顺序,所以在任何组件软件包之前,确保设计系统的 CSS 到达. 较早导入的组件模块可以将其软件包的样式表拖到命令语句之前.

没有构建步骤的页面

<link rel="stylesheet" href="vendor/layers.css">
<link rel="stylesheet" href="fonts.css">               <!-- the two @font-face rules from step 6 -->
<link rel="stylesheet" href="vendor/vanilla.css">      <!-- wrapped in @layer vanilla { … } -->
<link rel="stylesheet" href="vendor/pragma.css">       <!-- adapter.css with its imports resolved into one file, then the component sheets -->
<link rel="stylesheet" href="style.css">               <!-- your CSS, inside @layer vanilla or @layer app -->

香草的家族变量被编成 vendor/vanilla.css 已经,所以用 pragma 的堆栈建立文件,或者将两个家庭重复到 style.css。 。 。 .

保证

每行命名检查它的固定线, 在 tests/。将被限制的拷贝与 pragma 的样式表进行比较的版本,没有浏览器;其余的则渲染出两页并比较浏览器的计算结果,因此两个页面上的错误值会失败而不是通过.

• 封闭的复制件是 pragma 的元素层,规则规则和声明,在选择器映射到 设计. 两个规则和一个声明只在副本中存在,每个规则和声明在测试中分别命名其理由. (tests/elements.test.ts(中文(简体) )
• 没有香草规则在普拉克马的领地内 刻出一个元素 用于任何声明 !important。每个这样的属性要么是浏览器的默认值,要么是普拉克玛的(pragmatests/territory.test.ts超过完整的财产清单; tests/vanilla-territory.test.ts 明确检查 --vf-color-text-default,根线高和 box-sizing(中文(简体) )
• 5个香草 !important 可以在岛屿内达到的规则以实物形式得到回答,从香草下方的一层得到回答tests/boundary.test.ts(中文(简体) )
• 一种本身是岛屿根的元素,其风格仿佛只在一页上,无论它是什么元素。 (tests/boundary.test.ts,超过31个)
• 香草祖先不会将所继承的地产推入一个岛屿,但下文所述的一个故意例外tests/boundary.test.ts(中文(简体) )
• 凡尼拉页面中的普拉克玛元素会计算出与只用普拉克玛页面上的相同样式,每个属性的普拉克玛声明或离开浏览器. (Pracma)tests/territory.test.ts(中文(简体) )
• 香草不样式 .ds 根本身。 (tests/territory.test.ts 放在香草容器内, tests/vanilla-territory.test.ts 用于全长比较)
• 香草黑片内的平板根计算 color-scheme: dark,其标志驱动的颜色与普拉克玛的暗页相匹配. 在灯光或纸张区段内,它计算出光。 (tests/theme.test.ts,涵盖四个主题案例 .is-paper(中文(简体) )
• 安装此套件不会改变香草的地盘, 但以下一个例外: 外的每个元素 .ds,包括: html 财务报告和审定财务报表 body,匹配只使用香草的页面。 ()tests/vanilla-territory.test.ts,在1280和1700像素时)
• 何处 adapter.css 坐在你的垃圾箱里没关系 何处 layers.css 坐着吧tests/order.test.ts,则阴性病例在 tests/boundary.test.ts(中文(简体) )
• 删除后,页面会变成一页一页,每个根都跟着一页一页 light 财务报告和审定财务报表 dark 分类。 (tests/theme.test.ts(中文(简体) )

这个包没有修正

每一个都是在真实的一页上可以遇到的区别,或者可以走入的危险. 之所以列入清单,是因为它们是上来的,而不是因为它们很少跳过。 凡有为一而有为一而有为说.

命令声明必须先进行,如果不是,没有什么会警告你的. 一个级联层在浏览器第一次看到其名称时的顺序中取而代之,而后一个语句可以添加名称,但从不移动名称. 所以如果有任何样式表提到 ds 层到达浏览器前 layers.css ——一个组件包,或pragma自己的一个条目——然后 ds 放在顺序的下方,下面 boundary,而边界 all: revert 跑过普拉克马自己的规则 而不是香草。 每一个平面元件都变成赤色的标记 没有控制台警告,也没有局部的失败;这是全部或完全没有的。 有第二条路可以进去,有同样的原因 级联层的子层在它内部排序,而子层的位置在它的名字第一次出现时也是固定的. 因此样式表可以打开 NAMED 子层 vanilla 在宣读声明之前—— @layer vanilla.mine { … } - 将那个下层放在这个包的前面 !important 在它内部声明,然后跳过第二个边界。 测量:一个岛上的一张名单 拿走了香草 max-width: 640px 而不是浏览器 none。将同一规则直接写入 @layer vanilla { … },这是安装步骤2所要求的,在任一顺序上都是安全的.

安装步骤3是整个防御, adapter.css 导入语句本身,以便单导入路径不会出错,步骤7就是您如何检查。 测量 tests/boundary.test.ts两种方式.

7个普拉克马类名称不是前缀,它们匹配主机标记. tokens.css 财务报告和审定财务报表 layout.css 是Pragma自己的条目,这个软件包装满了它们的全部,所以他们的规则适用于页面上的任何元素,不仅适用于一个岛屿内部. 他们的名字是 grid, (中文(简体) ), subgrid, (中文(简体) ), responsive, (中文(简体) ), intrinsic 财务报告和审定财务报表 content-flow 从布局预设,以及 light 财务报告和审定财务报表 dark 从主题修改符。 他们坐在那里 ds.components.global 财务报告和审定财务报表 ds.modifiers,以上两者 vanilla,所以当一个主机元素已经携带了其中一个名字时,pragma获胜. grid 这是值得检查的。 重新命名你的电话 丢弃条目不是此软件包提供的选项 : adapter.css 进口 layout.css,以及 light 财务报告和审定财务报表 dark 抵达 tokens.css 通过设计符号, 所以避免它们意味着手溶 adapter.css 而不是进口它。 碰撞是修复上游的道具,如果不运送第二份,这个包裹就不能限制碰撞.

回答香草 !important 让你在四个公共设施里 拥有房产. 一个重要的宣言只能由从下层另一个来回答,所以这个包所写的这四个计数器也是重要的. 无论谁点出火来 都比它高  价值以及香草。 这是里面 .u-text-max-width 页:1 max-width 在列表中,内部 .u-table-layout--fixed 或者说 --auto 页:1 table-layout 在一张桌子上,里面 .p-content-card__author-and-date 页:1 margin-bottom 第1个孩子不是标题或段落,而是内部的 .u-vertically-center 页:1 align-self 在图像上。 每起火只放入香草类, 所以把岛屿从公用设施中移出, 或把地产放在一个内元素上,而不是岛根上, 就能把它带回来.

一个香草工具完全无法回答. .u-table-layout--auto 部队 table-layout: auto,这是浏览器本身的默认值。 计数器只能还原和还原在同一价值上的土地,所以该工具内部的平板电脑不能恢复 table-layout: fixed 它要求的。 测量: auto 还有柜台 auto 没有,反对 fixed 一页只计算出一页。 没有反面,因为任何改变都不会被理解为掩护。 将表格从工具列表中移出,或将布局设置在内部表格上.

三种打字特性被停止给每个人,而不只是给香草. 岛根宣布 word-spacing, (中文(简体) ), text-shadow 财务报告和审定财务报表 text-underline-offset因此,一个主机页面对他们本身的价值也没有到达该岛。 CSS中没有任何东西能从一个框架中分辨出一个主机的刻意选择,这三种是香草本身永远不会表现出区别的. 把他们放入岛上,如果你想要的.

一个岛根不会继承一个表格单元格的文本对齐或它的大胆. 浏览器居中a <th>,在一页纸上,一个小岛 内部 一个继承它。 在这里,岛根宣布 text-align: start 财务报告和审定财务报表 font-weight: normal因为那些相同的属性是如何的香草 u-align--* 家庭及其标题类 否则会到达, CSS 中没有任何内容能从框架规则中分辨出浏览器默认值. 交易买断了更大的漏洞。 要么自己在岛上 要么自己去.

一个岛根 实值 (单位:千美元) <th>页:1 <caption> 或一个 <button> 不受影响:这些除外,以及浏览器粗体或斜体的元素,因此 <em class="ds"> 保持斜体和一个 <th class="ds"> 保持大胆和集中.

香草有黑暗的表面 桥看不到. 该桥阅读了两个自定义属性 Vanilla 自己的主题集,涵盖了 .is-light, (中文(简体) ), .is-dark, (中文(简体) ), .is-paper,四个主题条,工具提示和品牌芯片. 表面是黑暗的,而不设定它们 是不可见的: .p-strip--suru 在橙色梯度上画出白文本,以及状态标签和 .p-label 家庭在彩色填充上涂上白色. 在其中的一个计算中,有一个平板元件 light 在黑暗的地上写出黑暗的文字。 打开 is-dark 在集装箱上,或者在岛上.

香草的根字型大小比起1681像素达到岛上. Pragma与它一致地缩放,所以这与只用pragma的页面不同,而不是缺陷. 这是有意的:一个没有用它周围的一页缩放的岛屿会看错.

revert 倒转演示属性. 内线SVG因此被排除在边界之外. 一个 <img width height> 在Pragma的领地内,会失去赋予它的那些属性的大小,所以像Pragma自己的组件那样,大小在CSS中替换了元素. Chromium的 1px 默认的表- 单元格粘贴是同一种提示并返回到零,这是在 a 上留下的一个差异 <th class="ds">。 。 。 .

六所继承的财产仍然跨越边界,这就是意图. direction 财务报告和审定财务报表 unicode-bidi 外边 all因此,香草的,因为 code, pre { direction: ltr } 仍然适用于普拉克马的领地。 这是无害的,右到左的一页无论如何都需要它的方向交叉,这就是岛根也没有宣布的原因. visibility, (中文(简体) ), pointer-events 财务报告和审定财务报表 cursor 独处是因为一个相关的原因:一个宿主隐藏一个容器,使其惰性或标记它忙着告诉岛上一些东西而不是造型.

list-style-type 是第六,它的原因就是它自己的。 一个岛根是一个列表项目属于主机列表,一个标记是列表的业务而不是项目的业务. 宿主内部没有正确的价值 <ol>,在标记是数字的地方,在一个香草里面 .p-list,它要求没有任何标记。 这么说 <li class="ds"> 显示列表显示的列表。 把岛放进去 而不是放在它上 如果你想Pragma决定.

单空间家族故意取出两个字体. 浏览器将空取 monospace 关键词默认大小较小, 以及两个失败的列表 。 名单是 ui-monospace, monospace 而不是说 monospace 两次,因为一个修饰器会倒塌一个重复的名字:闪电 CSS 翻转 monospace, monospace 输入 monospace 而所测量的大小从16px回到13px. 它留下两个不同的名字, Esbuild也一样。 如果你在岛上写自己的单空间规则,请写出两个家庭的名字.

根据减少动议, transition-property 计算 none 在岛上. 香草套装 animation: none 财务报告和审定财务报表 transition: none 与 !important 两者都单独存在 因为Pragma通过零取其运动符号来尊重同样的偏好 两人同意结果;只有他们得到的财产不同.

解决问题

每个标题都描述了一种症状。 锚是稳定的,因此可以从评论中链接到一个.

平板组件内部的输入有下边, 有全宽, 有切弗龙

香草进入了普拉克马的领地. 请检查access-date=中的日期值 (帮助) 顺序:命令语句是首个样式表的第一条规则,"香草"的规则在其中 @layer vanilla, (中文(简体) ), adapter.css 已装入,并且 boundary 块存在,元素在 .ds 树根.

在平板卡里面的一行是斜体,或者一段有香草的间隔

与上同因缘. 如果边界存在而漏出也持续存在,则规则是无层的,一个无层的规则会比起每一层. 找到它 在你自己的覆盖,移动它内部 @layer vanilla。 。 。 .

香草的标题、段落或页面字体取出 pragma 类型

@canonical/styles 被装入混合页面。 它的元素层样式为整个文档并坐到上面 vanilla装入 adapter.css 相反:它带来了 tokens.css, (中文(简体) ), layout.css 和封闭的复制品, 没有其它的普拉克马到达一个裸露的元素.

Pragma 组件在光页上变暗, 或者本地控制器变暗

根不见了 light. 普拉格马的根声明 color-scheme: light dark 并遵循操作系统,除非它被固定。 添加 light 改为 <html>。 。 。 .

暗条子里面的平板纸牌保持光线

要么该条没有设置"香草"模式属性,要么该卡不是最外层的平板根. 黑暗的部分必须是香草的,例如 is-dark 或者说 p-strip--dark,因为 .dark pragma 根上的类被设计忽略。 对于一个没有香草模式等级的区域,设置 color-scheme 从你的 app 层.

香草造型消失在Modal、卡片或另一个平板箱里

这就是它的工作范围。 普拉格马境内香草含量不支持. 先移动内容,或保留容器香草,直到你能.

A 中的平板组件 .row 或内出行表丢失其列或内出行位置

香草将集装箱的直系儿童与 > * 规则,边界还原 .ds 树根。 将组件包入纯元素 .

所有香草都不见了

<html> 携带 ds使整个文件成为了普拉克马岛 然后边界又恢复了里面的香草规则 删除它:该文件在"香草"一页(第4条)时从不是岛屿.

Pragma 组件在浏览器字体中渲染, 没有基线和打字

限制副本不适用。 浏览器位于 @scope 地面,每个区块全部投放,或 elements.css 没有装入. adapter.css 通过相对路径导入,所以一个复制的管道 adapter.css 独自离开它。 解析导入到一个文件中, 或者将软件包的文件保存在一起 .

两个字体下载, 或用半像素基线区分 pragma 和 Vanilla 文本

两个姓氏仍然申报. 跟着安装的第6步 香草的"Ubuntu可变"和普拉克玛的"Ubuntu Sans"是两个来源的同名类型面,因此,从一个文件集中宣布一个名字不会有什么变化,只是现在两个地块都共享了一套公分.

删除

这个包裹会留下直到香草消失,两人一起离开. 当没有香草类留在任何地方时,一个变化是:删除 @layer vanilla 块和香草依赖, 放弃此软件包, 移动 @canonical/styles 将两种进口改为:

@import url("@canonical/styles");

Pragma的元素层然后对整页进行样式化,就像它们在任何pragma页面上所做的那样. 再次检查,然后决定是否 light 留于根上. 没有中间状态,之后没有什么可记住的.

当 @layer vanilla 块已去掉, 此软件包已出货单, 页面与 @canonical/styles 代替这批货的两个进口.

如果你把这个包裹留在一个 不再有香草的页面上, 没有什么突破, 但有两件事会改变, 也不是这个包裹的承诺。 机身取出浏览器的8px边距和浏览器的字体,因为复制品只有在机身本身为平板根时才会取出机身的边距. 和桥,寻找 没有香草模式读取,写 light dark 每一个最外层的根, 所以组件都跟随操作系统 <html> 说和a .dark 词根上的类仍然被忽略。 两者都经过测量,固定装置记录下来,使任何偶然到达该状态的人都能认出来.