--- 
title: Compass Cross Browser Helpers
crumb: Cross Browser
framework: compass
meta_description: Helper functions for working with vendor prefixed functions.
layout: core
classnames:
  - reference
  - core
  - helpers
documented_functions:
  - "prefixed"
  - "prefix"
  - "-webkit"
  - "-moz"
  - "-o"
  - "-ms"
  - "-svg"
  - "-pie"
  - "-css2"
---
%h1 Compass Cross Browser Helpers

:markdown
  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](https://github.com/chriseppstein/compass/blob/master/frameworks/compass/stylesheets/compass/css3/_images.scss).

#prefixed.helper
  %h3
    %a(href="#prefixed")
      prefixed(<span class="arg">$prefix<span>, <span class="arg">$arg</span>, ...)
  .details
    %p
      Returns true if any of the arguments require the given prefix.

#prefix.helper
  %h3
    %a(href="#prefix")
      prefix(<span class="arg">$prefix<span>, <span class="arg">$arg</span>, ...)
  .details
    %p
      Transforms the argument(s) into a representation for the rendering engine
      indicated by <code>$prefix</code>. 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).
    %p
      Values that do not have a specific representation are passed through without
      being transformed.

#-webkit.helper
  %h3
    %a(href="#-webkit")
      \-webkit(<span class="arg">$arg</span>, ...)
  .details
    %p
      This is a shortcut for calling <code>prefix(-webkit, $arg, ...)</code>.
#-moz.helper
  %h3
    %a(href="#-moz")
      \-moz(<span class="arg">$arg</span>, ...)
  .details
    %p
      This is a shortcut for calling <code>prefix(-moz, $arg, ...)</code>.
#-o.helper
  %h3
    %a(href="#-o")
      \-o(<span class="arg">$arg</span>, ...)
  .details
    %p
      This is a shortcut for calling <code>prefix(-o, $arg, ...)</code>.
#-ms.helper
  %h3
    %a(href="#-ms")
      \-ms(<span class="arg">$arg</span>, ...)
  .details
    %p
      This is a shortcut for calling <code>prefix(-ms, $arg, ...)</code>.
#-svg.helper
  %h3
    %a(href="#-svg")
      \-svg(<span class="arg">$arg</span>, ...)
  .details
    %p
      This is a shortcut for calling <code>prefix(-svg, $arg, ...)</code>.
      Instead of adding a prefix, it returns a representation of the
      arguments using SVG to render them where it can.
#-pie.helper
  %h3
    %a(href="#-pie")
      \-pie(<span class="arg">$arg</span>, ...)
  .details
    %p
      This is a shortcut for calling <code>prefix(-pie, $arg, ...)</code>.
      It it used to get <a href="/reference/compass/css3/pie/">CSS3 PIE</a>
      support where necessary.
#-css2.helper
  %h3
    %a(href="#-css2")
      \-css2(<span class="arg">$arg</span>, ...)
  .details
    %p
      This is a shortcut for calling <code>prefix(-css2, $arg, ...)</code>.
      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.helper
  %h3
    %a(href="#css2-fallback")
      css2-fallback(<span class="arg">$value</span>, <span class="arg">$css2-value</span>)
  .details
    %p
      This function returns a value that is normally <code>$value<code>,
      but is <code>$css2-value</code> when passed through the <code>-css2()</code>
      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).
