Browser Support

/**
 * Generates vendor prefixes for CSS properties
 * @param $property - The CSS property to prefix
 * @param $value - The value for the property
 * @param $prefixes - List of vendor prefixes to output (default: empty)
 */
@mixin prefixer($property, $value, $prefixes: ());

.element {
  @include prefixer(transform, rotate(45deg), (webkit, moz, ms));
}
// Result:
// -webkit-transform: rotate(45deg);
// -moz-transform: rotate(45deg);
// -ms-transform: rotate(45deg);
// transform: rotate(45deg);

.flex-container {
  @include prefixer(display, flex, (webkit, moz));
  @include prefixer(flex-direction, column, (webkit, moz));
}

.gradient {
  @include prefixer(
    background-image,
    linear-gradient(to right, #ff0000, #0000ff),
    (webkit, moz, o)
  );
}

/**
 * Generates vendor prefixes for CSS values
 * @param $property - The CSS property to use
 * @param $value - The value to prefix
 * @param $prefixes - List of vendor prefixes to output (default: empty)
 */
@mixin value-prefixer($property, $value, $prefixes: ());

.sticky-element {
  @include value-prefixer(position, sticky, (webkit));
}
// Result:
// position: -webkit-sticky;
// position: sticky;

.gradient-background {
  @include value-prefixer(
    background,
    linear-gradient(to bottom, #fff, #000),
    (webkit, moz)
  );
}
// Result:
// background: -webkit-linear-gradient(to bottom, #fff, #000);
// background: -moz-linear-gradient(to bottom, #fff, #000);
// background: linear-gradient(to bottom, #fff, #000);

.backdrop-filter {
  @include value-prefixer(backdrop-filter, blur(10px), (webkit));
}

.grid-container {
  @include prefixer(display, grid, (ms));
  @include prefixer(grid-template-columns, repeat(3, 1fr), (ms));
  @include prefixer(grid-gap, 20px, (ms));
}

.flex-container {
  @include prefixer(display, flex, (webkit, moz, ms));
  @include prefixer(flex-direction, row, (webkit, moz, ms));
  @include prefixer(align-items, center, (webkit, moz, ms));
  @include prefixer(justify-content, space-between, (webkit, moz, ms));
}

.flex-item {
  @include prefixer(flex, 1, (webkit, moz, ms));
}

.animated-element {
  @include prefixer(transform, translateX(100px) rotate(45deg), (webkit, moz, ms));
  @include prefixer(transform-origin, center center, (webkit, moz, ms));
  @include prefixer(transition, transform 0.3s ease, (webkit, moz, ms, o));
}

.blurred-image {
  @include prefixer(filter, blur(5px), (webkit));
}

.backdrop-blur {
  @include value-prefixer(backdrop-filter, blur(10px), (webkit));
}

.no-select {
  @include prefixer(user-select, none, (webkit, moz, ms));
}

.text-selectable {
  @include prefixer(user-select, text, (webkit, moz, ms));
}

.custom-button {
  @include prefixer(appearance, none, (webkit, moz));
  // Custom button styles here
}

.custom-input {
  @include prefixer(appearance, none, (webkit, moz));
  // Custom input styles here
}

.themed-component {
  // Fallback for older browsers
  background-color: #3498db;
  
  // Modern browsers with CSS custom properties
  background-color: var(--primary-color, #3498db);
  
  @include prefixer(
    background-image,
    linear-gradient(135deg, var(--primary-color), var(--secondary-color)),
    (webkit, moz)
  );
}

.responsive-image {
  width: 100%;
  height: 200px;
  @include prefixer(object-fit, cover, (webkit));
  @include prefixer(object-position, center, (webkit));
}

html {
  @include prefixer(scroll-behavior, smooth, (webkit));
}

.scroll-container {
  @include prefixer(scroll-snap-type, y mandatory, (webkit, ms));
  
  .scroll-item {
    @include prefixer(scroll-snap-align, start, (webkit, ms));
  }
}