Почему не работает @import внутри media query?

Приятного дня.
Почему может не работать такая конструкция:

@media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape){
  @import url("ipad-landscape/common.css");
  }


Тестировалось на эмуляторе ipad под macosx.
При этом само media-правило вроде бы правильное.
Вот такое вот работает:

@media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape){
  body.my-class{
    color:#f00;
    }
  }


Я в задумчивости.
Был бы так же благодарен за статейки по support'у mediaquery's десктопными браузерами и ipad, iphone retina, iphone.
  • Вопрос задан
  • 3935 просмотров
Пригласить эксперта
Ответы на вопрос 2
polevsl
@polevsl
Добрый день.
Такая конструкция не работает.
В начале CSS вы уже объявили правило "@media", а после него хотите сделать "@import"

@import не разрешается прописывать после любых объявлений кроме @charset или другого @import.
То есть, чтобы @import работал, он должен быть в самом начале CSS списка или файла.

Пруфлинк: www.w3.org/TR/CSS21/cascade.html#at-import (any @import rules must precede all other rules (except the @charset rule, if present), то же на русском: htmlbook.ru/css/import

Как-то так.
Ответ написан
SilentImp
@SilentImp Автор вопроса
Ох, жаль.
Это весьма неудобно.
Кстати, mediaquery для линеек ipad-iphone

/*DESKTOP дохуя×дохуя*/
@media all and (min-device-width: 1025px){
  body:before{
    content:"Desktop";
    }
  }

/*IPAD 1 1024×768*/
@media all and (max-device-width:1024px) and (min-device-width:481px) and (orientation:landscape){
  .ipad:before{
    content:"IPad landscape";
    }
  }

@media all and (max-device-width:768px) and (min-device-width:321px) and (orientation:portrait){
  .ipad:after{
    content:"IPad portrait";
    }
  }
  
/*IPHONE RETINA 640 × 960*/

@media all and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:480px) and (orientation:landscape){  
  .iphone-retina:before{
    content:"IPhone Retina landscape";
    }
  }

@media all and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:320px) and (orientation:portrait){
  .iphone-retina:after{
    content:"IPhone Retina portrait";
    }
  }

/*IPHONE TFT 320 × 480*/

@media all and (max-device-width:480px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:landscape){
  .iphone-tft:before{
    content:"IPhone TFT landscape";
    }
  }

@media all and (max-device-width:320px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:portrait){
  .iphone-tft:after{
    content:"IPhone TFT portrait";
    }
  }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы