Make custom styles only for Mozilla Firefox
Some HTML elements & styles are look like broken in some Firefox versions. If you like to optimize your design for Mozilla Firefox, we can use a simple filter for Firefox only.
@-moz-document url-prefix() {
.inner-container {
padding: 4px 4px 2px 0;
}
}
Any CSS rule that starts with @-moz-
is a Gecko-engine-specific rule, not a standard rule. That is, it is a Mozilla-specific extension.
Another option is to use the domain() filter. For example @-moz-document domain(http://google.com) {...}
will apply the enclosed CSS rules only on the http://google.com
domain in Firefox.
The url-prefix rule applies the contained style rules to any page whose URL starts with it in Gecko (Mozilla Firefox). When used with no URL argument like @-moz-document url-prefix(),
it applies to ALL pages.
Recent Posts
- Automating Release Generation with GitHub Actions
- WP CLI Commands to Bulk Delete Entries in WordPress Database
- Split a Single CSV File into Multiple Files Using the Split Command - Bash
- Migrating code repo from BitBucket to GitHub
- Streamlining Development - Our Journey with Git, Bitbucket, and Jira
Your Questions / Comments
If you found this article interesting, found errors, or just want to discuss about it, please get in touch.