CSS vendor prefix

CSS vendor prefixes, an overview of automatic prefixes and why they are not highly relevant

The vendor prefix is a way for browsers to provide our CSS developers with access to new features that are not yet considered stable.

Before proceeding, please keep in mind that the popularity of this method is declining, and the use ofExperimental sign, Must be explicitly enabled in the user’s browser.

why? Because the developers did not consider vendor prefixes as a way to preview features, but delivered them in production-the CSS working group considered this to be harmful.

Usually because once the markup is added and developers start using it in production, the browser will be at a disadvantage if it realizes that certain changes must be made. Use a logo, unless you can push all visitors to enable the logo in their browsers, you won’t be able to publish features (just kidding, don’t try).

That said, let's see what the vendor prefix is.

I especially remember that they used CSS Transitions in the past. Instead of just usingtransitionAttribute, you must do the following:

.myClass {
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-ms-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}

Now you just need to use

.myClass {
	transition: all 1s linear;
}

Because all modern browsers now support this attribute well.

The prefix used is:

  • -webkit-(Chrome, Safari, iOS Safari / iOS WebView, Android)
  • -moz-(Firefox)
  • -ms-(Edge, Internet Explorer)
  • -o-(Opera, Opera Mini)

Since Opera and Edge are based on chromium,-o-with-ms-May become obsolete soon. But as we said, the vendor prefix as a whole is also obsolete.

It is difficult to write a prefix, mainly because of uncertainty. Do you actually need to add a prefix to an attribute? Some online resources are also outdated, which makes it more difficult to do things right. Projects like thisAuto prefixThe whole process can be automated without us having to find out if a prefix is needed, or the function is now stable and the prefix should be deleted. It uses data from caniuse.com, which is a good reference site for all aspects of browser support.

If you use React or Vue, it's similarcreate-react-appAnd Vue CLI, which are two common ways to start building applications,autoprefixerIt works out of the box, so you don’t even have to worry about it.

Download mine for freeCSS Manual


More CSS tutorials: