Editor CSS

Resumen

Esta aplicación nos permite editar las propiedades CSS de los elementos. No es un editor HTML, sino sólo un recurso para estudiar CSS, especialmente las nuevas propiedades de CSS3. Con objeto de poner las propiedades en funcionamiento podemos aplicarlas a unos elementos <div> o <span> dentro del contenedor anterior con borde azul, permitiendo agregar elementos, eliminarlos o ver el código HTML. Pero la aplicación que presento es la que se muestra en el emergente recopilando las propiedades de un elemento, aplicación que se gestiona enteramente en el módulo css-prop.js con el estilo en css-prop.css.

Con un click accedemos a un contenido emergente que recopila el estilo del elemento seleccionado. Diferencia los valores con color marron para el estilo en línea, es decir, el incluido en el atributo style. Es ese estilo el que usaremos para las ediciones. El resto de los valores en color azul lo obtiene del estilo computado inicial. Este puede ser estilo heredado, declarado en reglas (elementos <style> o archivos css vinculados) o estilo por defecto de los elementos. Si se vacía un valor se aplicará de nuevo el estilo computado inicial.

Las propiedades CSS se agrupan en módulos tal como se especifican en CSS3. Estos módulos de datos se incluyen en archivos JS separados. Así por ejemplo el módulo Modelo de cajas básico (Basic Box Model) declara cosas como width, height, padding, margin y otras. Todos los módulos se cargan con AJAX, pero hay algunos módulos incluidos dentro base.js que contienen estilos básicos y que se cargan al arrancar inicialmente la aplicación. Otros como fonts.js, line.js o marquee.js se cargan a petición del usuario. Esto lo hago para evitar traer un volumen excesivo de datos con la carga inicial de la página. Además el objetivo no es incluir de entrada todos los módulos CSS3 (faltan muchos aún que agregar), sino irlos incorporando a medida que los vaya estudiando. Así podré en un futuro agregar un nuevo módulo sin tener que modificar la aplicación.

Por otro lado todos los módulos de datos se solicitan siempre al servidor evitando el cacheado del navegador, con lo que siempre tendremos la última versión de los datos. Es necesario pues además de incorporar nuevos módulos también habrán propiedades que pueden cambiar, o hay que eliminarlas pues se declaran obsoletas o incluso agregar nuevas a un mismo módulo que pase a un nivel superior.

Otra utilidad es que permite incorporar imágenes de fondo en la propiedad background-image y también para bordes con imágenes (border-image-source). Si el navegador soporta File Reader podemos incoporarlas desde el ordenador gestionándolas en base64.

Se señalan con color rojo las propiedades no soportadas o con color naranja las soportadas con prefijo. Vinculado en el nombre de la propiedad hay un acceso a referencias a la misma tanto en este sitio como en las especificaciones oficiales del W3C. En cada propiedad se acompañan unos iconos para acceder a una lista de valores de muestra. Así podemos ver ejemplos visuales de aplicación de los distintos valores que podemos aplicar a una propiedad. Al pulsar sobre el ejemplo de muestra accedemos al código HTML.

Recursos

Otros recursos que se usan en la aplicación y que se exponen en este sitio:

• general.js que contiene funciones de uso general para todo el sitio.
• Usa el cubo de color y la paleta de color.
• Usa contenedores emergentes.

Puede acceder al código original completo con el botón Código de la barra superior de esta página.