@ importación en @media no funciona en Firefox 3.0.3

Question

Esto es lo que tengo, que funciona en IE7, pero no en Firefox:

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

funciona fuera del bloque @media en Firefox:

@import 'screen.css'; 

ACTUALIZACIÓN:

Esto funciona:

@media screen { 

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

} 

¿Qué me estoy perdiendo?

Answer 1

Firefox es siguiendo la especificación CSS2, mientras que IE está jugando rápido y suelto, por así decirlo.

La razón exacta es que las directivas @import deben ser las primeras directivas después de la directiva opcional @charset. No pueden aparecer dentro de ningún bloque. Si desea que un @import se aplique a un solo tipo de medio, especifíquelo después del URI importado.

Aquí está la sección pertinente de la especificación CSS2: 6.3 The @import rule.

Answer 2

Ok, así que Firefox no le gusta el método que elegí, favoreciendo:

@import 'stylesheet.css' media_type; 

Pero IE7 no entiende este método, pero esto podría ser bueno:

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