Crear hoja de estilo CSS con javascript

[Pantaláimon]

Buenas,

Me interesaría saber cómo crear una hoja de estilo con javascript, insertarla en head y luego obtener un valor para poder referenciarla y usarla a través de document.styleSheets. He pensado lo siguiente:

1) Creo un elemento link y le inserto el atributo type="text/css"
2) Inserto dicho elemento link usando document.head.appendChild( ... )
3) Guardo en una variable indice el valor document.styleSheets.length - 1 ( ¿seria la referencia a la ultima hoja de estilos insertada )
4) Inserto en doucment.styleSheets[indice] varias reglas mediante el método insertRule

Dudo, sobretodo, de si el punto 3 es correcto. Pues no se si del punto 2 se deduce que se insetará una nueva hoja de estilos al final de document.styleSheets . También he leído que StyleSheetList( la clase de document.styleSheets ) no tiene metodo para insertarle hojas de estilo.

También dudo en el punto 1. Pues no sé que comportamiento tendría una hoja de estilo que no haga referencia a ningún fichero en concreto con href.

Edit:
Con códigos como estos puede verse que añadir un link a document head no afecta a document.styleSheets:

Código Javascript:

console.log( document.styleSheets.length );
    css = document.createElement( 'link' );
    css.setAttribute( 'type', 'text/css' );
    document.getElementsByTagName( 'head' )[0].appendChild( css );
    console.log( document.styleSheets.length );
 

Un saludo y gracias!

[Pantaláimon]

Bueno,

Después de buscar y buscar información he conseguido crear una función createStyleSheet que funcione para algún caso.

Código Javascript:

if(typeof document.createStyleSheet === 'undefined') {
    document.createStyleSheet = function(href) {
            if(typeof href !== 'undefined') {
                var element = document.createElement('link');
                element.type = 'text/css';
                element.rel = 'stylesheet';
                element.href = href;
            }
            else {
                var element = document.createElement('style');
                element.type = 'text/css';
            }
            console.log( element );
 
            var index = document.styleSheets.length;
            document.getElementsByTagName('head')[0].appendChild(element);
            
            //comprobar si index document.styleSheets tienen los valores correctos
            console.log( index );
            console.log( document.styleSheets );
 
            //devolver referencia a hoja de estilos insertada
            var sheet = document.styleSheets[index];
            return sheet;
    }
 

Es una función que añado a document tal que si le paso por parametro la localizacion de un fichero css me lo carga. En caso de no pasar ningún parametro me crea un elemento style. La función retorna la hoja de estilos insertada para luego modificarla insertando o removiendo reglas css a voluntad.

La cosa es que soy bastante quisquilloso y me gusta probar si dicha función funciona como debería funcionar para todos los casos. Lastimosamente he encontrado almenos un caso en la que no funciona correctamente:

Código Javascript:

window.onload = function() {
    document.createStyleSheet( 'css/test.css' ); // cargar css externo
    var sheet = document.createStyleSheet(); // crear css anonimo
    sheet.insertRule('h1 { color: red; }', 0 );
    console.log( sheet );
}
 

Aquí el error que me manda por Chrome:

Código BASH:

<link type="text/css" rel="stylesheet" href="css/test.css">
1 insert_text.js:33
StyleSheetList {0: CSSStyleSheet, length: 1, item: function}
 insert_text.js:34
<style type=&#8203;"text/​css">​</style>​
 insert_text.js:27
1 insert_text.js:33
StyleSheetList {0: CSSStyleSheet, length: 1, item: function}
 Uncaught TypeError: Cannot call method 'insertRule' of undefined
 

Parece ser que cuando inserto un elemento link o style en head, no se actualiza directamente la lista document.styleSheets. Veo que quizá podría solucionarlo usando el truco de setTimeout( .., 0 ) después de insertar el elemento. Sin embargo este código:

Código Javascript:

var sheet = document.styleSheets[index];
return sheet;
 

debería estar dentro de setTimeout. Y a mi me sobrepasa cómo poder insertar un return dentro de setTimeout.

PD.: Normalmente se aprende mucho de los pequeños baches que te vas encontrando pero para un novato como yo en Javascript esto empieza a parecerme frustrante. Parezco un imán de bugs.

Un saludo y gracias!

[marlanga]

Usa callbacks, que para eso están.

Código Javascript:

if(typeof document.createStyleSheet === 'undefined') {
                document.createStyleSheet = function(param){
 
                    var index = document.styleSheets.length;
                    var head=document.getElementsByTagName('head')[0];
                    if(typeof param == 'string')
                    {
                        var element = document.createElement('link');
                        element.type = 'text/css';
                        element.rel = 'stylesheet';
                        element.href = param; 
                    }
                    else
                    {
                        var element = document.createElement('style');
                        element.type = 'text/css';
                    }
                    head.appendChild(element);
                    function loaded(){
                        if (typeof param != 'function') return;
                        if (document.styleSheets.length==index)
                        {
                            setTimeout(loaded,1);
                        }
                        else
                        {
                            param(document.styleSheets[index]);
                        }
                    }
                    loaded();
                    console.log( element );
                }
            }
            window.onload = function() {
                document.createStyleSheet( 'test.css' );
                document.createStyleSheet(
                    function(sheet){
                        sheet.insertRule('h1 { color: red; }', 0 );
                    }
                );
            }
 

[Pantaláimon]

Hola marlanga.

Quizá aún no sé como funcionan los callbacks y por eso pregunto algo de perogrullo. Pero al añadir un console.log al final del código para comprobar que document.styleSheets tiene los datos correctos me encuentro que no es así.

Código Javascript:

window.onload = function() {
    document.createStyleSheet( 'css/test.css' );
    document.createStyleSheet(
        function(sheet){
            sheet.insertRule('h1 { color: red; }', 0 );
        }
    );
    console.log( document.styleSheets );
}
 

Esta es la salida de la consola:

Código Javascript:

<link type="text/css" rel="stylesheet" href="css/test.css">
<style type=&#8203;"text/​css">&#8203;</style>&#8203;
- StyleSheetList {0: CSSStyleSheet, length: 1, item: function}
   + 0: CSSStyleSheet
   - 1: CSSStyleSheet
      - cssRules: CSSRuleList
         - 0: CSSStyleRule
            cssText: "h1 { color: red; }"
            parentRule: null
            parentStyleSheet: CSSStyleSheet
            selectorText: "h1"
            style: CSSStyleDeclaration
            type: 1
            __proto__: CSSStyleRule
         + 1: CSSStyleRule
         + 2: CSSStyleRule
         + 3: CSSStyleRule
         + 4: CSSStyleRule
         + 5: CSSStyleRule
         + 6: CSSStyleRule
         + 7: CSSStyleRule
         + 8: CSSStyleRule
         length: 9
         __proto__: CSSRuleList
         disabled: false
         href: "http://js.test/css/test.css"
         media: MediaList
         ownerNode: link
         ownerRule: null
         parentStyleSheet: null
         rules: CSSRuleList
         title: null
         type: "text/css"
         __proto__: CSSStyleSheet
      + 2: CSSStyleSheet
         cssRules: CSSRuleList
         length: 0
         __proto__: CSSRuleList
         disabled: false
         href: null
         media: MediaList
         ownerNode: style
         ownerRule: null
         parentStyleSheet: null
         rules: CSSRuleList
         title: null
         type: "text/css"
         __proto__: CSSStyleSheet
         length: 3
         __proto__: StyleSheetList
 

En la linea 3 ya se ve la primera cosa extraña, pues indica que document.styleSheets.length vale 1. Sin embargo cuando se expande la descripción en la linea 49 se observa que ahora length toma el valor de 3.
En la linea 4 está la hoja de estilos por defecto de Chrome.
En la linea 5 está la hoja de estilos que hacer referencia al fichero css/test.css . Si se expanden la lista de reglas se ve que la primera( linea 7 a 14 ) se corresponde con la regla "h1 { color: red; }" que debería estar insertada en la hoja de estilos anónima.
Sin embargo, en la hoja de estilos anónima(linea 35) no hay ninguna regla insertada.

Un saludo!

[marlanga]

Parece que sabes programar. Mirando mi código y teniendo en cuenta las 4 últimas líneas que escribiste en tu segundo post, deberías deducir qué utilidad tienen los callbacks, cómo he implementado uno, y por qué tu último console.log no tiene los datos actualizados.
Por ejemplo ajax también funciona con callbacks. Es una idea, una técnica, que en entre otras cosas se usa para ejecutar código sobre algún elemento o dato que en el momento de tratarlos, aún no existen; no esperes encontrar un "objeto" llamado Callback ni nada parecido.

[Pantaláimon]

Yo, por la documentación que estoy viendo de momento, entiendo por callback el hecho de pasar una función como parámetro de otra. Lo que de momento me está costando es encontrar información sobre como los callbacks ayudan a sincronizar ciertos procedimientos. Pues, vaya, el problema que tengo parece ser de sincronización. Claro está que estoy descartando todo enlace de este tipo que se relacione con ajax pues me parece demasiado avanzado y quiero tener una base en javascript antes que entrar a mirar ajax.

De todas manera tengo que repasar y encontrar más información sobre como se implementa el flujo de eventos en javascript. Pues hasta que no tenga esto claro veo que voy a seguir teniendo problemas. Cuando tenga un rato supongo que organizaré mis dudas y si no encuentro información adecuada ya preguntaré algo por aquí.

Gracias.

[marlanga]

Es que haces cosas muy raras, entendiendo raro como "poco usual".
¿Cuál es la utilidad de crear CSS con javascript? Eso atenta contra todos los profesionales del diseño y maquetación de páginas webs xd.

Pero el problema no es la rareza de lo que haces, es que insertar algunos tipos de elementos en el DOM realmente hacen operaciones asíncronas. Creo que son scripts y CSS link, que se tienen que hacer dos operaciones: Insertar el nodo en el DOM, que es instantáneo, y procesarlo de forma asíncrona: se carga en memoria y se ejecuta el JS, y el CSS se carga en memoria y se aplican los estilos a los nodos que deban. Ese tiempo de proceso no es instantáneo, y dependerá de la potencia de la máquina que lo hace. No sé por qué no lo hicieron síncrono, tal vez porque cuando se cargan hojas de estilo o ficheros JS, el tiempo que tarde el servidor en devolver los recursos puede ser descabellado, y para no hacer la misma operación de forma síncrona y asíncrona, optaron por hacerlo siempre asíncrono.

Callback es hacer que una función acepte como argumento otra función, lo que permite que la primera función disparare la que le llega como argumento cuando quiera o pueda. jQuery basa casi toda su filosofía en llamadas callback.
En tu caso, tú no puedes insertar reglas CSS a un nodo recién metido, por lo que dije antes de que es asíncrono y tal. Pues con un callback bien pensado solucionas la papeleta y te olvidas. Yo le paso a createStyleSheet una función con las instrucciones de meter las reglas, y createStyleSheet ya las meterá cuando pueda sin que yo tenga que preocuparme.