detect Firefox browser by css

Any CSS at-rule that starts with @-moz- is a Gecko-engine-specific rule, not a standard rule. That is, it is a Mozilla-specific extension.

The url-prefix rule applies the contained style rules to any page whose URL starts with it. When used with no URL argument like @-moz-document url-prefix() it applies to ALL pages. That’s effectively a CSS hack used to only target Gecko (Mozilla Firefox). All other browsers will ignore the styles.

An @document rule can specify one or more matching functions. If any of the functions apply to a given URL, the rule will take effect on that URL. The functions available are:

url(), which matches an exact URL.
url-prefix(), which matches if the document URL starts with the value provided.
domain(), which matches if the document URL is on the domain provided (or a subdomain of it).
media-document(), with the parameter of video, image, plugin or all.
regexp(), which matches if the document URL is matched by the regular expression provided. The expression must match the entire URL.
The values provided to the url(), url-prefix(), domain(), and media-document() functions can be optionally enclosed by single or double quotes. The values provided to the regexp() function must be enclosed in quotes.

Syntax


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

 

Live example is here

 

Leave a Comment