@import 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 está siguiendo la especificación de 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 de la URI importada.

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

Answer 2

Bien, a Firefox no le gusta el método que elegí, a favor:

@import 'stylesheet.css' media_type;

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

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