CSS Linked Parameters

При использовании встроенных SVG-иконок в HTML удобно то, что к ним есть доступ в CSS. Можно, например, изменять цвета, скрывать отдельные части иконки, менять толщину линий, радиус окружности, применять анимации и так далее.





Назад


a {
color: var(--color-link);
transition: color .3s linear;

svg path {
fill: currentColor;
transition: fill .3s linear;
}
}

a:hover {
color: var(--color-link-hover);
}


Однако при использовании внешних SVG-иконок доступ в CSS теряется. Отчасти это можно обойти через SVG-спрайты, но у них есть свои нюансы. CSSWG выпустила черновик CSS Linked Parameters, который предлагает решение проблемы.

Суть предложения в том, чтобы передавать через URL специальные параметры и затем получать к ним доступ через переменные окружения в атрибутах и CSS. Так можно будет передать цвет во внешний SVG-файл, подключаемый через или url().

Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться

img {
/*
Параметры можно задать в CSS
с помощью link-parameters.
Это добавит к src и
ссылкам на все ресурсы
#param(--color,green)
*/
link-parameters:
param(--color, green)
;
}

.icon {
/*
Параметры можно задать
в функции url() в CSS
*/
background-image:
url(
"icon.svg",
param(--color, green)
)
;
}












path {
fill: env(--color, black);
}




Можно передавать несколько параметров, перечислив их в URL через &, указав несколько param() через пробел в url() или через запятую в link-parameters. В качестве значения могут быть пользовательские свойства CSS.






img {
/*
несколько param() в link-parameters,
доступны пользовательские свойства
*/
link-parameters:
param(--color, var(--color-primary)),
param(--stroke, 1)
;
}

.icon {
/*
несколько param() в url(),
доступны пользовательские свойства
*/
background-image:
url(
"icon.svg",
param(--color, var(--color-primary))
param(--stroke, 1)
)
;
}


Таким образом появляется возможность передавать данные во внешние файлы. Основное назначение — , но также упоминается возможность передачи для . Синтаксис фрагментов используется для обратной совместимости.

#html #svg #css