IceBeat

Una de las mejores formas de entender los plugins en CSSing es creando un ejemplo y para ello vamos a crear un plugin para definir variables propietarias.

Los plugins en CSSing funcionan definiendo acciones y elementos que llaman a una función, recibiendo una serie de parámetros y devolviendolos analizados.

Para crear una regla arroba tenemos que definir el elemento @define, para ello lo añadimos a la clase con la función add_atrule.

CSSing:add_atrule('define','dml_atrule_define'); 

Aquí podemos ver como el primer parámetro es el nombre de la regla y el segundo la función que se llama.constancia de la regla @define.

¿Que es lo que envía CSSing?

CSSing devuelve un array con información sobre esa regla, es decir, claves, pseudoclasses, contenido, tipo de regla… Veamos un print_r.

Ejemplo:

@define {
rosa: #d8327b;
gris: #808080;
}
Array
(
[atrule] => define
[pseudoclass] => Array()
[precontent] => 
[key] => 437b9d7bb6f58
[content] => 
rosa: #d8327b;
gris: #808080;
[type] => property
)

Algunos parámetros aparecen vacíos porque no los contiene la regla.Existen 3 tipos de reglas, inline que es el tipico @import,property como es este caso y block como las regla @media.

Ahora vamos a ver el código para conseguir el contenido.

global $dml_define_array;
$dml_define_array = array();
function dml_atrule_define($params) {
global $dml_define_array;
        extract($params);
        switch($type) {
            case 'property': $dml_define_array = array_merge($dml_define_array,CSSing::get_propertys($content)); break;
        }
        return false;
    }

Al llamar a la función comprobamos que el tipo sea valido y si es así parseamos el contenido para conseguir un array con las propiedades.

Con esto tenemos el 50% del plugin, ahora nos quedaría sustituir los valores en el CSS, para ellos utilizamos la acción preblock que se llama después de analizar las reglas arroba y antes del parseo de bloques CSS.

CSSing::add_action_preblock('define','dml_action_preblock_define');
function dml_action_preblock_define($css_string) {
        global $dml_define_array;
        if(!count($dml_define_array)) return $css_string;
        foreach($dml_define_array as $var=>$value) {
            $css_string= str_replace('define('.$var.')',$value,$css_string);
        }
        return $css_string;
    }

En este caso la función recibe una cadena y devuelve el CSS parseado.

Puede parecer algo complejo por el desconocimiento de las acciones y los elementos pero se pueden conseguir bastantes cosas con muy pocas lineas.

Y con esto hemos conseguido crear un plugin para CSSing.

Este es mi nuevo proyecto y es el hermano mayor de CSScompiler . CSSing es una nueva forma de ver las hojas estilos, usa la misma sintaxis que CSS pero interpreta y genera el código necesario para interactuar con otros lenguajes.

Gracias a su sistema de plugins puedes crear tus necesidades y aplicarlas de la forma mas sencilla en tu CSS. Obviamente tiene ciertas limitaciones pero con un poco de imaginación nada es imposible.

Entre los plugins que he creado puedes añadir textos a los input, aplicar eventos de ratón a divs, aplicar un clase según el navegador, definir constantes para usarlas en el CSS.

Puedes mirar una demo y ver en acción algunos plugins.

Posdata: Pronto listo para descargar.

Veo en stylegala y cssbeauty un articulo para poder incluir estilos según el navegador del usuario, para ello usa PHP y el USER_AGENT.

Ya decía yo que la idea de averiguar el navegador era interesante para usarlo con CSS.
Aunque el articulo me parece fenomenal tiene un gran inconveniente, y es que hace falta saber PHP para aplicar estilos según el navegador.

Aunque CSScompiler no tiene soporte para el OS creo que mi idea de la pseudoclase es mucho mas amigable que andar jugando con código.
Como mi ingles es pésimo y tampoco tengo traducido CSScompiler no puedo escribir un comentario, pero no estaría nada mal que probasen el script.

Método stylegala:

body

    {
    background: url(<?php
    if ($o  "WIN" && $b  “IE” && $v < 6) echo “background.gif”;
    else echo “background.png”;
    ?>);
    }

Método CSScompiler:

body { background: url(background.png); }
body:ie6, body:ie5.5, body:ie5 { background: url(background.gif); }

Como en el curro tengo que estar mas pendiente de la correcta visualización de los diseños en los navegadores me he fijado en algunas cosillas.

Si te das cuenta en el IE según va bajando la versión ves como se va perdiendo el soporte del CSS, hasta el IE 3 que ese ni quiere mostrar nada decente.

En versiones antiguas del IE se puede ver como apenas rulan las listas y su manipulación, me he dado cuenta que si manipulas una lista y tienes margins o paddings, incluso los bordes estos desaparecen, no existen para el.

También en el tema de imágenes, si dentro de un párrafo metes una imagen con un float:left para alinear a la izquierda no dudes en usar margins para separarla del texto pues el padding aunque rula en mozilla en los demás navegadores se hace la picha un lío.

Hay que tener cierto cuidado con los margin y padding, siempre los suelo poner a 0 y a partir de esa medida empezar a configurarlo.
Siempre sale la típica pregunta de porque las listas tiene un margin-left diferentes en los navegadores y lo que en realidad sucede es que cada uno pone un valor por defecto y eso jode el tinglado.

Bueno y ya que estamos, sobre el centrado de una capa, eso de los margin:auto; es una autentica gozada pero va cuando realmente quiere, normalemente lo suelo hacer para centrar una imagen, uso un display:block; y luego pongo los margin a auto.Para centrar una capa la cosa es diferente, esta el tipico Hack de centrar el texto en el body y luego en la capa cambiarlo.

Conclusion: Jode diseñar para tantos navegadores pero me parece a mi que gana la batalla uno que yo me se… grrrr

Cuando queremos hacer referencia de un estilo CSS a un tag determinado hay muchas formas de hacerlo, una de ellas esta en apuntarlo con un id o una class, a simple vista parece lo mismo pero existe una gran diferencia, el id es un identificador unico y solo puede utilizarse en un tag, mientras que las clases se pueden aplicar a todos los tags que queramos.Parece una tonteria pero cuando quieres hacer uso del ancla es algo muy importante.

Normalmente para tener diseños muy manejables se suelen usar muchos class e ids, pero si los usamos mal lo unico que conseguimos es un codigo basura.Lo mejor en estos casos es usar tag semanticos y las anidaciones en el CSS.

Ejemplo: una cabecera tipica

<div id="header">
<h1>Titulo</h1><h2>eslogan</h2>
</div>

En el CSS

div#header {}
div#header h1 {}
div#header h2 {}

Solo usando un identificador ya tenemos el ancla y la guia de inicio para darle estilos a los tag que estan en su interior.Con esto te ahorras bastante codigo html aunque luego el CSS sea mucho mas grande (pero no tanto). A veces no es bueno usar tanto el span cuando seguro que lo podemos sustituir por algo mucho mas semantico y que nos sirva de apoyo para el CSS.