Added support for prefixing properties and values to experimental() #1227

wants to merge 3 commits into


None yet

3 participants


This pull request adds functionality to complete issue #1202. Sometimes you need to prefix both a name and a property for experimental css3 support. I revised the experimental() mixin so that each prefix argument ($moz, $webkit, etc.) accepts either a single boolean for "prefix-property", or a space separated list of two booleans for "prefix-property" and "prefix-value" respectively.

NOTE: the proposal below is outdated. See this comment and below for the updated behavior.

Now, private css3-feature-support variables would include a list of 5 booleans or pairs of booleans. A list with optional pairs would look like

$css3-support: -moz, -webkit -webkit, (not -ms) -ms, not -o, not -khtml; 
// Note those parenthesis. Required if you have two values, one of which is a not.

which would result in

-moz-prop: value;
-webkit-prop: -webkit-value;
prop: -ms-value;
prop: value;

No need for any changes to current mixins that use experimental(), since the second boolean is optional.

A couple notes

  • The mixin had to be a little verbose; no @each statements because we need to call the $experimental-support-for-* variables manually.
  • I suggest that this mixin replaces experimental(), but if we're worried about the extra overhead added it could be a separate mixin called experimental-property-value().
  • We can rewrite experimental-values() as a wrapper for this mixin, like experimental-only-for is now.
  • Docs and tests will need to be updated.

The problem is: we don't want all values prefixed. For example, if you look at the transition property, only certain values (such as transform) need prefixes, but other values (such as border-color or all) don't. So things get much more complex. For any given experimental properties, we may have any number of experimental values, each with different prefixes, and mixed with non-experimental values.


Sorry, my example was meant to be general. This is just the first building block to get the desired output in transforms. In the transforms mixin we'd check input and call the correct prefixing matrix for the values in $transitionable-prefixed-values.

Right now there's no (easy/abstracted) way to prefix the property and/or the value, only properties and values separately, which is all this is meant to address.


Ah, I see. There's also the question of prefixing one part of a value so that transition(background, transform 300ms) can return e.g. transition: background, -ms-transform 300ms;.


That should be pretty easy. Let's bring this conversation back to issue #1202 — I'll post some code samples of how we can finish that issue if this one is merged, and we can reference them here.


OK, so my first try added more complexity to the transition partial than I think it's worth. I revised so all prefixing is handled in shared and the experimental() mixin.

This pull works by changing the $css3-prefixed-values pattern to be more like $css3-support, but with a list of prefixable values.

// current $css3-support
$css3-support: not -moz, -webkit, not -ms, not -o, not -khtml;
// five booleans *or* lists of prefixable values
$css3-value-support: not -moz,
                     -webkit transform transform-origin box-shadow,
                     -ms transform transform-origin,
                     not -o,
                     not -khtml;

In transitions, or any other css3 mixin that needs it, you can join $css3-support and $css3-value-support and feed them in as one big variable list. The new experimental() ArgList looks like:

@mixin experimental($property, $value,
  $moz            : $experimental-support-for-mozilla,
  $webkit         : $experimental-support-for-webkit,
  $ms             : $experimental-support-for-microsoft,
  $o              : $experimental-support-for-opera,
  $khtml          : $experimental-support-for-khtml,
  $moz-value      : false,
  $webkit-value   : false,
  $ms-value       : false,
  $o-value        : false,
  $khtml-value    : false,
  $official       : true
  ) {

A little long, but follows the current patterns better than any other option I can think of.


If you set $(vendor)-value to true, it prefixes all values.
It works if the value is a list. With the settings above:

.test {
  @include experimental(transition, transform 0.5s 300ms ease-out, $support...);
// compiles to:
.test {
  -webkit-transition: -webkit-transform 0.5s 300ms ease-out;
  transition: -ms-transform 0.5s 300ms ease-out;
  transition: transform 0.5s 300ms ease-out;

I made all other experimental-*() mixins wrappers for experimental(), so they all have the same value prefixing abilities.



I'll have to play with it some, but this looks awesome! Thanks for your great work!


No problem. Here's a question — for telling the mixin to prefix all values there are three possible syntaxes:

  1. true: this one has to be supported for direct mixin calls:

    @include experimental($webkit: true, $o: false, $o-val: true);
    // Prefix every opera value with -o-
  2. -vendor true in $css3-value-support:

    $css3-value-support: not -moz, not -webkit, -o true, -ms some-css3-value, not -khtml;
    // Prefix every opera value with -o-, only 'some-css3-value' with -ms-.
  3. -vendor alone in $css3-value-support:

    $css3-value-support: not -moz, -webkit, not -o, -ms some-css3-value, not -khtml;
    // Prefix every webkit value with -webkit-, only 'some-css3-value' with -ms-.

Right now 2 works, but I think 3 is more inline with current patterns. Any objections to switching it over?


That change makes sense to me, though I think the use case should be very rare.


Done and done. Remaining tasks:

  1. Update tests for experimental-* mixins.
  2. Update docs for experimental-* mixins.
  3. Remove prefixed-for-transition($prefix, $property) from docs and tests (already removed from code in #1202), and replace with the all purpose prefix-value($value, $prefix, $prefixable-values).

I probably won't have time to do this in the next week so if anyone wants to step in, please do.


Amended a small bugfix.

@robwierzbowski robwierzbowski referenced this pull request in yeoman/generator-webapp_DEPRECATED May 25, 2013

Autoprefixer #62


This mixin has basically been removed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment