滚动
将类从 7.x 升级到 8.x
核心类的变化
简化后的辅助类名称 “element-x”
Drupal 7 引入了几个新的类：element-hidden、element-invisible 和 element-focusable。仅从名称上很难准确理解这些类的作用，因此 类名被更改。新的名称应更易于理解，并且更符合流行的 HTML 5 环境 HTML 5 Boilerplate。下面是转换与使用的对照表：
| 之前 (7.x) | 之后 (8.x) | 说明 |
| element-hidden | hidden |
对视觉和屏幕阅读器都隐藏（例如，稍后将由 JavaScript 填充的元素，或者你打算用 JavaScript 隐藏的元素）。 |
| element-invisible | visually-hidden |
在视觉上隐藏，但对屏幕阅读器可见（例如菜单标题）。 |
| element-focusable | visually-hidden focusable |
允许使用键盘导航到视觉上隐藏的元素（例如：跳到内容的链接）。focusable 类必须与 visually-hidden 一起使用。 |
| invisible | 这是 Drupal 8 中的新类。它对视觉和屏幕阅读器都隐藏元素，但保留视觉布局。 |
这些类在 core/modules/system/css/system.module.css 中实现。
更多信息请参考：
- HTML 5 Boilerplate CSS 文档
- CSS 实战：仅对屏幕阅读器用户显示的隐藏内容
- 为了无障碍而隐藏内容
- Twig 最佳实践：预处理函数和模板（如果你正在处理 Drupal 7 主题）。