CSS @import не работает на Shopify

В настоящее время создаю тему Shopify, и я использую Gridset для макета сетки. Моя проблема в том, что для IE 8/9 требуется использовать некоторые CSS @import, однако они, похоже, не работают, поскольку сетка ломается только в этих версиях.

Для стандартного сайта вы просто делаете следующее

@import url("gridset-ie-a-spans1.css") only screen and (min-width:1025px);

Я пытался адаптироваться для Shopify, выполнив следующие действия, но не работая:

@import url("{{ 'gridset-ie-a-spans1.css' | asset_url }}") only screen and (min-width:1025px);

а также

@import url("{{ 'gridset-ie-a-spans1.css' | asset_url | stylesheet_tag }}") only screen and (min-width:1025px);

Ни то, ни другое не работало!

Кто-нибудь знает, как успешно заставить работать @imports или проверенные альтернативы?

Любая помощь могла бы быть полезна!


css import shopify liquid
person user2498890    schedule 10.07.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Медиа-запросы вообще не поддерживается в IE8 и ниже.

Для IE9 вы сможете сделать это в своем HTML:

<link rel="stylesheet" type="text/css" href="gridset-ie-a-spans1.css" media="screen and (min-width:1025px)" />

Чтобы добавить поддержку IE8, вы можете использовать одно из нескольких решений JS. Например, эту библиотеку можно добавить в добавить поддержку медиа-запросов только для IE8 с помощью следующего кода:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Respond — это еще одна библиотека, которая делает то же самое. Код для добавления этой библиотеки в ваш HTML будет идентичным:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

Если вам не нравится решение на основе JS, вам также следует подумать о добавлении таблицы стилей только для IE‹9, где вы настраиваете свой стиль, характерный для IE‹9. Для этого вы должны добавить следующий HTML-код в свой код:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->
person John Slegers    schedule 10.07.2015
comment
Gridset использует этот импорт CSS, чтобы обойти отсутствие поддержки медиа-запросов в IE8. Моя проблема в том, что импорт CSS не работает с Shopify. Обычно это работает на стандартном веб-сайте, однако я не уверен, как заставить его работать с Shopify. Хотя спасибо за подробный ответ - person user2498890; 10.07.2015
comment
@ user2498890: Насколько я знаю, медиа-запросы вообще не работают в IE8, в том числе в операторах импорта. Однако это конкретное использование медиа-запросов плохо документировано, и я сам не пробовал. Возможно ли, что gridset использует JS под капотом, чтобы заставить медиа-запросы работать с операторами импорта? Кроме того, возможно ли предоставить онлайн-демонстрацию того, чего вы пытаетесь достичь? Это облегчает точное определение того, что идет не так в вашем конкретном случае использования. - person John Slegers; 10.07.2015
comment
Все, что я знаю, это то, что у Gridset есть решение для работы сеток в IE8, оно будет работать в моем случае, однако что-то, связанное с Shopify/Liquid, заставляет сетки не работать. Я предполагаю, что либо я неправильно пишу тег Liquid, либо вы не можете использовать импорт CSS в файлах css.liquid? - person user2498890; 10.07.2015
comment
@ user2498890: Я предполагаю, что Shopify использует Javascript, чтобы заставить этот код работать с IE8, и что какая-то фатальная ошибка где-то в вашем коде Javascript препятствует выполнению этого поведения. Вы проверили в своей консоли, получаете ли вы какие-либо ошибки JS? - person John Slegers; 10.07.2015