Shared CSS3 Utilities

This module provides support to the other CSS3 modules. You may want to use it to provide your own support for other CSS3 proposals as they are being worked on and before support is added to compass.

This file can be imported using: @import "compass/css3/shared"

View the Source for this module on Github.

Imports

The following sass files are automatically imported when you import this file:

  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Mixins

View Source: Sass | SCSS 

=experimental($property, $value, $moz: $experimental-support-for-mozilla, $webkit: $experimental-support-for-webkit, $o: $experimental-support-for-opera, $ms: $experimental-support-for-microsoft, $khtml: $experimental-support-for-khtml, $official: true)
  @if $moz and $experimental-support-for-mozilla
    -moz-#{$property}: $value
  @if $webkit and $experimental-support-for-webkit
    -webkit-#{$property}: $value
  @if $o and $experimental-support-for-opera
    -o-#{$property}: $value
  @if $ms and $experimental-support-for-microsoft
    -ms-#{$property}: $value
  @if $khtml and $experimental-support-for-khtml
    -khtml-#{$property}: $value
  @if $official
    #{$property}: $value

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

This mixin provides basic support for CSS3 properties and their corresponding experimental CSS2 properties when the implementations are identical except for the property prefix.

View Source: Sass | SCSS 

=experimental-value($property, $value, $moz: $experimental-support-for-mozilla, $webkit: $experimental-support-for-webkit, $o: $experimental-support-for-opera, $ms: $experimental-support-for-microsoft, $khtml: $experimental-support-for-khtml, $official: true)
  @if $moz and $experimental-support-for-mozilla
    #{$property}: -moz-#{$value}
  @if $webkit and $experimental-support-for-webkit
    #{$property}: -webkit-#{$value}
  @if $o and $experimental-support-for-opera
    #{$property}: -o-#{$value}
  @if $ms and $experimental-support-for-microsoft
    #{$property}: -ms-#{$value}
  @if $khtml and $experimental-support-for-khtml
    #{$property}: -khtml-#{$value}
  @if $official
    #{$property}: #{$value}

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

Same as experimental(), but for cases when the property is the same and the value is vendorized