En un principio, las páginas de internet sólo transmitían texto e imágenes y eran en blanco y negro o a lo sumo con muy pocos colores. Hoy no es de esta manera, la web evolucionó y el diseño gráfico no es la excepción. Vamos a profundizar un poquito en este tema: vamos a hablar de CSS
CSS es el lenguaje que se emplea para aplicar diseño visual a los elementos de nuestro documento .html. No es un lenguaje que presente una curva elevada de aprendizaje y posee una sintaxis sencilla. Las letras CSS hacen referencia a Cascade Style Sheets porque los estilos se van aplicando por orden de escritura desde el principio al final. Hoy día continúa en desarrollo pero podría decir que casi no existen limitaciones para diseñar y estilizar un sitio web
CSS: Solución a un gran problema
El .html nunca debe contener estilos. Para eso existen las hojas de estilo: la forma más adecuada de aplicar estilos es mediante ellas. Recordemos que el .html sólo debe contener la estructura semántica de nuestros documentos. Por lo tanto, aislar la presentación del mismo es ideal: permite paralelizar la semántica del diseño y que dos personas o más puedan trabajar cómodamente (Este caso no aplica para los correos electrónicos, pero es un caso aparte)Por otro lado, al tener asilada la presentación de la semántica, permite que, teniendo una sola hoja de estilos, apliquemos estilos idénticos en diferentes páginas y en todo nuestro sitio muy fácilmente Pensemos que aplicar un estilo antes era modificar cada hoja que lo usara: hoy modificamos un archivo externo y la solución es inmediata
¿Como empezamos a usar CSS?
- Estilo en línea: aplicamos bajo el atributo style el estilo para ese elemento. No es una manera recomendada, estructurada y óptima de dar formato a nuestros sitios, pero sí sencilla y rápida. No se recomienda usar esta metodología. Como mencionabamos antes, esta regla no aplica para los correos electrónicos, por lo que si queremos aplicarles estilos debemos hacerlos mediante estilos en línea
- Hoja de estilo interna: está incrustada dentro del <head>, marcada por la etiqueta <style>. De esta manera se separa la información de los estilos. Esta técnica tiene el mismo problema que los estilos en línea, deberiamos replicarlo en cada página
- Hoja de estilo externa: es un archivo de extensión .css diferente al archivo donde se almacena el código HTML. Esta es la forma más recomendada porque permite separar el estilo de la estructura
¿Cómo escribimos código .CSS?
La sintaxis de CSS puede resumirse de la siguiente manera:
- Selector
- Propiedad y valor
Propiedad y valor se refiere a que atributo de esos elementos será modificado y que valor se le establecerá. La lista de atributos CSS que pueden utilizarse puede encontrarse aquí
El mismo CSS funciona igual en todos los navegadores?
Hay muchas funcionalidades de CSS que no están disponibles en todos los navegadores y menos en todas sus versiones. Es ahí donde entran en juego los prefijos propietarios (-webkit-, -moz-, -o-, etc). Por suerte existen herramientas que nos permiten hacer compatibles nuestros códigos con todos los navegadores más usados
Para ser más específico hablemos de un caso en particular: múltiples columnas (column-count). Esta propiedad permite dividir y estilizar un texto en columnas
Vamos a can i use y buscamos la propiedad para ver su integración: link acá
La fila que nos interesa es: Current
Como vemos en el gráfico, todos los navegadores modernos y más usados ofrecen soporte para esta funcionalidad, pero algunos no de forma nativa, necesitan de un prefijo propietario (Señalado con una pequeña etiqueta de color amarillo). Este prefijo indica que es una propiedad en desarrollo o que quizás no forme parte del estándar y sea un experimento. Para usar esta propiedad y que funcione en todos los navegadores deberíamos usar un estilo similar a este:
Con -moz- le indicamos al motor de render Gecko que use la funcionalidad, y con -webkit- hacemos lo mismo pero para Webkit. En los demás navegadores, como IE desde su versión 10, la funcionalidad funciona sin ningún prefijo. Si seguimos mirando más arriba en esa misma columna, notamos que para las versiones 8 y 9 de internet explorer la propiedad no está presente. Si nuestro sitio debe ser compatible con estas versiones tendremos que lograr la funcionalidad de otra manera
Lo sé, es incómodo todo esto pero existen herramientas como prefix-free que nos facilitan este trabajo. Prefix free es un script que debemos importar ANTES de nuestros estilos y se encargará de agregar automáticamente los prefijos propietarios. Siguiendo el ejemplo anterior, bastaría con escribir algo como esto:
Y como si fuera poco, existe CSS3 PIE que logra que los features de CSS3 estén disponibles en IE6, 7, 8 Y 9! (Magia negra?)
Espero que esto sirva como un buen comienzo
Twittear Seguir a @3p_ar
