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
No need for any changes to current mixins that use experimental(), since the second boolean is optional.
Added support for prefixing properties and values to experimental()
Groundwork to finish issue #1202.
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;.
transition(background, transform 300ms)
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.
Revised method for adding property prefixes, made experimental-* mixi…
…ns wrappers for experimental
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,
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:
@include experimental(transition, transform 0.5s 300ms ease-out, $support...);
// compiles to:
-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:
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-
-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-.
-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:
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.
Revised prefix all input for prefix-value() function
Amended a small bugfix.
This mixin has basically been removed.