Is is still necessary to use vendor prefixes on css styles?

Question

I used to write a number of CSS styles with standard and with vendor prefixes. Example:

.three-col {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
      -webkit-column-gap: 1.5rem;
         -moz-column-gap: 1.5rem;
              column-gap: 1.5rem;
}

Is that still necessary and /or are there special use cases only. If there are special cases where would I find a list of these scenarios/cases?

Rather than try to document this here, I'd recommend caniuse which keeps updated stats on what browsers support what features and how many users use each browser. For example https://caniuse.com/mdn-css_properties_column-count says that 95% of visitors use browsers that don't need the prefix for that property and if you include the prefixes you will support another 1% of users. — Stephen Ostermiller, Mar 08 '23 at 18:57

score 2 · Accepted Answer · answered Mar 08 '23 at 18:22

Yes, it is still generally necessary to preface certain CSS styles with -webkit and -moz prefixes for browser compatibility. This is because different browsers may interpret certain CSS styles differently, and the prefixes help to ensure that your styles are displayed consistently across different browsers.

However, it is becoming less common to use vendor prefixes as newer versions of browsers are adopting standard CSS features, so it's important to keep up with the latest changes and best practices.

A good practice is to always test your CSS styles across multiple modern browsers to ensure compatibility.

Here are some of the special cases where you might need to use -webkit and -moz column prefixes for better browser compatibility:

For column gap, the prefix is required in Safari and Chrome (-webkit) and Firefox (-moz).
For column width and count, the prefix is required in older versions of Chrome (-webkit) and Firefox (-moz).
For column fill and rule, the prefix is required in Safari (-webkit).
For break-inside and break-before, the prefix is required in older versions of Chrome and Firefox (-webkit and -moz).
For column-span, the prefix is required in older versions of Firefox (-moz).
For column-rule-color, the prefix is required in older versions of Safari and Firefox (-webkit and -moz).
For column-rule-style and column-rule-width, the prefix is required in older versions of Safari (-webkit).
For column-break-after, the prefix is required in older versions of Firefox (-moz).
For column-fill, the prefix is required in older versions of Chrome (-webkit).

It is important to note that as browsers continue to update and evolve, some of these special cases may no longer require prefixes.

Is is still necessary to use vendor prefixes on css styles?

1 Answers1