Drupal 7 介绍了一些新的类如: element-hidden, element-invisible and element-focusable. 从名字上比较难以理解他们的作用, 所以我们改了下名字. 新名字应该比较容易明白而且和 知名的html 5框架 Boilerplate 保持一致, 改变和使用方法如下:
注. 屏幕阅读器 - 是指盲人使用的设备!
| Before (7.x) | After (8.x) | Notes |
| element-hidden | hidden | 同时隐藏可见和屏幕阅读器 (例. -------- 或者你会用 JavaScript 隐藏的元素) |
| element-invisible | visually-hidden | 隐藏可见,但屏幕阅读器可见. (例. 一个菜单标题!). |
| element-focusable | visually-hidden focusable | 允许使用键盘操作,但是属于隐藏 (例. skip-to-content(跳过内容) links). focusable 类, 必须和 visually-hidden 一起使用. |
| invisible | 这个类是新添加到 Drupal 8 中的. 此类同时隐藏可见和屏幕阅读器,但是始终保持布局可见. |
这些类被应用到了 core/modules/system/css/system.module.css.
未来更多消息,请使用 the HTML 5 Boilerplate CSS documentation，CSS in Action: Invisible Content Just for Screen Reader Users，和 Hiding Content for Accessibility.
以下是英文原文，可参照阅读：
Last updated November 27, 2013. Created on June 19, 2013. Edited by joelpittet, mparker17, mgifford. You can edit this page, too.
Changes to core classes
Simplified names of "element-x" helper classes
Drupal 7 introduced some new classes: element-hidden, element-invisible and element-focusable. It was difficult to understand exactly what these classes did from their names, so the class names were changed. The new names should make the classes easier to understand and are more consistent with HTML 5 Boilerplate, a popular HTML 5 framework. Here is a conversion and usage table:
| Before (7.x) | After (8.x) | Notes |
|---|---|---|
| element-hidden | hidden | Hide both visually and from screenreaders (e.g.: an element that will be populated later with JavaScript or an element you will hide with JavaScript). |
| element-invisible | visually-hidden | Hide visually, but available for screenreaders (e.g.: a menu title). |
| element-focusable | visually-hidden focusable | Allows a visually-hidden element to be navigated to using the keyboard (e.g.: skip-to-content links). The focusable class must be used with visually-hidden. |
| invisible | This class is new in Drupal 8. It hides the element both visually and from screenreaders, but maintains the visual layout. |
These classes are implemented in core/modules/system/css/system.module.css.
For further information, please refer the HTML 5 Boilerplate CSS documentation, CSS in Action: Invisible Content Just for Screen Reader Users, and Hiding Content for Accessibility.