平台新闻：使用：焦点可见，BBC的新字体，声明性的影子DOMS，A11Y和占位符-css教程-PHP中文网

平台新闻：使用：焦点可见，BBC的新字体，声明性的影子DOMS，A11Y和占位符

从使用的细微差别：focus-dispible和输入占位符，到可访问的字体和一个野生动物园错误，本周的新闻中有很多可访问性，带有以下方式：display：contents。另外，一个用于支持样式封装的裸露Web组件的片段。

现在可能是开始使用的好时机：焦点可见

CSS：焦点可见的伪级替换：焦点是为键盘用户创建自定义焦点指标的新方法。 Chrome最近从以下方面切换到：在用户代理样式表中焦点可见，并且由于这种更改，当用户单击或点击按钮时，默认的焦点戒指不再显示。

从：焦点切换到：焦点可见度时，请考虑向后兼容。在所有浏览器中，您的键盘焦点指标都应清晰可见，而不仅仅是支持的键盘指标：可见焦点。如果您仅样式：焦点可见的，不支持的浏览器将显示默认的焦点环，根据您的设计，“可能根本不够清晰或可见”。

按钮 {
  背景：白色；
}

按钮：焦点可见{
  大纲：无；
  背景：＃ffdd00; /* 金子 */
}

登录后复制

开始使用的一种好方法：当今的焦点可见度是在A：焦点规则中定义焦点样式，然后立即在A：focus：not（：focus-cob-visible）规则中撤消相同的样式。诚然，这不是最优雅，最直观的模式，但在所有浏览器中都可以很好地工作：

不支持的浏览器：焦点可见的使用：焦点规则中定义的焦点样式并完全忽略了第二样式规则（因为：焦点可视化是他们未知的）。
在确实支持的浏览器中：焦点可见的，第二样式规则如果：焦点可见状态也不活跃，则恢复了：焦点规则中定义的焦点样式。换句话说，仅在以下情况下，焦点规则中定义的焦点样式在以下情况下才有效。

按钮：聚焦{
  大纲：无；
  背景：＃ffdd00; /* 金子 */
}

按钮：焦点：不（：focus-visible）{
  背景：白色； / *撤消黄金 */
}

登录后复制

英国广播公司创建了一个更容易访问的字体

英国广播公司（BBC）创建了自己的自定义字体称为Reith（以英国广播公司（BBC）的创始人约翰·雷斯爵士（John Reith）命名）。他们的目标是创建一种支持多种语言并且更易于阅读的字体，尤其是在小型设备上。该字体通过用户组（阅读障碍和视力障碍）和不同屏幕尺寸进行测试。

我们[BBC]正在使用Helvetica或Arial。我们还将吉尔·桑斯（Gill Sans）作为公司字体。这些字体是一百年前为印刷页面设计的，并且在当今的现代数字屏幕上表现不佳。

注意：如果您想在Wakamai火锅中检查Reith Sans和Reith Serif，则可以在BBC网站上Firefox的DOM Inspector中的“页面上所有字体”部分中快速访问Woff2文件的URL。

显示：在Safari中仍然无法使用内容

自2018年以来，CSS显示：内容值已在浏览器中支持。该值“不会生成任何盒子”，并有效地由其孩子代替。这在Flex和Grid布局中特别有用，其中内容值可用于“促进”更深入的嵌套元素以弯曲/网格项目，同时保留语义文档结构。

不幸的是，此功能最初是用实现错误运送的，该错误从浏览器的可访问性树中删除了元素。例如，应用显示：对

在Chrome和Firefox中，屏幕读取器通知用户“主要，导航”包含“列表，2个项目”。在Safari中，后一部分缺少，因为

元素不存在于可访问性树中。在Apple在Safari中修复此错误之前，请在使用语义元素上的内容值时小心，并在屏幕读取器中进行测试以确认您的页面也可以在Safari中访问。
覆盖占位符文本的颜色时设置不透明度

可访问性专家建议在可能的情况下避免占位持有人，因为他们可以将其混淆以在用户开始输入值时消失。但是，许多网站（包括Wikipedia和gov.uk）都使用占位符，以仅包含单个输入字段（例如搜索字段）的简单Web表单。

占位符可以通过广泛支持的::占位符伪元素进行样式。如果您的设计要求为占位符文本提供自定义颜色，请确保指定颜色和不透明度。后者是Firefox所需的，该Firefox默认情况下适用不透明度：0.54 to ::占位符。如果您不覆盖此值，则占位符文本可能没有足够的对比度。
```
 .search-field ::占位符{
  颜色：＃727272;
  不透明度：1; / * Firefox需要 */
}
```
登录后复制
声明性的影子DOM可以帮助普及样式封装

阴影dom的关键特征之一是样式封装，其中外页的样式规则与阴影树内的元素不匹配，反之亦然。为了使用此功能，您需要将阴影DOM树连接到元素（通常是自定义元素，例如），然后将元素的模板（通常从DOM中的

这些步骤只能在JavaScript中执行。如果您只对样式封装感兴趣，并且不需要任何动态功能，则是使用Shadow dom创建自定义元素所需的最小JavaScript量：
```
定义（定义）（
  “ my-lement”，
  类扩展htmlelement {
    constructor（）{
      极好的（）;

      //在DOM中查找<template>
      令template = document.getElementById（“ my-template”）;

      //制作模板内容的副本…
      令content = template.content.clonenode（true）;

      //…并将其注入<my-lement>的阴影dom
      this.attachshadow（{mode：“ open”}）。附录（content）;
    }
  }
）；</my-lement></template>
```
登录后复制
有关样式封装的示例，请参见Codepen上的Miriam Suzanne的元素。示波器样式位于HTML窗格中的元素中。请注意，此CSS代码如何使用简单的选择器（例如文章），这些选择仅匹配的Shadow dom中的元素。

在现代浏览器中，可能不再需要JavaScript来创建这种样式封装。本周早些时候，Chrome成为第一个运送Google声明性影子DOM提案的浏览器。如果成为标准，则此功能还可以将Shadow DOM与服务器端渲染结合使用。