27-01-2012

CSS Cascading Style Sheets (Hojas de Estilo en Cascada)

Si bien las hojas de estilo son algo básico en el trabajo de HTML actual, es muy poca la gente que consigue recordar otras cosas básicas, como los nombres de sus partes y algunos datos útiles, como la especificidad.

Recuerdo haber leído algo acerca de los CSS cuando estaba navegando Cnet.com en algún minuto del año 96-8. Esa primera vez que vi las definiciones y un CSS descrito, no entendí nada. Para ser franco, tampoco entendía mucho el HTML así que la relación entre uno y otro me hacía menos sentido aún y las ventajas de tener la “presentación” separada de la “programación” para mi era sólo una frase retórica.

Durante el año 2001 ya estaba trabajando en una empresa de desarrollo de soluciones de ingeniería, lo que me permitió dedicarme tiempo completo a comprender tanto el HTML como el CSS. Claro, siempre desde el punto de vista de diseñador, que le interesa que las cosas funcionan y poco le importa el cómo. Sin embargo, a medida que ha pasado el tiempo, más interesante se vuelve el cómo y el conocerlo te entrega el poder de manipular las tecnologías a tu antojo. No saberlo, o denegar su importancia sólo te permite quedarte en la vereda del que se admira con un efecto a causa de su espectacularidad, obviando la belleza que implican las soluciones pequeñas que le dan sentido al comprender el sistema.

CSS – Reglas

Los CSS funcionan haciendo declaraciones, las declaraciones son reglas y cada una funciona en base a 2 partes:

  1. Selector
  2. Bloque de Declaración

Selector

Especifica a qué elementos del HTML va a dar estilo la regla.

Bloque de Declaración

Especifica el estilo que será aplicado a los elementos que la regla seleccione.
El bloque de declaración contiene una o más declaraciones.
Una declaración está compuesta por el nombre de una propiedad y un valor.

Ej: Declaración de CSS

 

 

 

 

 

Especificidad

Muchas veces, cuando se hacen las declaraciones de CSS y se está trabajando en una plataforma que no fue desarrollada inicialmente por uno, pasa que revisamos el efecto de nuestro trabajo en el navegador favorito y ¡Sorpresa! No hay nada. Revisamos y revisamos y la declaración está ok, el navegador es el apropiado, etc. Borramos el caché, reiniciamos el navegador. Incluso, reiniciamos el computador (absolutamente ridículo), y nada. ¿Por qué si mi declaración es la apropiada no estoy consiguiendo el efecto deseado?
La respuesta corta, posiblemente un problema de especificidad.
¿Qué?

En una declaración de CSS, la idea de “cascada”, es justamente el hecho de que la declaración hecha al principio, pueda ser complementada por posteriores adiciones o modificaciones a dicha declaración. Es decir, si en la línea 1 de mi hoja de estilo tengo la siguiente declaración:

p { color: red; font-weight: bold; }


Todo los párrafos de la página serán rojos y en negrita. Si en la línea 5 tengo esta declaración:



div p { color: green; font-size: 10px; }


Todos los párrafos de la página serán rojos y en negrita excepto los que vayan dentro de un DIV, que serán verdes, en negrita y tamaño 10 pixeles.



Hasta aquí no hay problema, la cascada funciona perfecto. Pero, qué pasa si la declaración de la línea 1 es:



#rojos p { color: red; font-weight: bold; }


Todos los párrafos serán rojos y en negrita cuando vayan dentro de un elemento con ID=rojos. Si ese ID es el de, para este ejemplo, el BODY, de tal manera que afecta a toda la página, entonces, cuando en la línea 5 coloquemos:



div p { color: green; font-size: 10px; }


Pasará que nuestro resultado será: texto de color rojo, en negrita y cuando vayan dentro de un DIV, será en tamaño 10px, pero ¡ROJOS!



¿Por qué? Especificidad.



A pesar de que según la cascada debería reemplazarse el valor “red” por el de “green”, sólo funciona cuando la especificidad de la declaración tiene valor predominante. En el caso de no ser así, por ser más específica la primera declaración, entonces la segunda es “recesiva”. ¿Cómo? Para entenderlo, los valores de las declaraciones se dan de esta forma:



# > .xxx > tag    /    ID > CLASE > ELEMENTO

(el ID de un elemento es mayor que la CLASE de un elemento y este a su vez, mayor que el ELEMENTO).



Si en un ID declaro color negro, en una CLASE declaro color verde y al ELEMENTO lo declaro con color azul, existiendo los 3 selectores, el color va a ser siempre NEGRO. Porque el ID predomina por sobre la CLASE y el ELEMENTO.




Para comprenderlo mejor, y poder calcular la especificidad cuando hay múltiples selectores, se usa la siguiente fórmula:



ELEMENTO = 1

CLASE = 10


ID = 100



De esta forma, en nuestro ejemplo del ID “rojos” sobre el párrafo, tenemos:



#rojos p { … }

ID + ELEMENTO = 100+1 = 101 (valor de especificidad)



En nuestro ejemplo comparativo siguiente, tenemos:



div p { … }

ELEMENTO + ELEMENTO = 1+1 = 2 (valor especificidad)



Por lo tanto, aunque nuestra segunda declaración, por selector debería haber pintado de verde todos los párrafos dentro de los DIV, por tener un valor de especificidad menor que la declaración anterior, en el conflicto gana dicha declaración. El conflicto no es en el tamaño ni en las negritas. El conflicto es en el color. La declaración 1 gana con 101 puntos contra 2 de especificidad de la segunda declaración.



Las declaraciones con muchos selectores son más difíciles de modificar cuando se está realizando un proyecto ajeno y cuesta encontrarlas de manera rápida. Por lo general, se descubren cuando se trata de modificar un ELEMENTO y ningún acercamiento parece afectarlo. Lo común es hacer una búsqueda en el CSS y podremos descubrir si existe una especificidad muy alta para algún ELEMENTO.



Ej:



ul li { … } = 2

ul ul li { … } = 3


ul.menu ul ul li { … } = 14


#main ul.menu ul ul li { … } = 114


#main.top ul.menu ul ul li { … } = 124



¡Happy Coding!



21-01-2012

Reglas de Contención en HTML

Suena raro. Pero tener una leve idea de qué significa puede ayudar desde el inicio de un proyecto a evitar cometer errores que invalidan las páginas una vez que continuamos el desarrollo.

Hay 3 tipos de elementos más o menos claros en la estructura del HTML:

  • Block Elements (elementos de bloque).
  • Inline Elements (elementos en línea).
  • Paragraphs (párrafos).

 

Los “Block Elements” se caracterizan porque ocupan todo el espacio horizontal disponible al ser usados (y no declarar su ancho) y, aunque tengan una sola letra en su interior, producen que cualquier elemento puesto a su lado, quede en la línea siguiente, aún cuando el elemento puesto sea un “Inline Element”. En resumen, es como agregar un “break” antes y después del elemento.

 

Los “Block Elements” característicos en HTML + HTML5* son:

Selector Uso en HTML
<article>* Contenido Artículo
<aside>* Contenido Aparte
<blockquote> Cita Larga
<body> Cuerpo de Página
<br> Salto de Línea
<button> Botón
<canvas>* Área de Dibujo
<caption> Table Caption
<col> Columna de Tabla
<colgroup> Grupo de Columnas de Tabla
<dd> Descripción de Definición
<div> División
<dl> Lista de Definiciones
<dt> Término de Definición
<embed> Contenido Externo
<fieldset> Etiqueta de Set de Campos
<figcaption>* Figure Caption
<figure>* Groups Media Content and Caption
<footer>* Sección o Pie de Página
<form> Formulario de Entrada
<h1–6> Niveles de Encabezado 1–6
<header>* Sección o Encabezado de Página
<hgroup>* Grupos de Encabezados de Información
<hr> Regla Horizontal
<li> Ítem de Lista
<map> Mapa de Imagen
<object> Objeto Embebido
<ol> Lista Ordenada
<output>* Formulario de Salida
<p> Párrafo
<pre> Texto Preformateado
<progress>* Muestra de Progreso de una tarea que consume tiempo
<section>* Sección en una Página Web
<table> Tabla
<tbody> Cuerpo de Tabla
<textarea> Área de Entrada de Texto de Formulario
<tfoot> Pie de Tabla
<th> Encabezado de Tabla
<thead> Encabezado de Tabla
<tr> Fila de Tabla
<ul> Lista Desordenada
<video>* Reproductor de Video

 

Luego, están los “Inline Elements” (no se si elementos en línea me suena bien), que no tienen saltos de línea antes ni después, es decir, no tienen “breaks” asociados al elemento y se pueden poner de forma adyacente (además no ocupan todo el ancho de lugar donde se encuentran). Son:

 

Selector Uso en HTML
<a> Enlace Anclado
<abbr> Abreviación
<address> Dirección Física
<area> Área en un Mapa de Imagen
<audio>* Contenido de Sonido
<bm> Texto en Negrita
<cite> Cita Corta
<code> Texto de Código
<del> Texto Borrado
<details>* Detalles de un Elemento
<dfn> Termino Definido
<command>* Botón de Comando
<datalist>* Lista Drop-Down
<em> Énfasis
<font> Apariencia de la Fuente
<i> Itálica
<iframe> Sub-Ventana en Línea
<img> Imagen Embebida
<input> Campo de Ingreso de Datos
<ins> Texto Inserto
<kbd> Texto de Teclado
<label> Etiqueta para un Elemento de Formulario
<legend> Título en un Set de Campo
<link> Referencia a un Recurso
<mark>* Texto Marcado
<meter>* Rango de Medida
<nav>* Enlaces de Navegación
<optgroup> Grupo de Opciones de Formulario
<option> Una Opción de un Drop-Down
<q> Cita Textual Corta
<small> Impresión Pequeña
<select> Lista Seleccionable
<source>* Recurso de Medios
<span> Formato de Estilo Localizado
<strong> Énfasis Fuerte
<sub> Subtexto
<summary>* Encabezado de Detalles
<sup> Supertexto
<tbody> Cuerpo de Tabla
<td> Dato de Tabla
<time>* Fecha/Tiempo
<var> Variable

 

Ahora, las reglas de contención.

 

  1. Block Elements, pueden contener otros Block Elements e Inline Elements.
  2. Block Elements, sólo pueden estar contenidos por otros Block Elements.
  3. Inline Elements, sólo pueden contener Inline Elements.
  4. Inline Elements, pueden ser contenidos tanto en Block como en Inline Elements.
  5. Párrafos, son Block Elements, pero no pueden contener otros Block Elements.

 

Estas 5 reglas (y un buen editor WYSIWYG, con CODESENSE) evitarán errores que terminan transformando la página completa en un documento ilegal, claro, a menos que uses HTML5 que prácticamente se las arregla solo.

 

Happy Design & Code!!

12-09-2011

Doctypes y HTML5

Un agrado. Trabajar ahora con HMTL5 nos da la magia de hacer una declaración para el Doctype de tamaño minúsculo.

Doctypes

Los Doctypes de trabajo anteriores pasaban por una cantidad increíble de declaraciones, desde los Doctypes estrictos (strict) y los relajados (transitional) e incluyendo los marcos (framesets). Aparte de ello debían contener la versión y tipo de documento al que se aludían, desde HTML4.01 al XHTML1 y XHTML1.1. Las distintas declaraciones incluían problemas graves por el simple hecho de agregar un elemento no permitido en el esquema (que obviamente está bien, pero visualizar la página en forma errónea en vez de no visualizarla es una opción que vale la pena pensarla). Incluso en ocasiones todo dependía del browser y cómo interpretaba la declaración del esquema.

Ahora eso se acabó.

Doctype HTML5

El Doctype de HTML5 es simple: <!DOCTYPE html>

Aparte de ser simple, las ventajas que tiene son muchas. Primero que nada es compatible con las versiones anteriores de los Doctypes. Segundo, es tan estricto o relajado dependiendo de lo estricto o relajado que sea uno con el código. Tercero, soporta el cierre de tags de XHTML. Cuarto, en los documentos de trabajo de HTML5 se incluyó una guía de qué debería pasar cuando se cometen ciertos errores en la sintaxis del HTML, por lo que los browsers muestran problemas consistentes con los mismos errores. Se acabó la época en que un browser mostraba el contenido bien porque ignoraba el error al visualizarlo, y en el otro todo se desarmaba porque sus instrucciones para el manejo de errores eran demasiado estrictas. Hoy, al fin, casi podemos hablar que tenemos estándares.

 

Salud por eso.

 

Technorati Tags: ,,,