Palette - Make it Colorful🎨
Palette - Visual Page Builder, no design degree required.
滚动
将类从 7.x 升级到 8.x
01/10/2025, by Ivan
Menu
- 理解 Drupal
- Drupal 系统要求
- 安装 Drupal 8
- 更新 Drupal 8
- Drupal 8 网站管理
- Drupal 8 模块
- Drupal 模块比较
- Drupal 主题
- Drupal 字段类型
- 配置管理
- Drupal 多站点
- 无障碍功能
- Drupal 8 समस्या निवारण
- 为 Drupal 创建模块
- Drupal 8 API
-
Drupal 8 主题化
- 使用 .info.yml 文件定义主题
- Drupal 8 主题文件夹结构
- 在主题中添加区域
- 在 Drupal 8 主题中添加样式表 (CSS) 和 JavaScript (JS)
- Drupal 8 中的 Twig
- 子主题
- 子主题：使用 Classy 作为基础主题
- Classy 主题的 CSS 选择器
- 在你的主题中包含默认的图片样式
- 包含模板的一部分
- 在模板中使用属性
- 预处理和在 .theme 文件中修改属性
- 在 Drupal 8 中使用断点 (breakpoints)
- 创建高级主题设置
- Drupal 6、7 和 8 之间的主题差异
- 将类从 7.x 升级到 8.x
- Subtheme Inheritance
- 为自定义主题创建自动化工具 (Gulpjs)
- Drupal Twig 转换指南（tpl.php 到 html.twig）
- Drupal 8 中的 Z-Index
- 升级到 Drupal 8
核心类的变化
简化后的辅助类名称 “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 主题）。