Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

What happens to vendor prefixes when they become standard?

Featured Replies

I just found time to post a late night question. In the transition from css2 to css3 we’ve seen a lot of vendor prefixes. And oh yes, we like gradients, shadows, round corners and all that good stuff. My question is: What happens to a vendor prefix when it becomes standard like many of them already have. Will the developers at Firefox keep supporting the -moz-prefixes and Chrome the –webkit- prefix and for how long?

I know it’s not recommended to use vendor prefixes for production. But it sure is very tempting to do so.



I dont know for sure but my guess is nothing will "happen". You should have the standard one in your CSS, so ones all browsers use that then the prexifed ones probably will be ignored or still applied, either way your site wont change because the standard one is still in there. We will certainly not be going back over all our old sites and removing prefixes, it will take too much time. I also disagree about not using them… they are required right now to make it work across all browsers, so I dont understand why people say not to use them.

 

Lea Verou's -prefix-free solution looks good to auto-add prefixes.

  • Author

My point exactly. I can't see the harm in having a few vendor pf's in the code as long as you have the standards as well. Maybe a lot of them will harm loadtime/performance?

They seem to ignore their own vendor prefixes once they adopt the standard just as they ignore the others that don't apply (i.e. webkit ignores moz. and eventually webkit) I noticed this when inspecting border-radius on chrome webkit was crossed out and border-radius was checked. All you can do is code for what is supported now. I do like Lea Verou's -prefix-free mentioned above.

This is why you should always put the prefix free/standardized version at the end of the declaration. e.g.

 -webkit-transform: rotate(7.5deg);  /* Chrome, Safari 3.1+ 
     -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15 
      -ms-transform: rotate(7.5deg);  /* IE 9 
       -o-transform: rotate(7.5deg);  /* Opera 10.50-12.00 
          transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera 12.50+ 

 

Because CSS is applied line by line and later lines will overwrite previous lines, writing it in the wrong order could lead to an outdated prefixed version of the property being used instead of the browsers latest, standards compliant version.

 

As for what actually happens to the prefixed property, they keep it in the browser for some time to allow a transition period but, eventually, they completely remove it. I once saw someone submitted a bug to the firefox bugzilla and continued to argue that browsers should retain all prefixes as 'legacy code'. Pretty funny stuff.

 

Found it: https://bugzilla.mozilla.org/show_bug.cgi?id=765645

As for what actually happens to the prefixed property, they keep it in

the browser for some time to allow a transition period but, eventually,

they completely remove it. I once saw someone submitted a bug to the

firefox bugzilla and continued to argue that browsers should retain all

prefixes as 'legacy code'. Pretty funny stuff.

That's great! Following that logic I should invoice ie for all the time I've spent fixing stuff.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.