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

Question

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

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

@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 для работы или проверенные альтернативы?

Любая помощь была бы действительно оценена!

Answer 1

Media queries не поддерживаются вообще в IE8 и ниже.

Для IE9, вы должны быть в состоянии сделать это в HTML:

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

Для добавления поддержки IE8, вы можете использовать один из нескольких решений JS. Например, this library могут быть добавлены, чтобы добавить поддержку медиа-запросов для 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]-->