Patrick Skelton Ответов: 1

Могу ли я использовать CSS-переменные с атрибутом 'picture->source - >media'?

В моем HTML-коде это так и есть...

<picture>
	<source media="(min-width: 1200px)" srcset="images/Size600.jpg">
	<source media="(min-width: 600px)" srcset="images/Size300.jpg">
	<img src="images/Size300.jpg">
</picture>

..что работает именно так, как и ожидалось.

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

В отдельной комнате стили.в CSS файл:

:root
{
	--image-big: 1200px;
	--image-small: 600px;
}

В HTML файле:

<picture>
	<source media="(min-width: val(--image-big))" srcset="images/Size600.jpg">
	<source media="(min-width: val(--image-small))" srcset="images/Size300.jpg">
	<img src="images/Size300.jpg">
</picture>


..но это, кажется, не работает. Насколько я могу судить, я всегда получаю меньшее изображение. Я не уверен, что это вызвано вторым source линия или запасной вариант img линия.

Должно ли это сработать? Если да, то может ли кто-нибудь определить, что я делаю неправильно (кроме программирования как живого!)?

Что я уже пробовал:

Я пробовал использовать более конкретную область применения, чем :root (например, присвоение класса picture элемент и нацеливание на него).

Я также пробовал копаться в инструментах разработчика Edge, но не вижу ничего, что помогло бы мне.

1 Ответов

Рейтинг:
10

Richard Deeming

Переменные CSS можно использовать только в качестве значения свойства CSS. Они не могут быть использованы в тесте медиа-запросов, который является тем, что media атрибут есть:

В CSS свойства для каскадирования модулей переменных 1[^]:
То var() функция не может использоваться в качестве имен свойств, селекторов или чего-либо еще, кроме значений свойств.

Собственные переменные CSS не работают в медиа - запросах- переполнение стека[^]

Patrick Skelton

Я вижу. По крайней мере, теперь я понимаю, почему это не работает. Тем не менее, мне кажется, что это проблема технического обслуживания. Мое понимание переменных CSS заключается в том, что избегание повторяющихся констант-это именно та проблема, которую они должны были решить. Думаю, я смогу обойти это, когда преобразую свой текущий статический HTML/CSS сайт в MVC/C#, но я хотел бы видеть одно из предложенных решений в потоке GitHub на SO реализованным.

Спасибо за ответ, Ричард.