Skip to content

Browser Class

Browser Class adds browser, platform and device classes to the <body> tag, for example chrome chrome140 win desktop. Themes can then target a specific browser, browser version, operating system, or mobile devices in plain CSS.

body.safari .site-header {
  backdrop-filter: none;
}

Features

  • Browser classes with the major version: chrome, chrome140, ff, ff141, safari, safari18, ie, ie11, and more. See the class reference.
  • Platform classes: win, mac, linux, android, iphone, ipad, and more.
  • A device class: mobile or desktop.
  • Detection runs in the browser, so the classes are correct on pages served from Drupal's page cache or a reverse proxy.
  • Tokens such as [browserclass:browser] for the same information on the server.
  • A hook for other modules to add their own classes.

The module has no settings page. Enable it and the classes appear on every page.

Requirements

Drupal 8, 9, 10 or 11. No contributed modules. The script depends on core/jquery, which Drupal loads for it.