CSS analizador / abstracter? Cómo convertir la hoja de estilo en objeto

¿Ya existe un método estándar o confiable para un marco javascript como jquery para analizar una hoja de estilo en un objeto?

Dos razones por las que me pregunto:

  1. He visto un par de preguntas en las que alguien quería saber cómo obtener el atributo de estilo establecido por la hoja de estilo para un selector, no lo que el selector finalmente heredó.

  2. Si Sizzle hace lo que se supone que debe hacer, esta podría ser una solución para asegurarse de que una hoja de estilo se haya procesado correctamente en todos los navegadores. Básicamente, haga que jquery analice la hoja de estilo y establezca todos los atributos manualmente (tal vez según el navegador o los selectores conocidos no implementados) de esa manera los diseñadores / desarrolladores simplemente escriben una hoja de estilo CSS3 que es compatible con versiones posteriores y hacen que jquery / sizzle haga el trabajo que ganó el navegador ‘t

El único inconveniente que veo es que esto todavía no implementará los atributos de CSS3, pero es un comienzo.

En el lado del cliente, una hoja de estilo ya es un objeto; se analiza en un árbol cuando se carga la página.

Digamos que tienes una página HTML que comienza con

     

y global.css contiene las lineas

 #page { background-color: #fff; margin-top: 20px; margin-bottom: 20px; text-align: left; width: 100%; margin-top: 20px; padding: 0px; min-width: 900px; border: none; } #header { background-color: transparent; } #main { background-color: transparent; margin-left: 10px; margin-right: 10px; padding: 8px 0px 8px 0px;} #sidebar { margin-right: 12px; } 

Luego, para encontrar lo que está configurado para background-color de background-color de #page , deberías escribir document.styleSheets[0].cssRules[0].style.backgroundColor , que devolvería #fff (o rgb(255, 255, 255) en algunos navegadores, creo).

Otras cosas útiles asumiendo las hojas anteriores:

 document.styleSheets[0].cssRules[3].cssText //"#sidebar { margin-right: 12px; }" document.styleSheets[0].cssRules[2].selectorText //"#main" 

Si tenía un selector más complejo, como #main div.header a, #main div.header a:visited , la propiedad de texto del selector devuelve todo, no solo el primer bit.

Su pregunta específica es “¿Cómo puedo averiguar qué se establece en la hoja de estilo para un selector determinado”. Aquí hay una forma de aproximarlo:

 function findProperty(selector) { rules = document.styleSheets[0].cssRules for(i in rules) { if(rules[i].selectorText==selector) return rules[i].cssText; } return false; } findProperty('#sidebar'); //returns "#sidebar { margin-right: 12px; }" 

La cuestión es que el árbol CSS al que tienes acceso de esta manera ya ha sido analizado por el navegador (de ahí el “aproximado” arriba). Si estás en Firefox, no verás ningún estilo de -webkit porque -webkit simplemente los -webkit . Varios navegadores también tienden a tener su propia forma de mostrar los colores (como se muestra arriba; si el archivo .css real tiene un conjunto de colores determinado en #fff , y lo verifica en JavaScript después de analizarlo, es posible que recupere #fff , #ffffff o rgb(255, 255, 255) ).

Lo anterior le dirá lo que su navegador ve esa hoja de CSS como; Si desea saber qué caracteres ASCII específicos estaban contenidos en el archivo .css inicial, la única forma confiable es mirar el archivo en sí, AFAIK.

Una referencia para el objeto de hoja de estilo está disponible aquí .

Interesante pregunta. Hay un analizador de jquery en el sitio de Daniel Wachsstock. http://bililite.com/blog/2009/01/16/jquery-css-parser/

Lamentablemente, puede que no sea lo que está buscando … pero vale la pena intentarlo. La siguiente descripción está tomada de su sitio:

En jQuery llamas $(selector).parsecss(callback)

que escanea todos y elementos en $ (selector) o sus descendientes, analiza cada uno y pasa un objeto (detalles a continuación) a la función de callback.

Por ejemplo, crear un archivo CSS:

 .gallery a { -jquery-lightbox: {overlayBgColor: '#ddd'} } 

y te dan

 $('.gallery a').lightbox({overlayBgColor: '#ddd'}); 
    Intereting Posts