Передать переменные html в css - PullRequest
Новая
       12

Передать переменные html в css

0 голосов
/ 18 марта 2019

Я провел немало поисков, но не нашел ни одного недавнего полезного ответа.

Мой вопрос: возможно ли передать переменные из HTML (возможно, с использованием атрибутов данных) в CSS?

Мой пример использования: у меня есть страницы брендов, которые я хотел бы использовать в медиа-запросах, чтобы показать специфические фоны для каждого бренда, используя медиа-запросы.Я знаю, что вы не можете использовать медиа-запросы во встроенном CSS, но я также не хочу создавать ~ 100 медиа-запросов в моей таблице стилей.

На моей HTML-странице я могу получить доступ к объекту для фонового URL-адреса вендора, поэтому было бы здорово, если бы я мог как-то передать их в один медиа-запрос CSS без выполнения JavaScript.

Спасибо

Ответы [ 2 ]

1 голос
/ 18 марта 2019

Вы можете сделать это с помощью переменных CSS (afaik другого пути нет).

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Это будет работать примерно так:

  • Присоедините переменную CSS к вашему HTML-тегу: <html style="--variable:'your_fallback_image.jpg'">
  • Заполните эту переменную URL-адресом динамически (неважно, как в этом примере)
  • Создайте CSS, который установит фон (обернутыйв медиа-запросе)

Что-то вроде ниже: 

@media screen and (width:64rem){
  background-image: url(--variable);
}

Теперь оно должно обновляться соответствующим образом при изменении URL и устанавливать значение по умолчанию, если ваше динамическое решение не работает,надеюсь, что это поможет.

0 голосов
/ 18 марта 2019

Вы не передаете HTMl в CSS. Когда Liquid отображает вашу тему в виде большой строки HTML, вы можете использовать поставщика продукта, чтобы повлиять на CSS, который вы показываете покупателю. Либо вы заранее устанавливаете нужное дерьмо в своем CSS и просто переключаетесь таким образом, либо вы отбираете дерьмо из, скажем, метаполей продукта и используете его таким образом. Другими словами, поскольку вы можете сохранить строку в качестве метаполя, а CSS - это строка, вы можете сделать это и так.

...