Devolución de metadatos con CSS

Question

Tengo una hoja de estilo CSS que se crea dinámicamente en el servidor y se devuelve mediante una etiqueta <link>. ¿Es posible devolver algún metadato con esta hoja de estilo que pueda leer con JavaScript?

(El caso de uso:. La hoja de estilo que vuelvo es una combinación de varios más pequeños Quiero mi código JavaScript para poder detectar los cuales se incluyeron los más pequeños.)

que considera la adición de algunas propiedades personalizadas a una elemento:

body { 
    -my-custom-prop1:0; 
    -my-custom-prop2:0; 
} 

Pero cuando trato de leer estos con:

window.getComputedStyle(document.body)['-my-custom-prop1'] 

no se devuelven. ¿Alguna otra idea como?

EDIT: Terminé teniendo un enfoque ligeramente diferente. En lugar de agregar una etiqueta <link>, hice una solicitud AJAX para obtener la hoja de estilo y agregué su texto a una etiqueta <style>. De esta forma podría usar los encabezados de respuesta HTTP para incluir metadatos. Por supuesto, esto no funcionará en todos los dominios, como lo hace una etiqueta <link>.

Answer 1

See example of the following →

Aunque creo que es poco aconsejable esta técnica, aquí hay algo que he desarrollado que he probado para funcionar en Chrome, FF, Safari y IE8.

Primero, seleccioné la propiedad list-style-image que se utilizará para almacenar los metadatos, ya que puede contener cualquier cadena en el parámetro url() y aún así no iba a usarse bajo ninguna circunstancia normal en el CSS del cuerpo.

Luego implementé una función común de navegador cruzado a getComputedStyle ya que no está disponible en todos los navegadores.

Entonces Analizada la propiedad de retorno para obtener sólo los datos dentro del url(''), lo que resulta en estas funciones:

var getStyle = function(el, cssprop) { 
    if (el.currentStyle) { 
     return el.currentStyle[cssprop]; 
    } else if (document.defaultView && document.defaultView.getComputedStyle) { 
     return document.defaultView.getComputedStyle(el, "")[cssprop]; 
    } else { 
     return (el.style) ? el.style[cssprop] : 0; 
    } 
}; 

var pullCSSMeta = function() { 
    var aMeta = getStyle(document.body, 'listStyleImage').split('/'), 
     meta = aMeta[aMeta.length - 1]; 

    return decodeURIComponent(meta.substr(0, meta.length - 1).replace(/"$/,'')); 
}; 

Si necesita almacenar más de una pieza de información que podría comas delinear los datos o potencialmente incluso almacenar una cadena JSON. Espero que tengas una buena razón para querer hacer esto, ya que creo que hay mejores formas de almacenar metadatos ... ¡pero ahí lo tienes!

See example →

Answer 2

El objeto devuelto en realidad representa los valores utilizados de CSS 2.1, no los valores calculados. https://developer.mozilla.org/en/DOM/window.getComputedStyle

Usted puede ser capaz de interrogar a estos estilos a través de otro método sin embargo: http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

Answer 3

me hizo una related question hace un tiempo. Resulta que tienes que analizar manualmente el texto de la hoja de estilo con javascript. Decidí que no valía la pena molestarme y encontré una solución diferente a mi problema. Podrías usar algunos trucos ingeniosos, como las propiedades estándar en las clases falsas, supongo.