Body classes¶

The module's script reads navigator.userAgent in the visitor's browser and adds classes to <body> once it runs. Typical results:

Browser	Classes
Chrome on Windows	`chrome chrome140 win desktop`
Edge on Windows	`chrome chrome140 win desktop`
Firefox on macOS	`ff ff141 mac desktop`
Firefox on Linux	`ff ff141 linux desktop`
Safari on macOS	`safari safari18 mac desktop`
Safari on iPhone	`safari safari18 iphone mac mobile`
Chrome on iPhone	`chrome chrome140 iphone mac mobile`
Chrome on Android	`chrome chrome140 android linux mobile`
Internet Explorer 11	`ie ie11 win desktop`

Writing CSS¶

Combine the classes with your own selectors:

/* Every Safari version. */
body.safari .gallery {
  gap: 0;
}

/* Only Safari 17. */
body.safari17 .gallery {
  display: block;
}

/* Phones and tablets. */
body.mobile .main-menu {
  display: none;
}

Use feature queries (@supports) when you can, since they test what a browser actually does. The classes are for the cases a feature query cannot catch, such as a rendering bug in one browser version.

Class reference¶

Browser¶

A browser adds its name and, when the user agent includes a version, the name plus the major version.

Class	Versioned class	Matches
`chrome`	`chrome140`	Chrome, and browsers built on Chromium that keep `Chrome/` in their user agent: Edge, Opera, Brave, Vivaldi, Samsung Internet
`chrome`	`chrome140`	Chrome on iOS (`CriOS/`)
`safari`	`safari18`	Safari. Other iOS browsers that send `Safari` without `Version/` get `safari` only.
`ff`	`ff141`	Firefox on desktop and Android. Firefox on iOS reports as `safari`.
`ie`	`ie11`	Internet Explorer
`opera`	`opera12`	Opera 12 and older (Presto). Current Opera reports as `chrome`.
`operamini`	`operamini8`	Opera Mini
`netscape`	`netscape9`	Netscape
`konqueror`	`konqueror5`	Konqueror
`dillo`, `chimera`, `beonex`, `aweb`, `amaya`, `icab`, `lynx`, `galeon`	none	The browsers of the same names

Platform¶

Class	Matches user agents containing
`win`	`windows`
`mac`	`mac`, which includes iPhone, iPad and iPod user agents (`like Mac OS X`)
`iphone`	`iphone`
`ipad`	`ipad`
`ipod`	`ipod`
`android`	`android`
`linux`	`linux`, which includes Android user agents
`nokia`	`nokia`
`blackberry`	`blackberry`
`freebsd`, `openbsd`, `netbsd`	the same string

A device can get more than one platform class. An iPhone gets iphone mac, and an Android phone gets android linux. To target desktop macOS only, combine classes:

body.mac.desktop .toolbar { }

iPads running iPadOS 13 or newer send a desktop macOS user agent by default, so they get mac desktop.

Device¶

Every page gets exactly one of mobile or desktop. A visitor counts as mobile when the platform is ipad, ipod, iphone, android or blackberry, the browser is Opera Mini, or the user agent contains one of these strings: mobile, smartphone, symbian, midp, wap, kindle, pda, psp, treo, pocket, vodafone, o2, mmp, up.browser, up.link.

Things to know¶

The classes are added by JavaScript after the page loads. Visitors with JavaScript disabled get no classes, and styles that depend on them can apply a moment after the first paint.
Classes added by other modules through hook_browserclass_classes() are not added to <body>. They are available through the tokens and the PHP API only.
User agent strings can be changed by the visitor and by browser extensions. Treat the classes as a styling hint, not as a security or access check.