Off-canvas / Settings Tray CSS refactored to use modern CSS

Off-canvas / Settings Tray CSS refactored to use modern CSS. Any CSS that is specifically targeting the off-canvas, will likely need to change. CSS targeting the off-canvas usually includes #drupal-off-canvas in the selector.

The off-canvas styles have a reset that should prevent front-end or administrative styles from “leaking” into the dialog. Within Drupal 8 and 9, the reset was implemented with a method that was compatible with Internet Explorer. Because of IE’s limitations, the reset was fairly brittle. This led to styles leaking in and various theme-specific overrides scattered throughout Drupal core, which, in turn led to various critical usability and accessibility issues.

The improved CSS reset directly leads into multiple major usability and accessibility problems getting addressed. For that reason, all of the off-canvas CSS has been removed from Stable and Stable 9 to ensure that as many themes as possible will be able to benefit from these improvements. As the CSS from Stable and Stable 9 were removed, the off-canvas CSS was also marked as internal. We will make an effort to retain backwards compatibility for the CSS custom properties, but some of the specific implementation details of the off-canvas CSS might still change in a future minor release.

The recommended action for making a theme or module compatible with this change depends on what the CSS in the module or theme tries to achieve. Some modules and themes have specifically had to work around the limitations of the off-canvas CSS reset. If that was the original intention of the CSS, the recommendation is to simply trying to remove the CSS. If the module or theme is designing a component not supported by the off-canvas CSS, the CSS will need to be updated. It is recommended to utilize the CSS custom properties provided by Drupal core implementation where possible. This makes the module or theme compatible with other themes and modules that are utilizing the CSS custom properties.

How to support Drupal 9 while supporting Drupal 10

We recognize that module and theme developers may want to have different sets of styles for versions 8-9, and 10+ of Drupal.

To target the Drupal 10+ version of off-canvas, use the following selector:

#drupal-off-canvas-wrapper {
}

This selector is new, and also includes the off-canvas title bar element as a descendent.

To target the Drupal 8-9 version of off-canvas, use the following selector:

#drupal-off-canvas:not(.drupal-off-canvas-reset) {
}

To target all versions, simply combine the selectors. Be sure to test thoroughly.

#drupal-off-canvas:not(.drupal-off-canvas-reset),
#drupal-off-canvas-wrapper {
}