@import em @media não está trabalhando no Firefox 3.0.3

Question

É isso que tenho, que funciona no IE7, mas não no Firefox:

@media screen { @import 'screen.css'; }

Funciona fora do bloco @media no Firefox:

@import 'screen.css';

ATUALIZAR:

Isso funciona:

@media screen { 

    .yui-d3f
    {
        border: 1px solid #999;
        height: 250px;
    }

}

o que estou perdendo?

Answer 1

O Firefox está seguindo a especificação CSS2, enquanto o IE está jogando rápido e solto, por assim dizer.

A razão exata é que @import As diretivas devem ser as primeiras diretivas após o opcional @charset diretivo. Eles não podem aparecer dentro de nenhum bloco. Se você quiser um @import Para se inscrever em apenas um tipo de mídia, especifique isso após o URI importado.

Aqui está a seção pertinente da especificação CSS2: 6.3 O @import regra.

Answer 2

Ok, então o Firefox não gosta do método que eu escolhi, favorecendo:

@import 'stylesheet.css' media_type;

Mas o IE7 não entende esse método, mas isso pode ser bom:

@import 'firefox-screen.css' screen;
@media screen { @import 'IE7-screen.css'; }