safari browser prefix css

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Vendor Prefix

Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with new ideas. This, in theory, helped to prevent their experiments from being relied upon and then breaking web developers' code during the standardization process.

Web developers included prefixed features on production websites, despite their experimental nature. This made it more difficult for browser vendors to ensure compatibility while working on new features. Including prefixed features also harmed smaller browser vendors who ended up having to add other browsers' prefixes in order to render popular websites.

Now, experimental features in browsers are "put behind a flag". This allows developers to change browser configurations to test upcoming features. Browsers now add experimental features behind user-controlled flags or preferences. Flags can be added for smaller specifications enabling reaching a stable state much more quickly.

CSS prefixes

The most common browser CSS prefixes you will see in older code bases include:

• -webkit- (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers including Firefox for iOS; basically, any WebKit or Chromium-based browser)
• -moz- (Firefox)
• -o- (old pre-WebKit versions of Opera)
• -ms- (Internet Explorer and Microsoft Edge, before Chromium)

Sample usage:

If you encounter the above code in a code base, you can safely remove all but the last line. All browsers support transitions without vendor prefixes:

API prefixes

Historically, browser vendors have also used prefixes for experimental APIs. If an entire interface was experimental, then the interface's name was prefixed (but not the properties or methods within). If an experimental property or method was added to a standardized interface, then the individual method or property was prefixed.

Interface prefixes

Prefixes for interface names are upper-cased:

• WebKit (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers (including Firefox for iOS); basically, any WebKit and Chromium-based browser)
• Moz (Firefox)
• O (Older, pre-WebKit, versions of Opera)
• MS (Internet Explorer and Microsoft Edge, before Chromium)

Property and method prefixes

The prefixes for properties and methods are lower-case:

• webkit (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers (including Firefox for iOS); basically, any WebKit and Chromium-based browser)
• moz (Firefox)
• o (Old, pre-WebKit, versions of Opera)
• ms (Internet Explorer and Microsoft Edge, before Chromium)

If you encounter the above code in a code base, you can safely remove all but the first line. All browsers support requestAnimationFrame without vendor prefixes, and without window :

• -moz- vendor-prefixed CSS extensions
• -webkit- vendor-prefixed CSS extensions
• Browser prefixes on Wikipedia

CSS Reference

Css properties, css browser support reference, css reference with browser support.

The table below lists all CSS properties and how each property is supported in the different browsers:

The number to the right of the browser icon indicates in which browser version the property was first supported.

Icon Explanations

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

DEV Community

Posted on Sep 4, 2023

CSS Vendor Prefixes

CSS vendor prefixes, also sometimes known as CSS browser prefixes is an important CSS property that plays a huge role in ensuring cross-browser compatibility and providing greater control over CSS properties. In this comprehensive guide, we'll be answering critical questions on vendor prefixes such as which prefixes are correct, their purpose, whether you should use them and the advantages they offer. Additionally, we'll provide practical code snippets to illustrate their usage.

Which Are Correct Vendor Prefixes?

Before we dive into the details of vendor prefixes, let's establish what they are and which ones are considered correct in the web development community. Vendor prefixes are short codes added to CSS properties to implement experimental or non-standard features in web browsers. These prefixes are vendor-specific and were primarily used to support emerging CSS features before they became widely accepted standards.

Common Vendor Prefixes:

• -webkit- : Used for properties in WebKit-based browsers like Safari and older versions of Chrome.
• -moz- : Employed for properties in Mozilla Firefox.
• -ms- : Applied to properties in Internet Explorer.
• -o- : Used for properties in Opera.
• -webkit- , -moz- , -ms- , and -o- prefixes are most commonly used, but it's essential to check compatibility with your target browsers before implementing them.

What Are Vendor Prefixes Used For and Why?

Vendor prefixes serve a crucial purpose in web development. They allow developers to gradually introduce and test new CSS features across different browsers without waiting for them to become standardized. Here's why they are used:

Cross-Browser Compatibility : Different web browsers interpret CSS properties differently. Vendor prefixes help ensure that your styles work consistently across various browsers.

Support for Experimental Features : Vendor prefixes enable developers to utilize experimental CSS features that may not be part of the official CSS specifications yet. This promotes innovation in web design and functionality.

Progressive Enhancement : They facilitate the principle of progressive enhancement, allowing you to provide a basic style for all browsers while enhancing the experience for those supporting specific features.

Should I Use Vendor Prefixes?

The decision to use vendor prefixes depends on your project's requirements and your target audience. While vendor prefixes can be incredibly useful, there are some considerations to keep in mind before implementing them.

Considerations for Using Vendor Prefixes:

Browser Support : Check whether your target browsers still require vendor prefixes for the specific CSS property you want to use. In recent years, browser support for prefixed properties has improved, reducing the need for extensive prefixing.

Maintenance : Using vendor prefixes can increase the maintenance burden of your code. As browsers evolve and standardize features, you may need to update or remove prefixes.

Fallbacks : Always provide a non-prefixed version of your CSS property as a fallback. This ensures that even if a browser doesn't require a prefix, it can still render your styles correctly.

Consideration for Legacy Browsers : If your project must support older browsers, you may need to use vendor prefixes more extensively to ensure compatibility.

Why Use Vendor Prefixes?

Now that we've explored the considerations for using vendor prefixes let's delve into why they remain a valuable tool for web developers today.

1. Gradual Adoption of New Features : Vendor prefixes allow developers to adopt new CSS features gradually. You can implement cutting-edge styles and functionalities without worrying about breaking compatibility with older browsers.

2. Testing and Experimentation : They provide a safe space for testing and experimentation. By using vendor prefixes, you can assess the viability of a particular CSS property or feature in your project without committing to a non-standardized solution.

3. Enhanced Control : Vendor prefixes offer greater control over how your styles are interpreted by different browsers. This can be particularly useful when you want to fine-tune the appearance of your website or web application.

4. Legacy Browser Support : If your project must accommodate users on older browsers, vendor prefixes become essential. These prefixes ensure that even outdated browsers can render your styles correctly.

Using Vendor Prefixes Effectively

Now that you understand the significance of vendor prefixes let's explore how to use them effectively in your CSS code. We'll present practical code snippets for different scenarios.

Scenario 1: Border Radius

Suppose you want to create rounded corners for an element. You can achieve this using the border-radius property with vendor prefixes for compatibility.

In this example, we include the standard border-radius property alongside the -webkit- and -moz- prefixes for WebKit and Mozilla browsers, respectively. This ensures that rounded corners display correctly across various platforms.

Scenario 2: CSS Transitions

CSS transitions are used to smoothly animate property changes. Here's how you can apply vendor prefixes to create a transition effect:

By including -webkit- and -moz- prefixes in addition to the standard transition property, you guarantee smooth transitions in WebKit-based and Mozilla Firefox browsers.

Scenario 3: CSS Transformations

CSS transformations are employed for rotating, scaling, and translating elements. Here's an example with vendor prefixes:

Including -webkit- and -moz- prefixes alongside the standard transform property ensures that your transformations work seamlessly in WebKit and Mozilla browsers.

Best Practices for Using Vendor Prefixes

While vendor prefixes are essential for compatibility, it's crucial to follow best practices to maintain clean and manageable CSS code:

Use the Unprefixed Property Whenever Possible : Always include the standard, unprefixed property alongside the prefixed versions. Browsers that support the standard will use it, reducing redundancy in your code.

Regularly Update Vendor Prefixes : Stay up to date with browser developments. As browsers evolve and support for prefixed properties changes, review and adjust your code accordingly.

Keep Vendor-Prefixed Rules Together : Group vendor-prefixed properties together in your CSS to enhance code readability. This makes it easier to identify and manage vendor-specific declarations.

Consider Automation : Explore tools and preprocessors that can automatically generate vendor prefixes for your CSS, reducing the manual effort required.

The Future of Vendor Prefixes

As web standards evolve, the reliance on vendor prefixes has decreased. Browser vendors are increasingly aligning with standardized CSS properties, reducing the need for extensive prefixing. However, vendor prefixes remain valuable for addressing specific compatibility issues and supporting legacy browsers.

In conclusion, vendor prefixes are a powerful tool for web developers, enabling cross-browser compatibility and the gradual adoption of new CSS features. When used judiciously and in line with best practices, they can enhance the user experience and ensure that your web projects perform consistently across various platforms.

Connect with me on twitter

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Updating to Angular Material 18: Keeping Support for Material 2 and Adding Support for Material 3

Dharmen Shah - May 25

Spring boot JWT authentication (auth0) with Swagger docs (springdoc)

Abir Ganguly - May 29

Exploring Next.js 15: A Developer's Delight

Qasem Nik - May 25

React with Tailwind CSS Skeleton Loader Example

Aaronn - May 28

We're a place where coders share, stay up-to-date and grow their careers.

Member-only story

CSS Fundamentals: Vendor Prefixing

Timothy Robards

CSS Vendor prefixes (or browser prefixes) are a way for browsers to give access to new CSS features not yet considered stable.

By using prefixes, we can use these newer CSS features with the browsers that support them — instead of waiting for all browsers to catch up.

🤓 Want to stay up to date with web dev? 🚀 Want the latest news delivered right to your inbox? 🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page

For example, before CSS Transitions were fully supported, you’d have added the prefixes, like so:

The prefixes used are:

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

Writing prefixes has traditionally been a hassle. So projects like Autoprefixer came along to automate the process, by adding any required prefixes automatically. This tool generates prefixes based on the information provided from canIuse .

Many modern frameworks (e.g. create-react-app, the Vue cli & postcss) use autoprefixer out of the box, so remembering to add prefixes has become a thing of the past!

Is prefixing still necessary?

Prefixing is a rapidly declining issue.

Browsers are getting better at supporting new features. And now, the rise of experimental CSS is encouraging client-side testing of new features (via local browser settings), instead of on production websites.

If you’re working without build tools on a project that needs to function on older browsers — it’s worth running your CSS through autoprefixer. Check out the handy online tool: https://autoprefixer.github.io/ . Otherwise, you can rest assured that your CSS will be supported!

Are you ready to turn your dev skills into a freelance business? Whether you’re completely new to freelancing or are looking to level up your existing skills. I’ll teach you everything you need to know to become a successful freelancer!

Get started today with my Complete Guide to Freelancing .

The Complete Guide to Freelancing

Want to be your own boss start today learn everything you need to know to build a successful freelancing business from the ground up ….

easeout.gumroad.com/l/freelance

A little about me..

Hey, I’m Tim! 👋 I’m a freelance business owner, web developer & author.

I teach both new and experienced freelancers how to build a sustainable and successful freelancing business . If you’d like to read more of my articles, check them out on my blog .

Thanks for reading 🎉

Written by Timothy Robards

Freelancer, developer & author. Creator of 👉 https://easeout.co

More from Timothy Robards and ITNEXT

The Digital Workshop

The 15 Best Front End Development Tools [2024]

The world of web development is constantly evolving, and staying up-to-date with the latest tools is essential for front-end developers. in….

Daily bit(e) of C++ | Optimizing code to run 87x faster

Daily bit(e) of c++ #474, optimizing c++ code to run 87x faster for the one billion row challenge (1brc)..

Gulcan Topcu

Upgrading Hundreds of Kubernetes Clusters

Automating the upgrade process for hundreds of kubernetes clusters is a formidable task, but it’s one that pierre mavro, the co-founder and….

Structuring your Sass Projects

Let’s take a look at how we can structure our sass projects. as projects grow and expand, the need to modularize our directory and file…, recommended from medium.

Bryan Aguilar

React Design Patterns

Learn how to apply design patterns in your react applications..

Amit Mishra

45 JavaScript Super Hacks Every Developer Should Know

Javascript is a versatile and powerful language that is essential for modern web development. here are super hacks that will make you a….

General Coding Knowledge

Coding & Development

ChatGPT prompts

AI Regulation

Advance CSS for Designers

Deepak Chaudhari

Advanced JavaScript Concepts: 2024

Description: uncover the intricacies of advanced javascript concepts, from nested function scopes and closures to currying, ‘this’ keyword….

Ronak Patel

Nerd For Tech

Best 5 Micro Front-end Frameworks Every Developer Should Know

In today’s dynamic landscape of web development, the demand for scalable, agile and maintainable solutions has never been more pressing. as….

Selcuk Ozdemir

5 Cool Chrome DevTools Features Most Developers Don’t Know About

Chrome devtools is an essential and powerful tool for web developers. you can use it to view network requests, analyze web page….

Text to speech

Autoprefixer CSS online

Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes

You can also see which browsers you choose by filter string on browsersl.ist

Autoprefixer online — web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use . It is recommended by Google and used by Twitter and Taobao.

How does it work

The Autoprefixer uses data on the popularity of browsers and support for vendor prefixes by browsers. Based on this information, it arranges and deletes the prefixes. It can help you get prefixes for: animations, transition, transform, grid, flex, flexbox and others.

Browser filter

You can configure which browsers to generate prefixes for in the distribution. More details on the syntax are in the documentation . There is also a block in the FAQ .

The IE grid layout polyfill is enabled, which is not by default in autoprefixer.

To Andrey Sitnik , author of PostCSS , Autoprefixer , browserslist and other awesome tools.

CSS Vendor Prefixes

What are they and why you should use them

• PHP Programming
• Java Programming
• Javascript Programming
• Delphi Programming
• C & C++ Programming
• Ruby Programming
• Visual Basic

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

• University of California
• University of Washington

• Saint Mary-of-the-Woods College

CSS vendor prefixes, also sometimes known as or CSS browser prefixes, are a way for browser makers to add support for new CSS features  before those features are fully supported in all browsers. This may be done during a sort of testing and experimentation period where the browser manufacturer is determining exactly how these new CSS features will be implemented. These prefixes became very popular with the rise of CSS3 a few years ago. 

Origins of Vendor Prefixes

When CCS3 was first being introduced, a number of excited properties began to hit different browsers at different times. For example, the Webkit-powered browsers (Safari and Chrome) were the first ones to introduce some of the animation-style properties like transform and transition. By using vendor-prefixed properties , web designers were able to use those new features in their work and have them seen on the browsers that supported them right away, instead of having to wait for every other browser manufacturer to catch up!

Common Prefixes

So from the perspective of a front-end web developer, browser prefixes are used to add new CSS features onto a site while having comfort knowing that the browsers will support those styles. This can be especially helpful when different browser manufacturers implement properties in slightly different ways or with a different syntax.

The CSS browser prefixes that you can use (each of which is specific to a different browser) are:

• Android: -webkit-
• Chrome: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-
• iOS: -webkit-
• Safari: -webkit-

Adding a Prefix

In most cases, to use a brand new CSS style property, you take the standard CSS property and add the prefix for each browser. The prefixed versions would always come first (in any order you prefer) while the normal CSS property will come last. For example, if you want to add a CSS3 transition to your document, you would use the transition property as shown below:

Remember, some browsers have a different syntax for certain properties than others do, so don’t assume that the browser-prefixed version of a property is exactly the same as the standard property. For example, to create a CSS gradient, you use the linear-gradient property. Firefox, Opera, and modern versions of Chrome and Safari use that property with the appropriate prefix while early versions of Chrome and Safari use the prefixed property -webkit-gradient.

Also, Firefox uses different values than the standard ones.

The reason that you always end your declaration with the normal, non-prefixed version of the CSS property is so that when a browser does support the rule, it will use that one. Remember how CSS is read. The later rules take precedence over earlier ones if the specificity is the same, so a browser would read the vendor version of a rule and use that if it does not support the normal one, but once it does, it will override the vendor version with the actual CSS rule.

Vendor Prefixes Are Not a Hack

When vendor prefixes were first introduced, many web professionals wondered if they were a hack or a shift back to the dark days of forking a website's code to support different browsers (remember that " This site is best viewed in IE " message). CSS vendors prefixes are not hacks, however, and you should have no reservations about using them in your work.

A CSS hack exploits flaws in the implementation of another element or property in order to get another property to work correctly. For example, the box model hack exploited flaws in the parsing of the voice-family or in how browsers parse backslashes \. But these hacks were used to fix the problem of the difference between how Internet Explorer 5.5 handled the box model and how Netscape interpreted it, and have nothing to do with the voice family style. Thankfully these two outdated browsers are ones we do not have to concern ourselves with these days.

A vendor prefix isn’t a hack because it allows the specification to set up rules for how a property might be implemented, while at the same time allowing browser makers to implement a property in a different way without breaking everything else. Furthermore, these prefixes are working with CSS properties that will eventually be a part of the specification . We are simply adding some code in order to get access to the property early. This is another reason why you end the CSS rule with the normal, non-prefixed property. That way you can drop the prefixed versions once full browser support is achieved. 

Want to know what the browser support for a certain feature is? The website CanIUse.com is a wonderful resource for gathering this information and letting you know which browsers, and which versions of those browsers, currently support a feature.

Vendor Prefixes Are Annoying but Temporary

Yes, it might feel annoying and repetitive to have to write the properties 2-5 times to get it to work in all browsers, but it’s a temporary situation. For example, just a few years ago, to set a rounded corner on a box you had to write:

But now that browsers have come to fully support this feature, you really only need the standardized version:

Chrome has supported the CSS3 property since version 5.0, Firefox added it in version 4.0, Safari added it in 5.0, Opera in 10.5, iOS in 4.0, and Android in 2.1. Even Internet Explorer 9 supports it without a prefix (and IE 8 and lower didn’t support it with or without prefixes).

Remember that browsers are always going to be changing and creative approaches to supporting older browsers will be required unless you’re planning on building web pages that are years behind the most modern methods. In the end, writing browser prefixes is much easier than finding and exploiting errors that will most likely be fixed in a future version, requiring that you find another error to exploit and so on.

• What Is CSS and Where Is It Used?
• How to Stretch a Background Image to Fit a Web Page
• Make Web Page Elements Fade In and Out With CSS3
• How to Use CSS Columns for Multi-Column Website Layouts
• The Difference Between CSS2 and CSS3
• How to Create Linear Gradients in CSS3
• Using the DOCTYPE Element in Quirks Mode
• Learn How to Add Glow Effects Quickly and Easily With CSS3
• Creating Scrollable Content in HTML5 and CSS3 Without MARQUEE
• How to Use CSS to Center Images and Other HTML Objects
• Tips for Creating a Background Watermark on a Web Page
• How to Style IFrames With CSS
• Styling the HR (Horizontal Rule) Tag
• How to Use CSS to Zero Out Your Margins and Borders
• How to Add Responsive Background Images to a Website
• How Many Cookies Can You Use on One Website?

Is Vendor Prefixing Dead?

Let‘s take a quick stroll down memory-lane to revisit how vendor prefixing CSS properties came to be. I hope I don’t trigger PTSD for anyone!

It‘s not clear who started prefixing, or when it began exactly. What is clear, is that by 2006, prefixed features were in Internet Explorer and Firefox. The raison d’être of prefixes was to specify browser-specific features. It was seen as a way to implement non-standard features and offer previews of new standard features.

By 2012, the W3C CSS Working Group was issuing guidance on the use of vendor prefixes :

In CSS we use vendor prefixes for properties, values, @-rules that are: – vendor specific extensions (per CSS 2.1), or – experimental implementations (per CSS Snapshot 2010) (e.g. in Working Drafts)

It became an industry norm. The number of prefixes grew, and with it, things grew confusing. It led to partial implementations of CSS features, introduced bugs, and ultimately created a fracture in the browser ecosystem, which disgruntled developers. Developers responded by making tools to automate the problem away.

Browser vendors slowly began to move away from prefixing, favoring feature flags inside the browser settings instead. It appeared that the problems created by vendor prefixes would fade away in time. The question is: has that time come yet?

I did some analysis on the caniuse dataset and Mozilla Developer Network Compat dataset to answer this question.

Adoption trends

You can see the trend of the implementation of prefixed features across the major browsers in the chart above. I have excluded Chrome for Android because of insufficient data.

From 2007 until 2011, there was a steady increase in the numbers of prefixed features in all browsers. Internet Explorer only saw an uptick in 2011. Then, in 2012, Mozilla began to remove prefixed features — such as -moz-border-radius* and -moz-box-shadow  — from Firefox. Thereafter, they consistently removed prefixed properties once the standard version of that property was fully implemented.

In 2013, Mozilla started to make features available behind feature flags (pref flags) . That same year, Chrome switched its rendering engine from WebKit to Blink (part of the Chromium project). This was a big turning point in removing some prefixed features.

It was only in April 2016 that WebKit announced that it would no longer release experimental features with prefixes :

Over time this strategy has turned out not to work so well. Many websites came to depend on prefixed properties. They often used every prefixed variant of a feature, which makes CSS less maintainable and JavaScript programs trickier to write. Sites frequently used just the prefixed version of a feature, which made it hard for browsers to drop support for the prefixed variant when adding support for the unprefixed, standard version. Ultimately, browsers felt pressured by compatibility concerns to implement each other’s prefixes.

Because Safari and iOS browsers have always used the WebKit rendering engine, a consistent reduction in the number of prefixes came later to these browsers.

Microsoft was never “gung ho” on prefixing and consistently had the fewest prefixed features. In 2019, Edge switched from its own rendering engine to Blink. In a funny twist, the change actually increased the number of prefixed properties in Edge!

Feature trends

The table below contrasts the prefixed features in 2013 (the zenith of prefixing) with 2021.

It may be surprising to see the raw numbers. The number of features that require prefixing fell by ~33% between 2013 and 2021 . That number sounds quite modest to me.

Of course, it could be misleading to focus just on numbers. The impact varies. It could be a family of properties that all require prefixing, such as animation ; or it could be a feature that only has one property or value that requires a prefix, such as user-select: none . Let’s explore the actual features to understand the circumstances better, beginning by looking at what changed in that intervening period.

Twenty features were unprefixed (fully implemented across the major browsers) and three prefixed features were introduced ( backdrop-filter , CSS text-orientation , and CSS initial-letter ).

In my opinion, the most notable features that are unprefixed now, which were significant pain points are:

• CSS Flexible Box Layout Module
• CSS3 Box Sizing
• CSS Animation
• CSS3 2D Transforms
• CSS3 3D Transforms
• CSS Filter Effects

The other 14 features are less prominent:

• ::placeholder
• ::selection
• :focus-visible
• :read-write
• font-feature-settings
• text-align-last
• writing-mode
• CSS grab and grabbing cursors
• CSS Logical Properties (will be used a lot more in the future, now that support is better)
• CSS3 zoom-in and zoom-out cursors
• CSS3 Multiple Column Layout

If you choose not to support Internet Explorer 11 in 2021, then an additional seven features no longer require prefixing. That reduces the number of features that require prefixing in 2021 to 28, which is a 46% reduction since 2013.

Prefixing in 2021

Let‘s look at the properties that require prefixing. It’s a motley group!

After putting this list together, my initial impression was that these aren’t things that I would bump into very often. Some properties have not been — and probably will not be — fully implemented. I’d say the element() function and CSS Canvas Drawings fall into that category. Safari recently dropped prefixing for position: sticky , so that will likely drop off the list very soon.

You can winnow the list down and steer away from certain situations if you want to. You can dismiss it and say it’s not important, so why bother? The reality is that the list is still long enough that manually managing prefixes in your code is not something you want to take on. A pertinent question to answer is: do you want to improve cross-browser support to a high level? If the answer is yes, then you should consider this as part of your development effort.

It is also important to remember that it is not just about these properties and current browsers. There are still people out there using older devices with older browsers, which do not support the unprefixed versions of some features. Take the animation property, for example. Chrome was the last browser to unprefix it in 2015. Yet, today, 1.3% of the users worldwide are still using a browser that does not support the unprefixed version.

I have bumped into a couple of situations recently that required prefixed properties. For example, I was making a reading progress bar for a blog and needed to use -webkit-appearance: none; and -moz-appearance: none; to reset the default styling for the progress element. It also needed sticky positioning, so I had to prefix position: sticky to support sticky positioning in Safari.

Another example? I wanted to use a PNG image as a mask image for a Christmas-themed design and found that -webkit-mask-image is the only property that works properly. Masking is generally a bit erratic because most browsers only partially support the spec.

Here’s yet another: Flavio Copes, in “How to apply padding to multiple lines in CSS,” wrote about how he wanted to have the same padding on each line of a multi-line heading. The solution was to use box-decoration-break: clone . Most browsers require the -webkit prefixed version of this property, so you need to use this.

Some of the tools that were created to solve issues with prefixing and browser support have fallen by the wayside. I would recommend checking first to see if a tool is up-to-date before using it.

Certainly, Autoprefixer (a PostCSS plugin) is maintained and it uses data straight from caniuse to stay current.

Emmet also has great prefixing capabilities. Specifically, it has a css.autoInsertVendorPrefixes preference to automatically insert prefixes for you. I haven’t verified if it is current or not, but it is worth considering as part of your development environment.

Since most code editors support Emmet, it makes editing prefixed properties a lot easier. Emmet has a CSS reflect value command that updates the value of all prefixed versions of the same property in a rule. You can read the Emmet docs for more info about the prefixing capabilities.

Vendor prefixing is not dead, unfortunately. We are still living with the legacy. At the same time, we can be grateful that prefixed features are on a steady decline. Some good work has been done by browser vendors to implement unprefixed features in lieu of prefixed features. This has removed the brunt of the burden from developers.

However, you may bump into scenarios that require prefixes still from time to time. And if you want to support as many browsers as possible, you should continue with an auto-prefixing strategy.

We should have never been using vendor prefixes for W3 specifications in the first place, it should have been something more like -d1-* where d1 stands for draft 1 and the browser has met the draft 1 spec. Then only when the browser is deviating does a vendor prefix make sense.

text-orientation and font-kerning no longer need the prefix: – https://github.com/Fyrd/caniuse/pull/5887 – https://github.com/Fyrd/caniuse/pull/5888 :)

Nice one! Good to see Safari getting around to this

https://preset-env.cssdb.org/ is a great tool to use for the few vendor prefixes that are still needed. And also polyfills super new modern CSS that is not yet supported completely.

Thanks for sharing Sean. It looks like a convenient all-in-one solution. I wasn’t aware that it covered prefixes too. It looks like it uses Autoprefixer under the hood . I will check it out for a future project.

Back to Week 6 page »

CSS3 Compatibility & Vendor Prefixes

As you may have already figured out, CSS (and HTML and JavaScript) is a moving target and new features and specifications are constantly being introduced and refined. This process usually involves a lot of give and take with the web development community, standards organizations (like W3C), and browser developers.

Newer properties often exist for some time before they can be reliably used on production sites. This happens for various reasons:

• Different browsers implement support at different times
• Browsers might support some parts of a spec before others
• Browser developers might have different interpretations of a spec
• Some specs begin as new features implemented by a browser
• Older browser version will not have feature updates to support new specs

To allow use of a CSS specification that is not fully implemented in a browser or in early implementation, we use what are known as CSS Vendor Prefixes.

Checking Compatibility

Up until now, most of the CSS you've learned is fully supported in all browsers. For newer properties, from CSS3 and later, that's not always going to be the case.

It's important to check the compatibility of a property to know if you should use it. You should consider the following things:

• Is this feature essential to make my website/app work or is it a visual enhancement?
• Which browsers do not support this feature?
• Can I provide a reasonable fallback option?
• Define a "breaking point" for the feature. How far back should support go?

There are many resources online that collect information on browser compatibilities. Sometimes it's hard to tell how recent the information is. It's important to get up to date information. One of the best resources is Can I Use ____?

• caniuse.com

caniuse.com gives you current information on all relevant browser support. You also can check common known issues and other resources listed for each property. caniuse.com also features information on compatibility for HTML5, JavaScript and other things.

CSS Vendor Prefixes

The process of introducing new CSS properties and HTML elements can be a long and convoluted process. Sometimes changes are proposed by standards committees (like the W3C) and other times browser vendors create their own properties.

A property created by the W3C doesn't actually work until browser vendors implement them in new versions of their browsers. Additionally, sometimes there are disagreements in how a standard should be implemented. Other times a browser vendor creates a new property which later becomes a standard, but with a slightly different syntax. And even worse, if end users never upgrade their browsers none of the new features work at all.

Browser vendors needed a way to add support for new features that were not yet standardized, but without messing up later changes or creating incompatibles. To solve this issue Vendor Prefixes were created. A vendor prefixes is a special prefix added to a CSS property. Each rendering engine has it's own prefix which will only apply the property to that particular browser.

Much less necessary, but still used.

• What CSS to prefix?
• autoprefixer
• It’s Time to Rethink Vendor Prefixes in CSS
• Vendor Prefix (MDN)

Note: Both Chrome and Opera now use a forked version of webkit called Blink as their rendering engine. They will continue using the -webkit prefix for now, but in the future will not use prefixes at all and will require 'experimental' features to be turned on via a preference setting. Firefox will be doing a similar thing.

Vendor Prefix Example

• In CSS, a browser simply ignores properties it does not understand.
• Vendor Prefixes are used by their specified browsers and ignored by others.
• Always put the standardized property last. Any browser that understands it will use the last definition, overwriting any previous one.

More Information

• Prefix or Posthack : Excellent article by Eric Meyer on CSS Vendor Prefixes
• W3C on Vendor Prefixes

• Sign up Free

Code has been added to clipboard!

Browser Specific CSS: Learn to Use Prefixes

TL;DR — Browser specific CSS prefixes are for adding support for new or experimental CSS properties.

Explaining the use of browser prefixes

You need to learn about browser specific CSS prefixes to make sure that non-standard or experimental properties work. Creators of browsers set support through these prefixes.

Currently, the CSS properties have different browser support . Some of them have issues in older versions and work only in modern browsers.

Here is a list of available browser prefixes for guaranteeing best CSS browser support:

• -webkit- : a prefix to make sure that properties work on Chrome, Safari, nearly all iOS browsers, and newer versions of Opera.
• -moz- : a prefix for Firefox.
• -o- : a prefix for older versions of Opera.
• -ms- : a prefix for Internet Explorer and Microsoft Edge.

Full list of property browser support

Here is a table specifying the browser compatibility for CSS3 properties:

CSS Typography

Css backgrounds & colors, css effects, css responsive, css element styling, css references, css properties, best-rated moocs to learn programming:.

Related Posts

A sorted list of css code examples: master styling html elements.

Easily accessible CSS code examples: CSS styles, borders, tables, buttons & more. Discover many CSS examples in this comprehensive CSS code example list.

CSS Syntax: Discover the Essential Elements and Rules

Complete guide on CSS syntax: learn about CSS elements, what is the difference of CSS class vs ID and more. Check out the CSS syntax examples too!

Inline CSS: Learn to Use the CSS Inline and Style HTML Elements

Inline CSS usage: how to link CSS to HTML & add style attributes to tags. Improve pages with inline CSS by adding inline CSS styles to specific element!

Related Code Examples

EXCLUSIVE OFFER: GET 25% OFF

JavaScript is disabled in your browser. To get the best user experience on our website you should enable it :-)

What Are CSS Vendor or Browser Prefixes and Which Should You Use?

When looking at CSS code in the wild, have you ever wondered why some CSS code has numerous repetitive properties, with labels attached such as -webkit- , -webkit- , -moz- , -o- and -ms- ?

These are called vendor prefixes, or more expressively, browser prefixes.

A browser prefix job is to make the newest CSS features work in browsers that don’t fully support them yet.

A common example is the transition property, which used to require a whooping 4 browser prefixes to work:

A list of CSS prefixes for each browser:

• Chrome, Android, Safari, iOS: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-

Which browser prefixes does your website need?

In 2020, the transition property pretty much works fully in Chrome, Firefox, Edge, Opera without requiring a prefix, however:

• There are many other new or experimental CSS property features that you might need to support with prefixes.
• Some properties, like transition and transform have multiple methods (features) and perhaps the exact method you’re using doesn’t work fully in all browsers — so you need to use a prefix.

Prefixing is a rapidly declining problem, but it still exists.

To check if your code needs prefixes for the browsers you need to support, go to Autoprefixer’s website. Then go to Browserlist and here you can specify how many versions of backward compatibility you need.

Browsers evolve and change constantly. Just look at the big difference between choosing compatibility for the last 4 versions vs. the latest (1) versions.

Autoprefixer also has a library that you can install in your projects, to automatically add prefixes to browsers. TechStacker uses it.

Caniuse.com is also a great website to look up CSS browser compatibility.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Share & Discuss on

• 1%, last 2 versions" /> Browser Filter Console Reset