El texto web tiene una estructura diferente a la de otros textos impresos. Para empezar, el texto web es breve y conciso, esto debido a que la mayoría de los usuarios de internet utilizan vista de “escaneo” para leer textos web. Visión de escaneo significa que el usuario pasará rápidamente sus ojos sobre el contenido web buscando frases, palabras o imágenes que le resulten atractivas, de modo que pocas veces se fija en la totalidad de la página de internet. Aprovechar la vista de escaneo le servirá para optimizar su contenido web y atraer mayor tráfico de usuarios a su página de internet.

Las características de un texto escaneado son:

El uso de palabras clave

Identificar las palabras clave de su página web le ayudará a orientar su contenido en torno a ellas. Existen muchas páginas que tienen contenidos de alta calidad y diseño pero cuentan con poco tráfico de usuarios, esto se debe en gran medida al mal uso y elección de palabras clave. Para tener una mejor idea de las palabras con mayor volumen de búsqueda, puede utilizar la herramienta de palabra clave de Google.

Subtítulos atractivos

La redacción de textos web requiere de contenidos concretos. Un artículo resulta más atractivo cuando se divide en varios artículos pequeños marcados con un subtítulo que resuma la parte más interesante de esa sección. De ese modo, el lector que busca determinada información podrá encontrarla más fácilmente y permanecerá más tiempo en el sitio leyendo.

Listados con viñetas

Hay información que puede presentarse de manera resumida y directa, donde no es necesario redundar o buscar tecnicismos para presentarla. Los listados con viñetas permiten reducir un poco la cantidad de palabras para presentar el mismo tema, además son más fáciles de leer.

Una idea para cada párrafo

Presentar una idea por párrafo es de gran ayuda para el escritor pues le permite ordenar claramente los pensamientos o la información que presenta y le brinda coherencia al artículo. Además, una idea por párrafo ayuda al lector a una mejor comprensión del tema.

Pirámide invertida de la información

La técnica de la pirámide invertida consiste en redactar el texto de manera que la parte más importante del artículo quede en la primera parte del artículo a manera de resumen y vaya disminuyendo en tono y en importancia al concluir el tema.

Palabras claras y concisas

Lo más importante en la redacción de textos de cualquier tipo es la utilización de las palabras, es necesario evitar las ambigüedades, los tecnicismos, las ideas inconclusas y las redundancias. El escritor debe buscar un estilo narrativo que sea accesible a cualquier usuario sin importar si la información del sitio web es industrial, científica o del medio del espectáculo.

Entre estas sencillas funciones que tenemos que saber realizar y aplicar desde un inicio, se encuentra la elección de tipografías para cada sección y parte de nuestras páginas.

Por coloquialismo, en este artículo nos referiremos a la tipografía como letra.

El uso inadecuado de fuentes puede causar la molestia visual de usuario, por lo que tenemos que ser muy precavidos al momento de elegir, en esta ocasión trataremos de nombrar algunas de las formas y prácticas más convenientes para obtener una tipografía que se adecue a cada situación u objetivo.

Define tu objetivo en la web

Primero que nada debemos tener bien en claro cual es el objetivo de nuestra página, cual queremos que sea la reacción del usuario al momento de leer el contenido que exponemos. No hay que olvidarnos nunca del objetivo de nuestro sitio, ya que nos guiará en los momentos donde tengamos que tomar las decisiones más importantes de adecuación y creación.

Al final sea cual sea nuestro objetivo, en base a él tendremos que llegar a un balance de legibilidad y amenidad, buscar que nuestra fuente sea lo suficientemente clara como para poder leerse y que al momento de leerse entregue de manera adecuada el mensaje. En pocas palabras, debemos de buscar un tipo de letra que sea apropiado para la audiencia y el mensaje.

Establece jerarquías en el texto

Debemos asegurarnos de tener muy buen conocimiento sobre la jerarquía que tiene el contenido de nuestro sitio, es decir, saber identificar que texto tomará más relevancia que otro y escoger un tipo de letra en base a esto.

Después de un análisis de jerarquía tú puedes llegar a la conclusión de cuántos tipos de fuentes necesitas, puede que tu página maneje únicamente encabezados y texto de contenido, pero por otro lado pueden existir sitios donde se requieran cinco distintas fuentes para cubrir encabezados, subencabezados, enlaces en barras laterales y demás cosas.

Claro muchas veces podemos recurrir a utilizar variaciones del mismo tipo de letra, ya sea con negritas, cursivas o manejando mayúsculas y minúsculas, y con esto basta para cubrir lo necesario. Para ello debes hacer este estudio, así sabrás si realmente cuantos tipos de letras necesitas y después podrás pasar a elegir cuales son las más adecuadas para cada nivel jerárquico.

Considera el trabajo de otros

Tenga en mente que quizás muchos ya pasaron por la situación en que tu te encuentras en este momento, es muy probable que algún desarrollador o diseñador ya haya encontrado una manera adecuada de combinar las tipografías que tu quieres manejar, por lo que no es necesario complicarnos la existencia tratando de reinventar la rueda.

Todos quisiéramos ser siempre creativos y entregar algo que sea innovador, pero muchas veces por tratar de llegar a eso terminamos con un producto que altera los nervios de varios y que solo nos hará perder visitas. No descartes tu creatividad pues de ella dependes, pero tampoco descartes el uso de algo que ya este probado, existen razones por las que varias fuentes son utilizadas con tanta frecuencia.

Obtén una segunda opinión

El obtener una segunda e incluso una tercera opinión sobre nuestro producto nos ayudará y beneficiará en gran medida, ya que un ojo imparcial evaluará lo que hicimos y nos permitirá darnos cuenta de muchas cosas que estamos dejando pasar. Incluso las cosas más obvias pudieron haberse dejado pasar por alto, no te confíes pensando que tu producto es perfecto, un par de ojos extra es fundamental para encontrar discrepancias.

Investiga bien el origen de la letra

En muchas ocasiones al utilizar una fuente sobre un sitio temático podemos estar cometiendo errores de precisión cultural, histórica o geográfica, para evitar esto no hay nada mejor que estudiar el trasfondo de una fuente.

Puede parecer exagerado el hecho de que necesitemos estudiar de donde proviene o de que manera se utilizaba dicha fuente, pero en muchas ocasiones esto puede resultar crucial para la apreciación de un sitio. Imaginen tener un sitio de comida mexicana que utilice como base la tipografía “Lithos”, comúnmente utilizada para textos en griego, al momento de leer el contenido del sitio puedes imaginar que este es un restaurante dirigido por personas que realmente no son mexicanas, lo cual te hará conciente o inconcientemente pensar que la comida no es lo suficientemente buena.

Ahora imagina un libro sobre la antigua Grecia que tenga en su portada el título escrito con letra de tipo “Trajano”, comúnmente utilizada para representar textos romanos, en ese momento puedes imaginar que el autor no tiene idea de lo que esta hablando, entonces si no lo hacemos para los libros, ¿Por qué si hacerlo en los sitios web?

Evita lo trillado

Si bien es necesario que la fuente que manejemos tenga relación con el contenido que se muestra en la página, siempre debemos evitar caer en lo trillado, o peor aún en uso de fuentes viejas o poco estéticas solo porque tienen relación con lo que hablo. Se puede dar el caso de que tengas un restaurante de comida griega pero no por eso tienes que manejar siempre la tipografía “Lithos”, busca alternativas que respeten el contenido.

Si haces una invitación a una fiesta no tienes que usar “Comic Sans” siempre, es más por favor no la uses nunca, si haces un sitio de temática Egipcia no tienes que usar la fuente “Papiro” para dar a entender tu punto. Si haces esta clase de cosas puedes dar la impresión de que no tomaste muy en serio tu trabajo y que en menos de 5 minutos habías terminado con el sitio.

Utiliza combinaciones clásicas

Como ya dijimos antes, la innovación es genial pero no lo es todo, si deseas irte por algo seguro no te critiques, no todos llevamos un diseñador por dentro y a veces es mejor irte por lo clásico a terminar probando algo que nunca termine de agradar. La integridad de tu diseño y el mensaje a entregar es lo más importante, no dejes que esto se vea afectado por tratar de combinar patrones que no embonan entre sí.

Si bien existe una amplia gama de tipos de letra, no es malo enfocarnos en unos cuantos y tratar de sacar lo mejor de ellos, hasta los mejores diseñadores tienden a enamorarse con un tipo de letra, aclaramos esto no significa que siempre debas usar el mismo tipo, pero dar variedad a tu sitio utilizando un grupo limitado de fuentes te hará comprender mejor en que situaciones utilizarlas.

Utiliza un lenguaje normal

No trates de ser alguien que no eres, si la idea fue tuya ¿Por qué tratar de mostrarla como si fueras alguien más? El utilizar un lenguaje cotidiano hace que podamos expresar con mayor fluidez y mejor consistencia nuestro contenido, sin complicaciones y evitando que el cliente se abrume con términos que tal vez no conozca.

Hay que hacer hincapié que tampoco es correcto hablar todo el tiempo con abreviaturas, malas palabras o con regionalismos, ya que estos también pueden estropear la comprensión de la lectura e incluso enojar o enfadar al usuario que puede considerar tu contenido como una burla o falta de respeto.

Esta claro que esto puede variar según el enfoque que le demos a nuestro sitio, pero si lo que buscas como finalidad es presentar una idea ante un público general, entonces no hay mejor manera de causar impacto que hablando con un lenguaje que sea entendible y fácil de digerir.

Haz legible el contenido

Debemos tener en cuenta que el formato que le demos a nuestro texto será muy importante al momento de mantener visitantes. Por favor, no utilices colores o tamaños de letras que le impidan mantener una lectura al usuario, si no lo único que lograrás es un flujo negativo en tu sitio.

Busca patrones de diseño que no afecten la lectura, maneja con cuidado los tamaños de letra y la tipografía que usas, no uses fondos muy oscuros con letras claras, si quieres ser original puedes serlo, solamente mantén en mente que lo importante al final es que el contenido pueda ser leído.

Como dato extra, mantén el texto alineado a la izquierda para facilitar la lectura por parte del visitante, si el contenido abarca varias líneas o párrafos es muy díficil de leer si se encuentra centrado o alineado a la derecha ya que el tamaño de líneas variará y es de todos saber que en el mundo occidental leemos de izquierda a derecha.

Utiliza una navegación sencilla

En todos tus menús utiliza palabras que el usuario ya tenga relacionadas hacia un tipo de contenido, no trates de redescubrir el hilo negro en cuestiones de semántica. Por ejemplo, si lo que vas a desplegar es una página de información sobre tu empresa o sobre ti como desarrollador basta con darle el título de “Contacto” a la sección y no complicarte utilizando términos o frases pegajosas como “Si me buscas me encuentras”, algo que puede confundir a más de uno.

Revisa tus imágenes

Al menos que tu sitio se dedique a proveer imágenes o almacenarlas, éstas no tendrán más propósito que reforzar el contenido, en pocas palabras son un elemento de refuerzo, pero vaya refuerzo. Las imágenes juegan un papel muy importante para enganchar al usuario, ya que al ser seres visuales lo que observamos en un sitio durante los primeros segundos se convierte en parte fundamental para decidir si continuamos leyendo simplemente nos vamos, es por eso que las imágenes juegan un gran papel dentro de este proceso de convencimiento.

Debemos elegir correctamente las imágenes que utilizamos, ver que realmente estén relacionadas con el contenido y que expresen una idea que al usuario le pueda interesar al acceder a esa página. Es simple, usa únicamente imágenes que ayuden, lo demás sólo será desperdicio de ancho de banda y demandas a tu servidor.

Utiliza un pie de página

El famoso “footer” se ha convertido en un elemento fundamental de todo sitio web en la actualidad, es tal su impacto que vemos su influencia sobre las nuevas estandarizaciones, como el caso de HTML5 que ha decidido crear una etiqueta especial para esta sección de la página.

Un footer es importante ya que en él podemos presentar información de manera completa sin pedirle al usuario que ingrese a una página especial, es como una tarjeta de presentación o de trabajo que podemos dejar el final de nuestro sitio para que pueda ser vista por todos.

Al igual en esta sección puedes incluir un mapa del sitio, preguntas y respuestas frecuentes, alguna información extra como de que ciudad eres, donde vives e incluso algunos links hacia cuentas externas de twitter, facebook, lindein, lo que permitirá al usuario conocer más de ti y tener más confianza al momento de contactarte para obtener alguno de tus servicios y/o productos.

Sea cual sea el objetivo de nuestros sitios, todos y cada uno de ellos tendrán como base al contenido. Es este factor el que se encargará de marcar la diferencia ente los sitios que tendrán éxito y los que quedarán en el camino.

Antes de iniciar un sitio

Esta claro que muchos de nosotros iniciamos en el camino del desarrollo web con el propósito de expresar ideas a través de proyectos. Decidimos dedicarnos a esta profesión para crear sitios que lleven un mensaje, que den a conocer algo, opiniones, posturas o simplemente información, en base a esto elaboramos planes y esbozos de como lucirá nuestro sitio y de que mostraremos en él, dejando de pensar en muchas ocasiones de cómo lo mantendremos y que tipo de beneficio económico obtendremos de él.

Si bien una idea es la chispa necesaria para encender la mecha de una planeación, al final del camino siempre debe de existir una remuneración si queremos sobrevivir de dicho proyecto, esto hace que se convierta en algo fundamental el pensar cómo obtener un beneficio económico al momento de desarrollar y diseñar un sitio.

Por esta razón, en este artículo enlistamos estos consejos sencillos de seguir que te harán obtener una mejor respuesta por parte de los usuarios.

Determina bien el objetivo de tu sitio

Cita un dicho que el que mucho abarca poco aprieta, no podemos empezar un sitio tratando de abarcar todos los temas que existen, debemos enfocarnos bien y determinar cual será el objetivo principal que tendrá nuestro sitio web, para lo cual se debe intentar lograr establecer una meta en común, pensando en las herramientas y recursos necesarios para lograrlo, analizando que es lo que se tiene y si es factible llegar a dicho objetivo en el tiempo que nos planteemos.

Muchos son los desarrolladores que no pueden responder al momento de cuestionarles sobre el objetivo principal de su sitio, y esto es producido en gran medida por el hecho de que observamos a nuestro sitio como una distracción más que una responsabilidad. Aún cuando nuestro sitio fue desarrollado por mera recreación, habrá un momento en que debamos idear un objetivo si es que queremos llegar a obtener algo de ese proyecto.

Cualquier cliente que lleguemos a obtener sin tener un objetivo definido deberá estar catalogado como de tipo accidental o temporal, debemos definir y trazar bien nuestras metas para poder empezar a considerar que los clientes o usuarios que llegan a nuestro sitio son personas realmente interesadas en lo que ofrecemos y que podrán dejar un derroche económico que nos beneficie.

Recuerda que el vender o producir ingresos será una consecuencia del trato y beneficios que le ofrezcas al usuario, mientras más veces regrese un usuario más aumenta la posibilidad de que se convierta en un cliente frecuente y por lo tanto una fuente de ingresos para tu sitio, define tus objetivos en base al cliente y no en base al dinero.

Establece un objetivo para cada página

Cada página que conforma nuestro sitio también deberá tener su objetivo particular, si bien este no resultará tan importante como el principal, en conjunto articularán el funcionamiento completo del sitio por lo que es significativo definirlos de manera correcta. A su vez, necesitamos determinar de que manera cada página contribuirá al objetivo general del sitio, logrando recrear una secuencia lógica, mediante la cual se nos facilite obtener prospectos de clientes.

No hay que confundir la gimnasia con la magnesia, es importante recordar el propósito de cada página, no hay que mezclar temas y mucho menos objetivos, debemos definir bien que clase de contenido incluiremos en cada página, justificando la existencia de cada una de ellas. Esto hará que nuestro sitio sea mucho más sencillo, mejor estructurado e incluso puede ahorrarnos tiempo de trabajo en el lado servidor.

Define bien las cabeceras y títulos

Alguien que no sepa dónde esta inmediatamente busca una forma de salir de ahí, lo mismo ocurre con los clientes en los sitios web, si un usuario no sabe bien a que página acaba de entrar, o de que trata la información a simple vista, buscará salir de ese sitio para seguir su búsqueda en algún otro lugar.

Tener bien identificada a la compañía también es fundamental para el usuario, si tu empresa ya se ha hecho de un lugar importante no dudes en mostrar tu logo, tu lema y el nombre de tu empresa en la parte superior del sitio, para que de esta manera el usuario pueda observarla al momento de entrar a una de tus páginas y así relacione la calidad de lo que ve con tu compañía, de esta manera aseguras el regreso del usuario a tu sitio si lo que vio y/o leyó le gusto.

Por el otro lado de la moneda, si tu sitio es nuevo y aún no tienes un buen reconocimiento del público, entonces que mejor manera de darte a conocer que presentar tu nombre en cada contenido que ofreces. Esto será una manera sutil de decirle al usuario, “Hola mi nombre es… y te quiero compartir esta información que te ayudará a resolver tus problemas”, recuerda que tal como en la vida real al momento de presentarnos debemos ser empáticos con la persona que conocemos y no sólo hablar de nosotros, debemos mostrar interés en los demás, sus problemas y cómo podemos ayudarlos.

El transcurso de los años le dio la razón a aquellos que dieron su debida importancia a la pruebas, sus productos sobresalieron y fueron mejor aceptados por los usuarios pues muchas veces el simple hecho de haber probado la intuición del sitio marcó una diferencia.

Pero muchas cosas han cambiado desde aquellos días en que las pruebas se realizaban con unas cuantas herramientas, como ya mencione este proceso ha tomado un grado alto de sofisticación, llevando incluso a muchas empresas a crear departamentos exclusivos para llevar acabo pruebas a sus productos de software, haciendo cada vez más común la inclusión de personal dedicado exclusivamente al llamado “testeo”.

Si menciono que ahora se hace de manera exclusiva, es porque en el pasado muchos nos dedicábamos a la doble profesión, de desarrollar el producto y probar al mismo tiempo, que si bien muchos seguimos haciendo esto al final queda la confianza de que pasará después a un grupo de personas que quizás tengan más experiencia que nosotros encontrando errores.

Pruebas Cross-Browser

Uno de los principales problemas con los que nos enfrentamos como desarrolladores web, es encontrar un patrón de diseño adecuado que pueda ser visto de manera correcta en todos los navegadores que existen en el mercado. Si bien muchos de los navegadores modernos ya se encuentran estandarizados, hay que mencionar que aún existen millones de clientes con navegadores viejos e incluso obsoletos, por lo que nuestros sitios aún tienen que ser compatibles con ellos.

Para poder estar seguro del funcionamiento de un sitio en estas situaciones, se lleva a cabo las llamadas pruebas de “Cross-Browser” que consisten en llevar a cabo revisiones en cada uno de los navegadores más usados.

En el pasado esto se llevaba a cabo con varias computadoras, con distintos sistemas operativos y con distintos navegadores instalados en cada una de las máquinas, pero como es obvio, esto demandaba tanto recursos económicos, por el hecho de tener varios equipos, como recursos de tiempo puesto que el hacer esta clase de pruebas llevaba consigo bastante perdida de horas.

En la actualidad existen maneras mucho más eficientes de llevar a cabo este proceso, gracias al uso de herramientas ya sea de escritorio o en la misma Web que nos permiten simular el despliegue de nuestro sitio utilizando el motor de diferentes navegadores. Como en todo existen versiones de paga y versiones libres, en esta ocasión me enfocaré en mencionar únicamente herramientas de tipo gratuito que nos ayuden a probar sin necesidad de desembolsar alguna cantidad de dinero.

IETester

Como muchos de los que leen este artículo, yo no soy fan de Internet Explorer, su manera de interpretar y desplegar un sitio hace que nos de enfermedad, puesto que nuestro código puede funcionar de maravilla en todos los demás navegadores pero por alguna razón IE se decide a simplemente no mostrarlo de dicha manera.

Internet Explorer es tan irregular, que al arreglar un bug en una versión anterior puede que la página deje de funcionar en una versión más nueva. Es por ello que pongo en primer lugar esta herramienta que nos ayudará a probar en todas las versiones de IE desde la 5.5 a la más reciente.

IETester es una aplicación de escritorio que nos permite visualizar e incluso utilizar los motores de Javascript de la mayoría de las versiones de Internet Explorer, funciona únicamente sobre Windows en sus versiones 7, Vista y XP, y pide como requerimiento mínimo el tener IE7 instalado en nuestra máquina.

Spoon

Si bien Internet Explorer será nuestro principal foco de atención, no tenemos que descuidar el desempeño de nuestro sitio en otros navegadores, para estos casos es mejor utilizar otro tipo de herramientas, y una de mis preferidas es Spoon.

Spoon es un servicio ofrecido mediante una página web, que emula la aplicación del sitio en distintos navegadores, nos ofrece versiones de Firefox, Chrome, Opera y Safari, aunque desgraciadamente también sólo funciona para Windows. Aparte de contar con los distintos navegadores, a su vez proporciona la opción de seleccionar versiones es decir que podemos verificar el sitio en un mismo navegador pero en alguna versión previa o posterior a la que tenemos.

Desgraciadamente Spoon no es compatible con Internet Explorer, un tiempo lo fue, pero por petición de Windows este emulador dejo de ofrecer el servicio.

Browsershots

Hasta ahora los amantes de Linux se estarán preguntando por qué únicamente he proporcionado herramientas para Windows, bueno no desesperen que para ustedes esta Browsershots.

Este es un servicio de emulación proporcionado mediante una página web, que nos permite verificar la compatibilidad de nuestro sitio en varios de los navegadores menos conocidos del mundo Web. Esto la convierte, probablemente, en la herramienta gratuita de prueba más completa ya que incluye navegadores Linux, Windows y BSD.

Incluye navegadores poco conocidos como Konqueror, Galeon, SeaMonkey, Iceape y Kazehakase, nos permite realizar las pruebas en la versión más reciente de cada navegador, así como en versiones anteriores.

La desventaja es que entre más navegadores utilicemos más lenta será la respuesta que obtengamos del servidor, así que quizás quiera concentrarse únicamente en los navegadores de uso más común. El registrarse en el sitio también ayuda.

Conclusión

Con suerte, en un futuro no muy lejano, estas pruebas pasaran a ser obsoletas pues la estandarización del código y los navegadores hará que un sitio se comporte de manera similar en todos, si respetamos los estándares web. Mientras llega ese día tendremos que aprender a revisar siempre nuestro código y mantener la costumbre de utilizar alguna de las herramientas que aquí se mencionaron.

Uno de estos temas considerados por varios como elementales al momento de empezar a diseñar mediante CSS, es la elaboración y estilización de elementos de un formulario, como lo es el caso de los botones los cuales siempre hacen resaltar o en otros casos deslucir el ambiente de una página.

¿Cómo se hacían botones antes de CSS3?

En el pasado era de lo más común tener que recurrir a programas de edición de imágenes para poder lograr un buen efecto en nuestros botones. El sombreado, las fuentes estilizadas y el aspecto tridimensional tenía que ser aplicado mediante las herramientas que nos proporcionaba Photoshop, Corel Draw o algún otro programa de diseño que teníamos a la mano, y una vez concluida la imagen debíamos complementar con trabajo en HTML y CSS.

Para el caso de CSS se tenía que hacer uso de pseudo selectores, particularmente para captar los eventos de colocación del mouse y activación del botón lo que permitía cambiar la imagen de fondo o modificar su posición, para así dar un efecto de “aplastado” al botón.

Al principio puede parecer fácil crear tres o cuatro imágenes distintas para un sólo botón pero cuando cuentas con varios elementos del mismo tipo que tienen distintos estilos, la cosa se complica, por lo que se empezó a optar por tener una sola imagen para cada botón y en esa misma imagen tener representado cada uno de los eventos.

El tener una sola imagen de fondo representaba un menor tiempo de descarga de la página y agilizaba el desempeño del sitio, es por ello que era muy común encontrar en nuestras hojas de estilos sentencias como:

a.btnAzul{
background: url("botonazul.png");
}
a.btnAzul:hover, a.btnAzul:focus{
background-position: 0 -124px;
}

a.btnAzul:active{
background-position: 0 -248px;
}

Las cuales mediante la propiedad “background-position” y con valores negativos se encargaban de mover la imagen que se mostraba como fondo de nuestro botón.

Si bien esto vino a simplificar y reducir el tiempo de carga de la página, aún así teníamos que crear de una a tres imágenes por cada botón o por cada estilo con el que contaba la página, esto representaba tiempo y la necesidad de tener conocimiento en algún programa de diseño para poder utilizarlo.

Pero todo esto quedo en el olvido al momento de que CSS3 implementó todos los efectos necesarios para llevar a cabo esta clase de ediciones, y ahora el diseño de botones CSS3 se puede hacer directamente en nuestro código.

Diseño de botones con CSS3

El uso de gradientes, sombras, bordes redondeados y transiciones de manera combinada mediante CSS nos permite crear botones con estilos a granel. La poca dependencia de esta manera de desarrollo hace que el diseñador se sienta más libre y pueda experimentar con distintos colores en el mismo código fuente de la página.

En este artículo realizaremos un ejemplo de botón basado en los típicos estilos que vamos a encontrar en casi cualquier sitio web. Utilizaremos un div contenedor con un elemento de tipo link que funcionará como “tablet”, a dicho elemento le aplicaremos bordes, gradientes y sombreado para dar un aspecto tridimensional.

El texto del botón también será editado mediante CSS y lucirá con sombras para dar un efecto de profundidad.

Estructura HTML del boton

Nuestra estructura HTML tal y como fue descrita anteriormente, quedaría de la siguiente manera:

<div id="contenedor">
    <a href="#" class="btnAzul">Da Click</a>
</div>

Como se puede apreciar es una estructura bastante simple y lo fundamental de ella es elemento de anclaje, el cual recibe una clase a la que hemos llamado “btnAzul” y será la encargada de recibir todos los efectos mediante CSS.

Estilos CSS3 para el botón

Nuestro código CSS comenzará con algunos estilos básicos de configuración lo que nos permitirá apreciar mejor el elemento.

a.btnAzul {
    display: block;
    width: 250px;
    height: 60px;
    padding: 25px 0 0 0;
    margin: 0 auto;
}

Un elemento de anclaje es por defecto de tipo “inline” ya que son utilizados para mostrar y representar links, en nuestro caso queremos un “tablet” por lo que se vuelve necesario cambiar el tipo de display a tipo bloque y para ello declaramos la sentencia “display: block”. Esto permitirá que especifiquemos un ancho y una altura para el elemento, para finalmente agregar un “padding” en la parte superior para separar el texto del borde y el margen “auto” se encargará de centrar dicho texto.

Después de establecer el elemento base, pasamos a darle formato y edición.

a.btnAzul {
    display: block;
    width: 250px;
    height: 60px;
    padding: 25px 0 0 0;
    margin: 0 auto;

    background: #4682B4;
    background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87CEEB), color-stop(100%,#4682B4));

    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #62C2F9;
    border-radius: 10px;
}

La propiedad “box-shadow” nos servirá para darle un efecto de resplandor interno, muy parecido al que se puede dar con Photoshop. Al agregar la propiedad “inset” hace que la sombra se coloque al interior del elemento, contrario al comportamiento natural de la propiedad que agrega el efecto en el exterior.

En esta ocasión no vamos a utilizar los parámetros de “offset” en ninguno de los ejes de la sombra, pero si utilizaremos la propiedad “blur” para agregar un tipo de borrando y suavizar el efecto de flujo. A esto adicionamos un borde simple de 1 píxel de ancho y las esquinas se redondean mediante la propiedad border-radius.

Después de tener establecido el estilo para el fondo de nuestro botón, pasamos a establecer el estilo del texto.

a.btnAzul {
    display: block;
    width: 250px;
    height: 60px;
    padding: 25px 0 0 0;
    margin: 0 auto;

    background: #4682B4;
    background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87CEEB), color-stop(100%,#4682B4));

    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #62C2F9;
    border-radius: 10px;

    font: bold 25px Helvetica, Sans-Serif;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #3090C7;
    text-shadow: 0px 1px 2px #62C2F9;
}

Establecemos el tipo de fuente, su tamaño, lo alineamos al centro del elemento, transformamos todas las letras a mayúsculas para darle uniformidad, quitamos todo tipo de decoración, definimos su color y finalmente establecemos un sombreado para darle un efecto de inserción. Lo que hacemos con la propiedad “text-shadow” es básicamente darle 1 píxel de offset en el eje Y y crear un blur de 2 píxeles.

El resultado final:

Y aquí el ejemplo funcionando: Botones con CSS3

Con esto se logra obtener un botón de diseño sencillo pero que atrae, a partir de aquí podemos utilizar pseudo selectores si queremos y hacer uso de estos mismos efectos para diseñar el botón cuando el mouse se posicione sobre él o le de click.

En esta ocasión analizaremos cuatro métodos más para complementar el tema y tener un margen de elección más grande, pues hay que recordar que un método no va a funcionar para todas las ocasiones, la situación determinará cual de todos utilizar.

Posición absoluta y margen negativo

Este método puede ser utilizado sobre elementos de tipo bloque y funciona en todos los navegadores, incluyendo Internet Explorer. Para su correcto funcionamiento se requiere que se ajuste la altura del elemento que se desea centrar, proporcionándole a su vez una posición de tipo absoluta y márgenes negativos para lograr el centrado.

Por ejemplo si quisiéramos centrar tanto de manera horizontal como vertical un elemento de tipo “div” que se encuentra dentro de otro que actúa como contenedor, tendríamos que agregar un código CSS como este:

#divContenedor {
    position: relative;
}
#divHijo {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

El cual tendría efecto sobre esta estructura:

<div id="divContenedor">
    <div id="divHijo">Contenido de prueba</div>
</div>

Lo primero que hacemos en nuestra sentencia CSS es definir la posición de ambos elementos, se le da una posición relativa al contenedor y al hijo se le da una absoluta. La posición absoluta indicará que el elemento interno estará posicionado en base a su primer elemento antecesor, en este caso “divContenedor”.

A continuación establecemos los valores para “top” y “left” en 50%, lo que ubicará a “divHijo” con un margen superior e izquierdo que equivaldrá a la mitad del tamaño del contenedor. Esto en teoría se consideraría el centro, pero el elemento no lucirá totalmente centrado si lo manejamos así, puesto que la única parte de “divHijo” que esta en el centro es la esquina superior izquierda.

Para retocar esto, debemos mover a “divHijo” de tal manera que quede centrado, para ello damos una anchura de 50% y una altura de 30%, de esa manera vamos a conocer la altura y anchura de nuestro elemento hijo, para finalmente aplicar los márgenes negativos que nos darán el centrado esperado.

A diferencia de los otros métodos que observamos en el artículo anterior éste es el primero para elementos de bloque, sin embargo se debe de manejar con cuidado pues el contenido puede superar a su contenedor y eso causa que visualmente desaparezca, por lo que es fundamental conocer bien la altura y anchura del elemento.

Posición absoluta y estiramiento

Al igual que con el método anterior, éste empieza por establecer el posicionamiento de los elementos padre e hijo como relativo y absoluto, respectivamente, pero a partir de ahí las cosas son diferentes.

En lo que consiste este método es tratar de conseguir que el elemento hijo se extienda a todo bordes del elemento contenedor. Para lograr esto, se recurre a las propiedades “top”, “bottom”, “right” y “left” las cuales son establecidas con un valor de 0 en el estilo de “divHijo”. Debido a que nuestro elemento hijo es menor que el elemento contenedor no puede abarcar los cuatro bordes.

Si a esto le añadimos un margen automático para los cuatro lados, lograremos crear el efecto de centrado vertical ya que los márgenes que se oponen serán iguales, obteniendo un código CSS final como este:

#divHijo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Desgraciadamente este método tiene dos desventajas, ya que no funciona para Internet Explorer en versiones menores a la 7 y al igual que con el método anterior si el contenido crece mucho puede causar su ocultamiento.

Padding

Este método consiste en dejar la responsabilidad del ajuste automático de márgenes del elemento hijo al navegador, proporcionando un padding tanto para el contenedor como para el hijo y así igualar las distancias.

#divContenedor {
    padding: 5% 0;
}
#divHijo {
    padding: 10% 0;
}

Con este CSS proporcionamos un padding superior e inferior para ambos elementos. Al proporcionar dichas propiedades para “divHijo” nos estamos asegurando de que estará verticalmente centrado, mientras que el padding proporcionado al padre asegura que el hijo estará centrado en base al contenedor.

Este método funciona en cualquier navegador, la desventaja es que dependiendo de los detalles de su proyecto es posible que tenga que hacer un poco de matemáticas para calcular el padding correcto para centrar su elemento.

Div flotador

Este es el último método que veremos, para poder llevarlo a la práctica requerimos de un div vacío que se encuentre flotando en nuestro DOM. Dicho div será el encargado de controlar la posición de nuestro elemento hijo.

Para lograr tal efecto necesitamos colocar nuestro div flotador a una posición fija ya sea a la izquierda o derecha dentro del div contenedor, después le damos una altura que abarque el 50% del div contenedor y una anchura del 100%, lo que hace que se llene toda la mitad superior del elemento padre.

Código html:

<div id="divContenedor">
    <div id="divflotador"></div>
    <div id="divHijo">Contenido de prueba</div>
</div>

Código css:

#divContenedor {
    height: 250px;
}
#divflotador {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}
#divHijo {
    clear: both;
    height: 100px;
}

Debido a que el div agregado se encuentra flotando, no esta considerado dentro de la estructura normal del documento, es por ello que necesitamos aplicar la propiedad “clear” en el elemento hijo.

El borde superior del div hijo ya debe estar inmediatamente por debajo del borde inferior de la div flotante. Es necesario hacer llegar el elemento hijo por un monto igual a la mitad de su altura y para ello hemos establecido un margen negativo de fondo en el div flotante.

Este método también funciona en todos los navegadores. La desventaja es que requiere un div vacío y que conozcamos la altura exacta del elemento que actuará como hijo.

Muchos son los que desconocen la manera correcta de lograr este alineado con CSS, por lo que recurren al uso de las tradicionales pero malditas tablas que sólo vienen a entorpecer nuestro DOM. Para todos nosotros que nos hemos visto envueltos en alguna problemática con el centrado vertical, traemos en este artículo una variedad de métodos que nos ayudarán a lograr el alineado de manera fácil y sencilla.

Primero que nada debemos tener conciencia de que quizás un método sólo sea el adecuado para unos casos y no para todas las situaciones, debemos saber reconocer y apreciar la variedad, es por ello que en este artículo se van a exponer varios métodos y no uno en absoluto. El primero de estos métodos es “vertical-align”, que no siempre funcionará, pero nos ayudará a comprender mejor el centrado vertical en general.

Vertical-align

El hecho de que el centrado horizontal con CSS resulta bastante fácil de aplicar, hace pensar a la mayoría que el centrado vertical será cuestión de una simple sentencia. Aunado a esto, el uso de tablas nos ha dicho que con la aplicación de un atributo “valign” podemos centrar de manera vertical nuestro contenido, es por ello que muchos ven a “vertical-align” como la solución a su problema pensando que esta función centrará automáticamente cualquier elemento ya sea inline o de bloque.

Pero les recuerdo, esto no son tablas, estamos manejando una estructura DOM que tiene elementos de comportamientos muy independientes y “vertical-align” desgraciadamente no tiene influencia sobre los elementos de bloque, únicamente funciona con elementos inline y por supuesto para el contenido en tablas, por lo que es la alternativa CSS correcta para el famoso “valign”.

En base a esto podemos establecer que si aplicamos dicho atributo a una elemento en línea como una imagen, si podremos obtener el resultado deseado.

img {
   vertical-align: middle;
}

Los valores válidos para esta propiedad son baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, o un valor en porcentaje. Pero si lo que queremos es aplicar un centrado vertical a elementos de bloque entonces debemos recurrir a otra clase de métodos, y el método que elija dependerá de lo que usted está tratando de centrar en relación a su elemento contenedor.

Line-Height

Este método funcionará cuando queramos alinear verticalmente una sola línea de texto. Todo lo que necesitamos hacer es establecer una altura para la línea sobre el elemento que contiene el texto y para ello usaremos la propiedad “line-height”, recordando que dicha altura debe ser mayor al tamaño de la fuente para que tenga el efecto deseado.

Por defecto el espacio proporcionado se repartirá de manera equitativa para la parte superior e inferior del texto por lo que este se centrará de manera vertical. En caso de que esta modificación no tenga el efecto deseado también se puede modificar la altura del elemento contenedor para igualarla a la de la línea de texto.

Es entonces que si tenemos un código HTML que luzca de la siguiente manera:

<div id="divContenedor">
	<div id="divHijo">Texto de prueba</div>
</div>

Y aplicamos el siguiente estilo:

#divHijo {
	line-height: 400px;
}

Lograremos apreciar “Texto de prueba” de manera centrada verticalmente. Este método funciona en todos los navegadores, el único problema de esto es que sólo servirá para una sola línea de texto si agregamos una segunda o tercera línea el efecto se verá afectado y tendremos que usar un método diferente.

En este caso yo di un valor de 400 píxeles para la altura, pero se puede proporcionar cualquier valor que se crea conveniente.

Centrar una imagen con line-height

Muchos se podrán haber planteado la cuestión de que si este método tiene efecto sobre imágenes, y afortunadamente así es. Si aplicamos la propiedad a una imagen obtendremos el mismo resultado, sólo con una variación, debemos agregar otra línea a nuestro código CSS.

Se establece el “line-height” como lo hicimos anteriormente, el cual tendrá que ser mayor que la altura de la imagen, y ajustamos el “vertical-align” dando un valor de “middle” para la imagen. En base a esto nuestro código HTML quedaría de la siguiente manera:

<div id="divContenedor">
	<img src="imagen.png" alt="imagen" />
</div>

Mientras que el código CSS lucirá así:

#divContenedor {
	line-height: 200px;
}
#divContenedor img {
	vertical-align: middle;
}

Uso de tablas CSS

No te asustes al oír la palabra Tabla, en esta ocasión no nos estamos refiriendo a las tablas comunes que generalmente se usaban para darle forma a un layout en el pasado, lo que haremos en esta ocasión es utilizar CSS para mostrar elementos como tablas y celdas para después utilizar la propiedad vertical-align y así centrar el contenido.

Si tenemos una estructura como la siguiente:

<div id="divContenedor">
	<div id="divHijo">Contenido de la tabla</div>
</div>

Y aplicamos un CSS como el siguiente:

#divContenedor {
    display: table;
}
#divHijo {
	display: table-cell;
	vertical-align: middle;
}

Obtenemos un div padre que se muestra como tabla y un div hijo que hace lo propio como celda de dicha tabla. A partir de este momento podemos utilizar la propiedad “vertical-align” a la cual le damos el valor de middle para añadir el alineado vertical.

A diferencia del método anterior, el contenido puede ser dinámico y va a crecer en base a lo que se coloca dentro del div. La desventaja de este método es que no funciona en versiones antiguas de IE, aunque hay una solución, que consiste en añadir “display: inline-block” al elemento secundario.

Aclaramos que en esta ocasión no vamos a tratar con problemas mayores como son las excepciones para Internet Explorer o el manejo de CSS3 en navegadores antiguos. Simplemente manejaremos cosas fundamentales, como lo son esas pequeñas diferencias de sintaxis que pueden significar grandes cambios.

Clasifica tus selectores CSS

Si al leer la palabra “selectores” en el título de la sección solo añadiste una duda más a tu libro de preguntas, pues no te preocupes porque aquí te explicamos qué es. Un selector es el pedazo de código que va antes de las llaves ({}) en una hoja de estilo, estos se encargan de delimitar el rango de elementos que vamos a modificar agregándoles un estilo específico. Por ejemplo en el siguiente código:

#soyUnId{
 color: red;
}

El selector sería la palabra “#soyUnId”, y mediante este texto delimitamos el grupo únicamente al elemento que contiene ese identificador, por lo que será él nada más quien reciba el estilo de texto color rojo.

Muchas veces por cuestiones de comodidad utilizamos selectores bastante genéricos para aplicar un estilo, ya sea un id, una clase o el nombre de un elemento, ya que son los de uso más común y de sintaxis más conocida, pero existe la capacidad de utilizar elementos anidados, multielementos e incluso expresiones regulares.

El hecho de que un selector sea muy elaborado no garantiza que sea necesariamente el más adecuado para nuestro código, debemos clasificar los selectores para identificar cual es el que realmente cumple con el propósito que buscamos. Por ejemplo si tuviéramos dos bloques de código como los siguientes:

.claseX {
/* Estilo */
}
p.claseX{
/* Estilo */
}

En teoría lucen bastante similares, sin embargo existen diferencias sutiles que pueden verse reflejadas en el rendimiento. El primero de estos selectores aplicará el estilo a todos los elementos que pertenezcan a “claseX”, mientras que el segundo lo aplicará únicamente a los elementos de tipo párrafo que pertenezcan a esa misma clase.

El primero resulta más genérico puesto que el código puede ser útil para varios tipos de elementos, y tiene la gran ventaja de que es más rápido de entender y aplicar por parte del navegador. Por su parte el segundo es más específico y por lo mismo puede ser más única su aplicación, es raro cuando se use un ejemplo como el segundo ya que eso indica que la clase se usará en múltiples elementos de distintos tipos.

Si ese no es tu caso entonces debes optar por la primera opción, lo cual permitirá un mejor rendimiento, demostrando con esto que un selector elaborado no es siempre la mejor opción. Ya que si deseas utilizar esa misma clase en distintos tipos de elementos entonces deberás realizar un código como este:

p.claseX{
color: red;
}
span.claseX{
color: orange;
}

Orden de tu CSS, un factor relevante

En el desarrollo de hojas de estilo en muchas ocasiones nos encontraremos con el hecho de que el orden de los factores sí altera el producto. El primer ejemplo claro de esto se encuentra en los selectores, no es lo mismo poner primer el elemento y después la clase a poner primero la clase y luego el elemento.

Si manejamos dos bloques de código como estos:

.claseX div { color: red; }

div.claseX  { color: orange; }

No obtendremos los mismos resultados, ¿Cuál es la diferencia?, bueno ese pequeño espacio que existe entre el nombre de la clase y el tipo del elemento de la primera sentencia indica que el estilo de color rojo se aplicará a todos los elementos div que estén dentro de la clase “claseX”.

Por su parte la segunda sentencia es tomada únicamente como un selector por el orden de los factores, esto hace que el estilo de color naranja únicamente se aplique a los elementos de tipo div que tengan la clase “claseX”.

El orden también es un factor a considerar al momento de llamar dos o más hojas de estilo en un archivo HTML, la última hoja es la que tiene prioridad y si una propiedad se define en dos o más parte las propiedades que se dieron en la última hoja son las que se respetarán.

De igual manera esto se ve reflejado en el orden interior de las hojas de estilo, es decir, si en una misma hoja tenemos dos selectores con la misma especificidad, como los siguientes:

.claseRojo   { color: red; }
.claseVerde  { color: green; }

Y aplicamos ambas clases al mismo elementos, el último en el orden es el que finalmente predominará y aplicará sus propiedades.

Reemplazo de propiedades CSS

Es importante leer bien nuestro código y verificar que no existan propiedades repetidas en una misma sentencia, en caso de que llegaran a existir entonces el orden será un elemento a considerar para determinar que propiedad prevalecerá. Si tenemos un código como este:

.claseX{
color: red;
border: 1px solid;
color: orange;
}

Donde claramente definimos dos veces el color de nuestro texto, debemos estar concientes que únicamente la última propiedad será la que se aplicará, dejando el texto de color naranja.

El uso de identificadores

Hasta cierto punto el uso de un ID o una clase en un elemento resulta bastante similar, es de todos saber que el uso de un identificador se debe de hacer cuando queremos aplicar un estilo único, mientras que la clase nos ayuda a aplicar el mismo estilo a diferentes elementos, pero ¿Existe algún otro beneficio claro en el uso de IDs? sí los hay.

Técnicamente un ID es mucho más rápido de interpretar por parte del navegador, utilizar un ID en Javascript resulta mucho más sencillo y sobre todo el nivel de especificidad de un ID no es superado por lo que tiene predilección sobre el resto de las sentencias aplicadas a un mismo elemento.

Conclusión

Como podemos observar todos hemos pasado por problemas de principiantes, nadie nace sabiendo y el que lo niegue debe estar en un error, somos muchos los que ya cruzamos este campo y es bueno ir recopilando esta clase de lecciones para que sea más sencillo para los que inician, espero haya sido de provecho y que ahora te resulte más sencillo estructurar hojas de estilo.

Su inestabilidad y falta de estándares han hecho que de él no se tengan buenos conceptos, y razones no faltan para hablar mal. Desde hechos tan sencillos como el despliegue incorrecto de una imagen hasta casos extremos donde el estilo completo de una página se ve afectado, transparencias, capas flotantes, efectos de sombreado, estilizaciones, todo esto puede verse alterado en alguna de sus versiones.

Si bien es cierto que este en su última versión ha presentado grandes mejoras y el soporte a nuevas tecnologías se ha puesto como prioridad, el uso de sus versiones anteriores y la poca estandarización de estas producen dolores de cabeza a por mayor, pues tenemos que afrontar la verdad y darnos cuenta de que aún existen millones de personas utilizando alguna versión vieja de este navegador por lo que tenemos que seguir brindado soporte.

Algunas de estas versiones, como es el caso de Internet Explorer 6, han sido oficialmente declaradas como muertas, pero en países como China este explorador sigue siendo el más utilizado y el simple hecho de dar formato a un disco duro e instalar de nueva cuenta el sistema operativo Windows XP hace que Internet Explorer 6 tome la riendas de la navegación web de nuevo, por lo que no lo podemos pasar por alto.

Que la innovación es importante lo sabemos, que la estandarización y las nuevas tecnologías es lo que se debe practicar sin duda, pero hay que recordar que no vivimos en un mundo de desarrolladores, allá afuera existen personas que saben poco o nada de estándares o de navegadores actualizados, ellos solo quieren entrar a Internet buscar algún producto o información y obtenerlo.

Esta clase de personas también serán nuestros clientes o los clientes potenciales de los sitios para los que trabajamos, no podemos llegar con la persona que nos contrató y decirle algo como “El sitio quedó muy bien, pero sólo se verá bien en Firefox y Google Chrome, en IE fallará pero no importa el 40% de los visitantes la verán bien”.

Por esta razón principalmente tenemos que buscar “hacks” y manera de adaptar nuestro sitio para que Internet Explorer pueda por lo menos simular lo que queremos lograr. En esta ocasión tratamos el tema de como detectar el uso de alguno de estos navegadores mediante caracteres en nuestro código CSS, son 3 simples expresiones que nos ayudan a determinar que un estilo para cada versión del navegador ya sea Internet Explorer 8 o inferior.

Antes de empezar con el desarrollo debemos aclarar que esta no es la mejor práctica y se debe utilizar sólo en casos donde sabemos que existirán pocos cambios en el estilo, la mayor parte del tiempo debemos utilizar el condicionamiento en comentarios como este:

<!--[if IE 6]>
Instrucciones especiales para IE 6 aquí
<![endif]-->

Si deseamos un comportamiento especial en cada versión, pero estos caracteres se pueden tomar como un atajo o algo sencillo a realizar cuando no exista mucha diferencia de un estilo a otro, y al final del día es un conocimiento extra que nos puede ayudar en el futuro.

IE8 y anteriores

La clave para rastrear Internet Explorer 8 y versiones anteriores esta conformada por dos caracteres, una diagonal invertida y el número nueve al final de la sentencia de estilo. Por ejemplo:

    body {
     color : blue; /* Todos los navegadores */
     color : red\9; /* IE8 y anteriores */
    }

Desafortunadamente este hack únicamente puede ser utilizado para rastrear la versión 8 y anteriores, no podemos implementar algo como “\IE” para saber si el navegador es Internet Explorer en general.

IE 7 y anteriores

Para identificar al navegador IE 7 o alguna versión anterior utilizamos el caracter asterisco “*”. En este caso el caracter lo usaremos al principio de la sentencia y no al final como en el ejemplo anterior, es entonces que el código nos quedaría de la siguiente manera:

body {
     color : blue; /* Todos los navegadores */
     color : red\9; /* IE8 */
     *color: green; /* IE7 y anteriores */
    }

IE6

Por su parte Internet Explorer 6 es representado por un guión bajo “_”, o underscore, el cual también se coloca al inicio de la declaración de estilo y en este caso únicamente servirá para rastrear la versión 6.

body {
     color : blue; /* Todos los navegadores */
     color : red\9; /* IE8 */
     *color: green; /* IE7 */
     _color: purple: /* IE6 */
    }

Conclusión

De esta manera podemos incluso personalizar el sitio en base a la versión del cliente, mostrar alguna capa o ocultar algunas otras, incluso desplegarle algún mensaje que le recomiende bajar otro navegador. Como ya explique el uso de estos caracteres selectores debe hacerse con cuidado y no exagerar en su implementación, puesto que no sabemos si en un futuro estos hacks seguirán siendo utilizados o representarán lo mismo.