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

Question

[SilentImp]

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

@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.

Answer 1

[Vyacheslav]

Добрый день.
Такая конструкция не работает.
В начале 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

Как-то так.

Comments

[Vyacheslav]

Забыл: www.w3.org/TR/CSS21/media.html#at-media-rule — описание разных медиа. Или тут htmlbook.ru/css/media и более подробно htmlbook.ru/css/value/media

Answer 2

[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";
    }
  }