Блог

Я экспериментирую с Sass, @mixin который обеспечивает поддержку цветового пространства display-p3 и изящно деградирует до sRGB состояния, когда нет поддержки display-p3 . В настоящее время только Safari поддерживает эту спецификацию.

 @mixin color-spaces($property, $color) {
  $red: red($color);
  $green: green($color);
  $blue: blue($color);
  $alpha: alpha($color);

  @if $alpha == 1 {
    #{$property}: rgb($red, $green, $blue);
    #{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255));
  } @else {
    #{$property}: rgba($red, $green, $blue, $alpha);
    #{$property}:
      rgba(
        color(display-p3 ($red / 255) ($green / 255) ($blue / 255)),
        $alpha
      );
  }
}
  

В приведенном выше @mixin я предположил, что смогу передать color() функцию в качестве аргумента rgba() функции, если для цвета потребуется альфа-канал. Ниже приведены некоторые примеры использования:

 // Declarations
.foo {
  @include color-spaces(background-color, #ff0);
  @include color-spaces(color, rgb(255, 0, 100));
}

.bar {
  @include color-spaces(border-color, #ffff);
  @include color-spaces(color, rgba(0, 80, 160, 0.5));
}

// Results
.foo {
  background-color: #ff0;
  background-color: color(display-p3 1 1 0);
  color: rgb(255, 0, 100);
  color: color(display-p3 1 0 0.39216);
}
.bar {
  border-color: #ffff;
  border-color: rgba(color(display-p3 1 1 1), 1);
  color: rgba(0, 80, 160, 0.5);
  color: rgba(color(display-p3 0 0.31373 0.62745), 0.5);
}
  

Мое предположение было неверным. Передача color() функции в качестве аргумента в rgba() аргумент недопустима. Я также не могу передать четвертый числовой аргумент в color() функцию. Он принимает только три.

Использование opacity свойства в качестве альтернативы также не является разумным решением в данном случае. Передача значения непрозрачности соответствующему селектору затем повлияет на непрозрачность всех дочерних элементов.

Я ценю, что это довольно ново и экспериментально. Однако, знает ли кто-нибудь о методе, с помощью которого я могу передать альфа-канал в сочетании с color() функцией для достижения прозрачности с display-p3 цветовым пространством???

Я нашел ответ на этот вопрос. Я опубликую ответ на случай, если это может помочь кому-то в будущем, поскольку эта спецификация становится все более распространенной.

Кажется, что там есть противоречивая информация… color() Функция способна принимать четвертый аргумент (для альфа-канала). В этой полезной статье о CSS-хитростях Олли Уильямса это очень хорошо объясняется.

Правильный sytanx выглядит следующим образом:

 color(display-p3 1 0 0 / 50%);
  

Хотя это разные цветовые пространства, это примерно эквивалентно:

 rgba(255, 0, 0, 0.5);
  

Это означает, что я могу обновить свой, @mixin полностью удалив второй rgba() вызов функции, и просто полагаться на color() функцию для передачи альфа-канала, когда этого требует контекст:

 @mixin color-spaces($property, $color) {
  $red: red($color);
  $green: green($color);
  $blue: blue($color);
  $alpha: alpha($color);

  @if $alpha == 1 {
    #{$property}: rgb($red, $green, $blue);
    #{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255));
  } @else {
    #{$property}: rgba($red, $green, $blue, $alpha);
    #{$property}: color(display-p3 ($red / 255) ($green / 255) ($blue / 255) unquote('/') ($alpha * 100%));
  }
}