CSS Link Parameters, что ты такое?

31.07.2026 • css

Вступление

В свежем Файерфоксе 153 за флагом появилась новая штука, которую было увидеть прямо-таки неожиданно. В первую очередь потому, что проблеме много лет, никакого решения у неё не было, и разработчики давным-давно свыклись с этим ограничением.

Встречайте link-parameters, или способ повлиять на SVG, не вставляя его содержимое в HTML!

Проблема

SVG отлично себя показывает, если нужно вставить иконку на сайт. В своё время были популярны иконочные шрифты, и SVG перехватил у них пальму первенства.

Но при этом было утеряно важное свойство – простота покраски иконки под окружение. Хочется красить иконку с текстом при ховере. Делать одну иконку под светлую и тёмную темы.

Конечно, можно просто вставить SVG инлайном в HTML. Из этого же решения растут SVG-спрайты с symbol и use, из него же и JSX с SVG внутри (или какой-нибудь svgr). У всего этого есть минусы, будь то сложность сборки, редактирования, увеличение размера страницы и так далее.

Link Parameters

Новое свойство призвано решить эту проблему другим способом, а именно дать возможность нашему CSS повлиять на части SVG, которых нет в нашем дереве DOM:

<img src="image.svg">

img {
    link-parameters: param(--color, red);
}

<svg>
    <path fill="env(--color, black)" d="..." />
</svg>

В HTML используем обычный <img> с svg-картинкой. В CSS указываем параметры, которые будут доступны внутри картинки. Внутри картинки используем env(), чтобы эти параметры достать. Максимально просто.

Или можно ещё проще? Можно:

<img src="image.svg#param(--color1, slategrey)&#param(--color2, lightgrey)">

Да, можно прокидывать параметры и без CSS, передавая их напрямую в урле.

Что с background-image, спросите вы? Есть ещё один вариант!

.foo {
    background-image: url(
        'image.svg'
        param(--color, red)
    );
}

Это те самые Url modifiers, про которые я уже писал. Просто добавился ещё один тип. К сожалению, такой вариант использования в моём Файерфоксе не заработал.

Нюансы

Включить свойство в Файерфоксе можно через флаг layout.css.link-parameters.enabled в about:config.

Самое главное разочарование для меня на текущий момент – отсутствие поддержки CSS-переменных. Внутрь param() можно передать только литералы. Вот такая конструкция не работает:

.image {
    /* Не работает! */
    link-parameters: param(--color1, var(--color, #f00));
}

inherit туда тоже не передать. Короче говоря, никакой динамики, увы. Разве что через JS менять, но смысл немного теряется.

Что будет, если часть параметров будет невалидна? Во-первых, в env() есть фолбек (но он у меня не работает, или я не понимаю, как он должен работать). Во-вторых, все остальные параметры продолжат работу, весь link-parameters не выключится.

Итого

Если после Url Modifiers у меня осталось впечатление “интересно, может быть когда-то пригодится”, то от нового Link Parameters совсем другое впечатление. Это может быть новым основным способом вставки векторной графики на страницу, который сделает все остальные способы менее актуальными.

Если, конечно, заработает проброс CSS-переменных и использование с background-image.

Или я всё неправильно понял, и оно будет работать по-другому?

Почитать ещё посты