What's -moz-width and Can I Use It?

If you've encountered CSS warnings about -moz-width or other -moz- prefixed properties, you're looking at a remnant of Firefox's experimental CSS history. These Mozilla-specific properties were once essential for cutting-edge web features, but they've been deprecated and replaced with standard properties. This guide explains what these properties are, why they were deprecated, and how to update your code for modern browsers. For teams maintaining legacy codebases, our web development services can help audit and modernize your CSS architecture.

If you're responsible for maintaining older websites, understanding how to systematically update a website with modern best practices is essential for long-term maintainability.

Understanding CSS Vendor Prefixes

Vendor prefixes are browser-specific CSS properties that allow developers to use experimental features before they become standardized. The -moz- prefix specifically indicated Firefox (Mozilla) implementation of a CSS feature. These prefixes served two purposes: implementing non-standard browser-specific extensions and offering previews of features that were being considered for standardization.

The History of Vendor Prefixing

Vendor prefixing became widespread by 2006, with both Internet Explorer and Firefox implementing prefixed features. The W3C CSS Working Group issued guidance in 2012 clarifying that prefixes should only be used for vendor-specific extensions or experimental implementations.

By 2012, Mozilla began removing prefixed features such as -moz-border-radius and -moz-box-shadow from Firefox, dropping them once the standard version of each property was fully implemented.

Modern frontend development has evolved significantly since then, with tools like import SVGs in Next.js apps demonstrating how asset handling has improved in modern frameworks.

The -moz-width Property and Related Properties

The -moz-width property was part of Mozilla's early CSS extensions, designed to provide Firefox-specific styling capabilities that weren't yet available in the standard CSS specification. Similar prefixed properties included -moz-height, which served analogous purposes for element height specification.

Common Mozilla-Specific Properties

MDN documents that Mozilla extensions are "mostly experimental or deprecated but kept for backward compatibility." Common deprecated -moz- properties include:

• -moz-opacity → opacity
• -moz-border-radius → border-radius
• -moz-box-shadow → box-shadow
• -moz-transform → transform
• -moz-box-sizing → box-sizing (standard version preferred)

These properties were replaced because the W3C standardized the features, making vendor-specific implementations unnecessary.

Why Mozilla Deprecated These Properties

Mozilla deprecated -moz- prefixed properties for several interconnected reasons:

Standardization of CSS Features

As experimental CSS features matured and gained broader browser support, they were incorporated into official CSS specifications. When a feature becomes a standard, maintaining separate vendor-prefixed versions becomes redundant and counterproductive.

Cross-Browser Compatibility Issues

Vendor prefixes created significant challenges for developers who needed to write consistent CSS across multiple browsers. Developers often included every prefixed variant of a feature, making CSS harder to maintain and JavaScript programs more complex. Sites frequently used just the prefixed version, making it difficult for browsers to drop support.

The Role of Feature Flags

In 2013, Mozilla started making features available behind feature flags instead of using vendor prefixes. This approach allowed users to experiment with new features without affecting the broader web ecosystem.

Best Practices for Handling Legacy Vendor Prefixes

Current State of Vendor Prefixing

As of 2025, vendor prefixing has significantly declined. The number of features requiring prefixing has fallen by approximately 33% since 2013. Major browser vendors now prefer feature flags over prefixes for experimental features.

Recommended Approach for Modern Projects

For new projects:

• Use standard, unprefixed CSS properties whenever possible
• Only add vendor prefixes when specifically required for older browser targets
• Use Autoprefixer or similar tools to automate prefix management

For existing projects with legacy prefixed code:

• Plan systematic migration to unprefixed properties
• Prioritize properties that are most widely used and have solid standard support
• Test thoroughly after updates to ensure consistent rendering

Migration Strategy

1. Audit existing CSS: Identify all instances of -moz- prefixed properties
2. Check browser support: Use resources like Can I Use to verify standard property support
3. Update properties: Replace deprecated prefixes with their standard equivalents
4. Test across browsers: Verify rendering in target browser versions
5. Remove fallbacks: Once standard support is sufficient, remove any remaining prefixed versions

For teams working with modern frontend frameworks like Next.js, our web development services can help audit and modernize your CSS codebase for optimal performance and compatibility. If you're also exploring modern JavaScript APIs, our guide on how to indent CSS covers proper code formatting techniques that complement these migration efforts.

Sources

1. MDN Web Docs: Firefox vendor-prefixed CSS extensions
2. CSS-Tricks: Is Vendor Prefixing Dead?
3. Stack Overflow: What does -moz-transform deprecated mean?
4. Can I Use: CSS transform