Skip to main content

CSS Prefix

CSS prefixes are short strings added before the actual CSS property, serving as a sort of "namespace" for the property. They are used to enable browser-specific features or to support experimental features not yet standardized by the W3C.

Common Prefixes​

  • -webkit-: For Chrome, Safari, newer versions of Opera, and almost all iOS browsers.
  • -moz-: For Firefox.
  • -o-: For older versions of Opera.
  • -ms-: For Internet Explorer and Microsoft Edge.

Examples​

  1. Using Prefixes for the border-radius Property

    .rounded-corners {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }

  2. Using Prefixes for CSS Transitions

    .transition {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }

  3. Using Prefixes for Flexbox

    .flex-container {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

Best Practices​

  • Standard Property Last: Always include the standard, unprefixed CSS property last so that browsers use the standard version if they support it.

    .example {
      -webkit-transform: rotate(30deg);
      -moz-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      transform: rotate(30deg);
    }

  • Use Tools: Utilize tools like Autoprefixer to automatically add prefixes to your CSS, ensuring you don't miss any and keep your code clean.

  • Check Support: Use websites like Can I use to check which CSS properties need prefixes for different browsers.

  • Progressive Enhancement: Use prefixes to implement progressive enhancement, providing fallbacks for older browsers while leveraging new features for those that support them.

  • Avoid Overuse: Only use prefixes for properties that actually require them. Unnecessary prefixes can bloat your CSS.

Understanding and effectively using CSS prefixes can help you write more robust and future-proof stylesheets, a skill that's particularly valuable when you're working on large-scale or complex projects.