Updating Classes from 7.x to 8.x
Changes to Core Classes
Simplified "element-x" Helper Class Names
Drupal 7 introduced several new classes: element-hidden, element-invisible, and element-focusable. It was difficult to understand exactly what these classes did based on their names, so the class names were changed. The new names should make it easier to understand their function and are more aligned with HTML 5 Boilerplate, a popular HTML 5 framework. Here's a conversion and usage table:
| Before (7.x) | After (8.x) | Note |
| element-hidden | hidden |
Hides both visually and from screen readers (e.g., an element that will later be populated with JavaScript or something hidden with JavaScript). |
| element-invisible | visually-hidden |
Visually hides the element but makes it available to screen readers (e.g., a menu heading). |
| element-focusable | visually-hidden focusable |
Allows keyboard navigation to a visually hidden element (e.g., skip to content links). The focusable class must be used together with visually-hidden. |
| invisible | This class is new in Drupal 8. It hides the element both visually and from screen readers, but still supports the visual layout. |
These classes are implemented in core/modules/system/css/system.module.css.
For more information, refer to:
Drupal’s online documentation is © 2000-2020 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License.