Compass Cross Browser Helpers

These helpers are used by compass to create mixins that can insulate the user from cross browser syntax and vendor prefix complexities.

If you need to support a new experimental (prefixed) function in your project using these helpers, you can add support for it adding the following to your compass configuration file:

Compass::BrowserSupport.add_support("function-name", "webkit", "moz")

For an example of how to use these functions see the compass images module.

prefixed($prefix, $arg, ...)

Returns true if any of the arguments require the given prefix.

Transforms the argument(s) into a representation for the rendering engine indicated by $prefix. Usually this means just adding a prefix, but in some cases, this may result in entirely different representations for the given rendering engine (E.g. linear-gradient).

Values that do not have a specific representation are passed through without being transformed.

-webkit($arg, ...)

This is a shortcut for calling prefix(-webkit, $arg, ...).

-moz($arg, ...)

This is a shortcut for calling prefix(-moz, $arg, ...).

-o($arg, ...)

This is a shortcut for calling prefix(-o, $arg, ...).

-ms($arg, ...)

This is a shortcut for calling prefix(-ms, $arg, ...).

-svg($arg, ...)

This is a shortcut for calling prefix(-svg, $arg, ...). Instead of adding a prefix, it returns a representation of the arguments using SVG to render them where it can.

-pie($arg, ...)

This is a shortcut for calling prefix(-pie, $arg, ...). It it used to get CSS3 PIE support where necessary.

-css2($arg, ...)

This is a shortcut for calling prefix(-css2, $arg, ...). It is a kind of hack to sanitize the output of experimental code into a form that can be parsed by a css2.1 compliant parser. Usually this results in causing some functions to be omitted.

css2-fallback($value, $css2-value)

This function returns a value that is normally $value, but is $css2-value when passed through the -css2() helper function. Many of the compass css3 mixins will create a css2 fallback value if the arguments have a css2 representation (gradients have a null css2 representation).