Return to Answer

This solution does not rely on JavaScript being turned on.

@-moz-document url-prefix() { h1 { color: red; } }

<h1>This should be red in FF</h1>

It's based on yet another Mozilla-specific CSS extension. There's a whole list of these CSS extensions right here: Mozilla CSS Extensions. ⚠ Do note that they are mostly deprecated!

For more information about this specific CSS extension, see this question: What does @-moz-document url-prefix() do?

This solution does not rely on JavaScript being turned on.

@-moz-document url-prefix() { h1 { color: red; } }

<h1>This should be red in FF</h1>

This is based on a Mozilla-specific CSS extension. Like most of these, it is deprecated. However, this extension's deprecation has an exception specifically for browser detection. The Firefox note in @document § browser compatibility states that Firefox 61+ "only supports an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets."

For more information about this specific CSS extension, see What does @-moz-document url-prefix() do?

This solution does not rely on JavaScript being turned on.

@-moz-document url-prefix() { h1 { color: red; } }

<h1>This should be red in FF</h1>

It's based on yet another Mozilla specific CSS-extension. There's a whole list of these CSS extensions right here:

 Mozilla CSS Extensions. ⚠ Do note that they are mostly deprecated!

For more information about this specif CSS-extension, see this question: What does @-moz-document url-prefix() do?

This solution does not rely on JavaScript being turned on.

@-moz-document url-prefix() { h1 { color: red; } }

<h1>This should be red in FF</h1>

It's based on yet another Mozilla-specific CSS extension. There's a whole list of these CSS extensions right here:  Mozilla CSS Extensions. ⚠ Do note that they are mostly deprecated!

For more information about this specific CSS extension, see this question: What does @-moz-document url-prefix() do?

OK, I've found it. This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on.

@-moz-document url-prefix() { h1 { color: red; } }

<h1>This should be red in FF</h1>

It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here:  Mozilla CSS Extensions.

This solution does not rely on JavaScript being turned on.

@-moz-document url-prefix() { h1 { color: red; } }

<h1>This should be red in FF</h1>

It's based on yet another Mozilla specific CSS-extension. There's a whole list of these CSS extensions right here: 

Mozilla CSS Extensions. ⚠ Do note that they are mostly deprecated!

For more information about this specif CSS-extension, see this question: What does @-moz-document url-prefix() do?