AcCSS

github

• Index
• Nested Block
• Variables
• Functions
• Tips
  • Cross-browser definition
  • Protect property value
  • Limit css scope

Tips > Cross-browser definition

Here are some exemple functions which help getting cross-browser definition :

$border-radius: $(radius) {
    $radius = $radius == NULL ? '1em' : $radius;
    
    $->set('border-radius', $radius);
    $->set('-moz-border-radius', $radius);
    $->set('-khtml-border-radius', $radius);
    $->set('-webkit-border-radius', $radius);
$}

$box-shadow: $(shadow) {
    $properties = array(
        'box-shadow',
        '-o-box-shadow',
        '-moz-box-shadow',
        '-khtml-box-shadow',
        '-webkit-box-shadow'
    );
    $shadow = $shadow == NULL ? '0 1px 2px #000' : $shadow;
    
    foreach($properties as $property) {
        $->set($property, $shadow);
    }
$}

$add-box-shadow: $(shadow) {
    $properties = array(
        'box-shadow',
        '-o-box-shadow',
        '-moz-box-shadow',
        '-khtml-box-shadow',
        '-webkit-box-shadow'
    );
    $shadow = $shadow == NULL ? '0 1px 2px #000' : $shadow;
    
    foreach($properties as $property) {
        $->push($property, $shadow);
    }
$}

$inline-block: $(radius) {
    $->set('+display', '-moz-inline-stack');
    $->set('display', 'inline-block');
    $->set('_display', 'inline');
    $->set('_zoom', '1');
$}

$rotate: $(rotation) {
    $rotation = $rotation == NULL ? '-22deg' : $rotation;
    
    $->set('rotate', $rotation);
    $->set('-o-rotate', $rotation);
    $->set('-moz-rotate', $rotation);
    $->set('-khtml-rotate', $rotation);
    $->set('-webkit-rotate', $rotation);
$}

$vertical-gradient: $(top, bottom) {
    $top = $top == NULL ? '#FFF' : $top;
    $bottom = $bottom == NULL ? '#000' : $bottom;
    
    $->set('background-image', '-moz-linear-gradient(top, '.$top.', '.$bottom.')');
    $->set('background-image', '-webkit-gradient(linear,left top,left bottom,color-stop(0, '.$top.'),color-stop(1, '.$bottom.'))');
    $->set('filter', 'progid:DXImageTransform.Microsoft.gradient(startColorStr='.$top.', EndColorStr='.$bottom.')');
    $->set('-ms-filter', 'progid:DXImageTransform.Microsoft.gradient(startColorStr='.$top.', EndColorStr='.$bottom.')');
$}