Sarathlal N

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.

Looking for a skilled WordPress/WooCommerce developer? I'm currently available for freelance, contract, or full-time remote opportunities! Let's create something amazing together. Send me a quick message, and I'll respond within 24 hours!

Recent Posts

  1. Automating Code Linting with GitHub Actions for WordPress Plugins
  2. Comprehensive Guide to Linting PHP, JavaScript, and CSS in WordPress Plugins Using Composer
  3. The Ultimate Guide to Indexing in Database Design
  4. Understanding 'update_meta_cache' in WordPress - When to Use It, When Not to, and Its Impact on Database Queries
  5. A Guide to Configuring JavaScript and SCSS Paths in WordPress Plugins with @wordpress/scripts

This article was published on

Your Questions / Comments

If you found this article interesting, found errors, or just want to discuss about it, please get in touch.