Stack Overflow
Stack Overflow

Questions tagged [vendor-prefix]

In CSS, identifiers may begin with '-' (dash) or '_' (underscore). Keywords and property names beginning with -' or '_' are reserved for vendor-specific extensions.

In CSS, vendor prefixes may begin with '-' (dash) or '_' (underscore) and are reserved for vendor-specific extensions. Such vendor-specific extensions should have one of the following formats.

By reserving this specific syntax for vendor prefixes, devices which do not recognize them will all simply ignore them as they would for any unknown CSS inline with the rules for handling parse errors. The W3C rules for handling parse errors states that user agents must ignore a declaration if it is an unknown property.

List of Vendor Prefixes

| Vendor Prefix | In Use    | Layout Engine    | Created by            | Used by
------------------------------------------------------------------------------------------
| -ah-          | yes       | Formatter        | Antenna House         | Antenna House Formatter
| -apple-       | yes       | WebKit           | Apple Inc.            | Apple Safari 2.0, Opera Widgets[?], WebKit-Based Browsers (as legacy prefix)
| -atsc-        |           |                  | Advanced Tv Standards | 
| -epub-        | yes       | WebKit           | EPUB Working Group    | Chromium / Google Chrome, WebKit-Based Browsers
| -hp-          |           |                  | Hewlett Packard       | 
| -khtml-       | yes / yes | KHTML / WebKit   | KDE                   | KDE Konqueror / Apple Safari 1.1 through Safari 2.0, WebKit-Based Browsers (as a legacy prefix)
| -moz-         | yes       | Gecko            | Mozilla Foundation    | Gecko-Based Browsers[?], Mozilla Firefox
| -ms-          | yes       | Trident / MSHTML | Microsoft Corporation | Microsoft Internet Explorer
| mso-          |           | Office           | Microsoft Corporation | Microsoft Office[?]
| -o-           | yes       | Presto           | Opera Software        | Opera Desktop Browser, Opera Mini, and Opera Mobile, Nintendo DS & DSi Browser[?], Nintendo Wii Internet Channel[?]
| prince-       | yes       | Prince           | YesLogic              | YesLogic Prince
| -rim-         |           | WebKit[?]        | Research In Motion    | RIM Blackberry Browser[?]
| -ro-          | yes       | MARTHA           | Real Objects          | Real Objects PDFreactor
| -tc-          |           |                  | TallComponents        | TallComponents
| -wap-         | yes       | Presto           | The WAP Forum         | Opera Desktop Browser and Opera Mobile, The WAP Forum
| -webkit-      | yes       | WebKit           | Apple Inc.            | Apple Safari & Safari for iOS, Chromium / Google Chrome, Nokia MeeGo Browser 8.5, Nokia Symbian Browser 7.0 and later, RIM Blackberry Browser 6.0 and later, WebKit-Based Browsers[?]
| -xv-          | no        | Presto           | Opera Software        | Opera Desktop Browser for Windows 2000/XP

-apple-

-apple-dashboard-region

-epub-

-epub-caption-side        -epub-text-transform
-epub-hyphens             -epub-word-break
-epub-text-combine        -epub-writing-mode
-epub-text-orientation

-wap-

The -wap- prefix refers to WCSS (WAP Cascading Style Sheet or WAP CSS) and is the mobile version of CSS, a subset of CSS2. It is used in conjunction with XHTML Mobile Profile or XHTML MP.

-wap- prefixes are:

-wap-input-format         -wap-marquee-dir           -wap-marquee-speed
-wap-input-required       -wap-marquee-loop          -wap-marquee-style
-wap-accesskey

-xv-

-xv-interpret-as          -xv-voice-duration         -xv-voice-rate         
-xv-phonemes              -xv-voice-pitch            -xv-voice-stress       
-xv-voice-balance         -xv-voice-pitch-range      -xv-voice-volume
183 questions
93
votes
2 answers

Why do browsers create vendor prefixes for CSS properties?

Maybe it's an obvious answer, but Why on earth would browsers decide to create their own vendor prefixes for border-radius and the like? I mean: Why do I have to type: -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:…
Naftuli Kay
  • 87,710
  • 93
  • 269
  • 411
81
votes
4 answers

How do I apply vendor prefixes to inline styles in reactjs?

CSS properties in React are not automatically added with their vendor prefixes. For example, with:
Hello World
In Safari, the rotation wouldn't be applied. How do I get that accomplished?
zealoushacker
  • 6,766
  • 5
  • 35
  • 44
69
votes
3 answers

List of CSS vendor prefixes?

Besides the following list, are there other CSS vendor prefixes that are important for web development? Are my definitions correct? Should I be more specific about mobile browsers (mobile Webkit, e.g.) -khtml- (Konqueror, really old Safari) -moz-…
theazureshadow
  • 9,499
  • 5
  • 33
  • 48
45
votes
2 answers

Ordering of vendor-specific CSS declarations

I think I've written something like the following a thousand times now: .foo { border-radius: 10px; /* W3C */ -moz-border-radius: 10px; /* Mozilla */ -webkit-border-radius: 10px; /* Webkit */ } But only now have I thought…
nickf
  • 537,072
  • 198
  • 649
  • 721
41
votes
2 answers

text field not working in safari

I'm working on an online eBay profit forecasting calculator here I can't seem to get the input fields to work in safari and mobile safari. They work fine in FF & Chrome. I click into them, but nothing shows when I type. I've been searching google…
Chip
  • 633
  • 2
  • 6
  • 14
38
votes
3 answers

Does .css() automatically add vendor prefixes?

I have some code: $("#" + this.id).css("border-radius",this.radius + "px"); $("#" + this.id).css("-moz-border-radius",this.radius + "px"); $("#" + this.id).css("-webkit-border-radius",this.radius + "px"); I am trying to improve lines like this by…
Jamesking56
  • 3,683
  • 5
  • 30
  • 61
31
votes
2 answers

Using variables in property names in LESS (dynamic properties / property name interpolation)

I noticed that inuit.css, which was written in SASS, has a .vendor mix-in: @mixin vendor($property, $value...){ -webkit-#{$property}:$value; -moz-#{$property}:$value; -ms-#{$property}:$value; -o-#{$property}:$value; …
Isabelle Harms
  • 375
  • 3
  • 9
25
votes
1 answer

-webkit-baseline-middle and -moz-middle-with-baseline

When using browsers web inspectors I came across two different and non-standard property for the CSS attribute vertical-align. -webkit-baseline-middle is only available in Chrome while -moz-middle-with-baseline is available on Firefox. The naming is…
Vahid Amiri
  • 10,769
  • 13
  • 68
  • 113
23
votes
3 answers

What is the right combination of prefixes for CSS transitions and transforms?

What would be the right way to prefix this CSS in order to cover the widest range of browsers and versions? Version 1: -webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; -ms-transition:…
Jabba Da Hoot
  • 794
  • 2
  • 7
  • 16
19
votes
4 answers

Are There Specific CSS Selectors Targeting IE10?

Since IE is getting rid of conditional comments in version 10, I'm in dire need to find a "CSS hack" targeting IE10 specifically. Note that it has to be the selector that's getting "hacked" and not the CSS-properties. In Mozilla, you can use:…
kunambi
  • 756
  • 1
  • 10
  • 25
18
votes
1 answer

Why doesn't [CSS feature] work in [browser] but works in others?

I tried using transition on Firefox 15 and it didn't work even though it worked on other versions of Firefox and other browsers like Chrome and Safari. When I view the properties using Firefox's inspector the transition is struck through and gives…
bjb568
  • 11,089
  • 11
  • 50
  • 71
17
votes
5 answers

Setting vendor-prefixed CSS using javascript

...is a huge pain. var transform = 'translate3d(0,0,0)'; elem.style.webkitTransform = transform; elem.style.mozTransform = transform; elem.style.msTransform = transform; elem.style.oTransform = transform; Is there a library/framework/better way to…
Ender
  • 27,153
  • 7
  • 30
  • 34
17
votes
3 answers

Will Microsoft Edge use prefixes like -webkit- or -ms-?

Will Microsoft Edge use prefixes like -webkit-, -ms-, or its own new prefix for future functions? Something like -me-, perhaps?
Jacob
  • 1,933
  • 2
  • 20
  • 30
17
votes
7 answers

How to validate vendor prefixes in CSS like -webkit- and -moz-?

I use the webkit/mozilla border radius and box shadow CSS properties, but I want the CSS to validate (which it currently does not). Is there a way to get it to validate? http://jigsaw.w3.org/css-validator/
a432511
  • 1,907
  • 4
  • 26
  • 48
16
votes
4 answers

What CSS3 features still need vendor prefixes?

The most common features I remember needing prefixes for were features such as flexbox, border-radius, box-shadow, etc... but now they are supported. With more users switching to more powerful browsers like Chrome and Firefox and away from IE, are…
Gabriel West
  • 931
  • 2
  • 12
  • 23
1
2 3
…
12 13