Upgrading 7.x themes to 8.x

Last updated on
31 August 2016

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.