¿Las consultas de medios funcionan en MediaWiki?

Question

Estoy tratando de obtener un aspecto receptivo trabajando en MediaWiki con consultas de medios, y estoy solucionando problemas de comportamiento extraño.

Si añado un div de prueba a una página wiki:

<div id="testing">TESTING</div> 

y luego añadir una consulta de medios:

@media screen { 
    #testing {background-color: green;} 
} 

... a varios lugares, el estilo sólo se aplica en ciertos navegadores . Por ejemplo:

Si lo añado al expediente de la piel activa "screen.css", donde viven todos los otros estilos de trabajo:

• iPad: NO
• iPhone4: NO
• Chrome 20.0 XP + Mac: NO
• Firefox 14.0.1 XP + Mac: SÍ

Si lo añado al expediente de la piel común "shared.css", que se aplica a cada piel:

• iPad: NO
• iPhone4: NO
• Chrome 20.0 XP + Mac: NO
• Firefox 14.0.1 XP + Mac: SÍ

Si lo añado a la wiki de página: "MediaWiki Common.css":

• iPad: SÍ
• iPhone4: SÍ
• Chrome 20.0 XP + Mac: SÍ
• Firefox 14.0.1 XP + Mac: SÍ

N. B.: una declaración de estilo regular funciona como se esperaba en todas estas ubicaciones. Solo cuando se envuelve en una consulta de medios en un archivo externo aparece la rareza. Aparentemente es un problema del navegador, compuesto por un problema de manejo del estilo de MediaWiki. ¿Qué está haciendo Firefox de manera diferente?

Al examinar la página con la Consola para desarrolladores de Chrome me di cuenta de que los estilos parecen importados por "load.php" como una gran línea conjunta de declaraciones de estilo, incluida mi consulta de medios; pero parece que simplemente no se está aplicando, incluso en los navegadores que lo soportan.

¿Alguien puede arrojar algo de luz sobre este comportamiento? Preferiría trabajar en hojas de estilo independientes en lugar de en el editor wiki.

Actualización:

Me he dado cuenta también de que al inspeccionar el elemento en la consola Web Firefox, el estilo figura entre los estilos activos, así:

load.php:1 @media screen 
#testing { 
    background-color: green; 
} 

Al inspeccionar el elemento de la Del mismo modo, en el navegador de elementos de Herramientas de desarrollo de Chrome, el estilo no aparece en ninguna parte.

Actualización 2:

Si sustituyo esta línea en mi tema:

<link rel="stylesheet" href="/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cskins.customskin&amp;only=styles&amp;skin=customskin&amp;*" /> 

con un enlace directo con el tema:

<link rel="stylesheet" href="wiki/skins/customskin/screen.css" /> 

Los estilos se aplican adecuadamente en todas partes .

Answer 1

Hay un par de formas de hacerlo además de agregar las consultas a Common.css. Ambas formas implican eludir el preprocesamiento de estilo de Resource Loader de MediaWiki, nuevo a partir de la versión 1.17.

Método 1:

Según this thread:

Para cargar un archivo css sola (en bruto, sin minimización y otros procesos ResourceLoader): Uso OutputPage :: addStyle (url, medios de comunicación, condición) donde URL apunta a un archivo directamente. Por ejemplo:

$out->addStyle('modules/IE70Fixes.css', 'screen', 'IE 7');

por lo que añadir esta línea en el fichero de /skins/customskin.php, en la función initPage():

$out->addStyle('customskin/customstyle.css', 'screen');

Método 2:

De acuerdo con una respuesta de un desarrollador de MediaWiki a this bug I filed:

Si estás en una piel y desea algo que se aplica a un tipo específico de los medios , lo puso en un archivo separado y declarar el tipo de soporte en la definición del recurso. O bien u omita el tipo de medio en la definición de recurso y podrá usar bloques @media.

Así, en los recursos/resources.php, en orden al constructor de la piel, reemplace esta línea:

'styles' => array('customskin/customstyle.css' => array('media' => 'screen')), 

Con esta línea:

'styles' => array('customskin/customstyle.css'),