DDEV is the official local development tool of Drupal. And like Drupal, DDEV depends on the support of the open source community.On this page
D7 to D8 Upgrade: Generated HTML
Last updated on
15 October 2016
Core CSS classes
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.
Help improve this page
Page status: No known problems
You can:
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion
