Cuando creas un sitio web o un blog, muchas veces nos fijamos en que Internet Explorer 6 no soporta algunas propiedades que hemos aplicado, mientras que otros navegadores sí. Esto puede ser un asunto muy engorroso para el desarrollador, se empieza a poner nervioso sin encontrar la solución a su fallo.

En esta entrada recopilaré algunas de las propiedades que no pueden implementarse correctamente en Internet Explorer 6 (dado que no son compatibles) e iré indicando sus respectivas soluciones.

1. Bordes redondeados
Aunque ya os muestro una solución para crear bordes redondeados en Internet Explorer:

Podemos usar un archivo .HTC, pero para ello debemos asignar el correcto MIME Type para htc behavior en tu servidor. Es muy importante realizar este paso. A continuación se muestra como hacerlo:

1. Ve a tu Cpanel y haz click en un enlace llamado MIME Types Link.
2. Debajo de MIME Type, añade text/x-component.
3. Debajo de las extensiones, añade htc.
4. Reinicia el servidor web Apache.

Para mas detalles de cómo añadir MIME Type visita el soporte de Microsoft.

Todo lo que necesitas hacer para aplicar bordes redondeados en IE6 es descargar el HTC desde HTMLremix o un enlace alternativo e incluir el siguiente código en tu archivo CSS:

Alternativa en Javascript: JQuery Corner es una alternativa en Javascript que te permitirá crear bordes redondeados compatibles en todos los navegadores.

2. El popular fallo de la transparencia PNG
Muchos diseñadores deben utilizar transparencia en sus proyectos, ¿por qué limitarla? Existen muchos recursos con los que podemos solucionar este error. Os mostraré unos cuantos:

Aplicando la propiedad filter (de Microsoft):

Alternativa HTC: Si la solución anterior no te funciona, puedes probar esta: HTC.

Si necesitas soporte en la propiedad background-position, ve a: DD_belated.

La solución que recomiendo es usar un .gif en vez de PNG o un PNG-8.

3. Opacidad
Este hack es mucho más sencillo de aplicar para que la opacidad funcione en Internet Explorer. Aplica este código donde deseas que funcione la opacidad:

4. Posición Fixed
Todos los navegadores soportan la propiedad “fixed” pero IE 6 no. Os mostraremos varias soluciones para arreglar este fallo. Copia y pega este código donde desees que funcione la propiedad “fixed”:

Solo cambia los valores tops (104) y left (15) por la posición que quieras darle a tu elemento.

El problema de esto es, que al mover la barra de desplazamiento, nos va a tirones, esto lo podemos arreglar insertando este código:

Todo lo que necesitas es una imagen de 1px por 1px. ¡Suena chapuza pero debería funcionar!

5. Min-width y Max-width
Para hacer que funcione la propiedad min-width, podemos probar con esto:

Para la propiedad max-width:

Alternativa en Javascript: Se muestra una alternativa a la solución anterior: JQminmax es un plugin que te permitirá definir los valores máximos y mínimos para la altura y anchura.

6. Hover para elementos no anchor
Desafortunadamente IE6 solo soporta :hover para etiquetas con ancho. Esto significa que los submenús basados en CSS no funcionarán en IE6. CSSHover.htc es la mejor solución en estos casos. Puedes descargar el archivo desde xs4all.nl. El código CSS a aplicar para que funcione es este:

Como dije en el hack número 2 (transparencia PNG) no olvides definir el correcto MIME Type para htc behavior en tu servidor, esto es fundamental.

7. Min-height y Max-height
Min-height:
Aplicamos este código (podría no considerarse un hack ya que utiliza CSS válido):

Max-height:

8. Escalado bicúbico para imágenes
Una línea arregla todo este fallo. Podemos saber más de este hack en el blog de Chris Coyier:

9. Text-indent negativo para input button
El valor text-indent normalmente es utilizado para esconder valores de texto dentro de los botones, por lo que podemos usar imágenes de fondo para mostrar el texto del botón. IE6 no soporta la propiedad text-indent en los botones así que debemos usar este código CSS:

10. Text-shadow
Este filtro para la propiedad text-shadow es uno de los filtros más usados en IE:

Una pequeña curiosidad: Si a alguien le gusta la imagen con la que ilustré la entrada, puede verla en un formato más grande.

Una "secuencia de caracteres escapados" se le llama a una secuencia de caracteres utilizada para representar de forma colectiva un carácter diferente.

Independientemente de dónde aparecen, los valores de string en el CSS se comportan de manera similar. Lo más importante para recordar acerca de ellos es que no son HTML.

Esto significa, por ejemplo, que la inserción de llaves, sin escaparlos como referencias a entidades HTML (<y>) es perfectamente legal. En otras palabras, la regla:

Resultará en un pseudo-elemento cuyo contenido son los cinco caracteres (incluyendo espacios) y no una etiqueta HTML de comienzo rota. De forma similar, esta regla:

Resulta en un pseudo-elemento cuyo contenido son los cuatro caracteres < y no un ícono de "menor a". Esto significa que el carácter < y el & no son tratados de forma especial por los analizadores de strings CSS, a pesar de que sean caracteres con significado especial en lenguajes derivados de SGML como el HTML y el XML.

Dentro de los strings CSS, el único carácter con sentido especial es la barra (\). Este carácter delimita el comienzo de una secuencia de escape, de forma bastante similar a lo que el ampersand (&) hace en el código HTML.

Las secuencias de escape son útiles porque permiten a los autores de hojas de estilo representar los caracteres que normalmente serían ignorados o interpretados de manera diferente por las reglas tradicionales de análisis de CSS. El ejemplo más evidente de esto es la representación de una barra invertida en un string CSS. Al principio, podrías pensar que la siguiente regla CSS produciría una barra invertida al comienzo de cada párrafo, pero estarías equivocado.

Cuando un analizador CSS lee la declaración en esta regla, considera que la barra invertida es el comienzo de una secuencia de escape, por lo que lo ignora. A continuación, se encuentra con una cita doble y dado que este carácter no es un componente legal en una secuencia de escape, lo reconoce como el final de la cadena de valor y regresa. El resultado es una cadena vacía, sin barra invertida: " ".

Para obtener la aparición de una barra invertida, por lo tanto, necesitamos "escapar" de ella, o "deshacer" su significado especial. Esto es bastante simple. Nos limitamos a anteponer la barra invertida con otra, como esta:

Esta vez, cuando un analizador CSS lee la declaración en la norma, se encuentra con la primera barra diagonal, cambia a su "modo de secuencia de escape", encuentra una barra invertida (la segunda que escribimos) como parte del valor del string en análisis, y luego encuentra el final del valor por medio de las comillas. El resultado es lo que buscábamos originalmente, y el valor que devuelve el analizador de CSS es una barra invertida: "\". Tengan en cuenta que el CSS no hace distinción entre cadenas de comillas simples o dobles, por lo que en cualquier caso, dos barras invertidas son necesarias en el código para dar salida a una.

Una situación similar ocurre si se desea producir una cita doble dentro de una cadena entre comillas dobles. En lugar de escribir """, deberías escribir" \ ""; para decirle al analizador CSS que trate a la segunda cita como parte de un valor en lugar de cómo si fuera el delimitador del final del valor. Como alternativa, puedes utilizar comillas sencillas como el delimitador del string (contenido:'"';).

Después de la barra invertida de partida, solamente los dígitos hexadecimales (números del 0 al 9 y las letras A a la F) pueden aparecer dentro de una secuencia de escape. En las secuencias de escape, estas cifras siempre son referencia a puntos de código Unicode, independientemente del conjunto de caracteres utilizados en la hoja de estilo en sí. Como resultado, es posible representar los caracteres de manera uniforme en una hoja de estilo que no son posibles de incrustar directamente dentro de la hoja de estilo en sí.

Los caracteres acentuados (como la "E" en éste o café) son un ejemplo de una clase de caracteres a los que habría que darle escape en una cadena de CSS si la hoja de estilos estuviera codificada en formato ASCII en lugar de, por ejemplo, UTF-8.

Una aplicación útil para esto es integrar saltos de línea en el contenido generado. El punto de código Unicode para el carácter de nueva línea es U+00.000 A. En una cadena de CSS, esto se puede escribir como \00000A. De una manera similar a la que la forma hexagonal de un triplete para los valores de color se puede acortar, las secuencias de escape también se pueden acortar quitando los ceros a la izquierda desde el punto de código, así que otra manera de escribir una nueva línea es \A. He aquí una regla CSS que separa las dos palabras "Hello" y "world" con una nueva línea, colocando cada una en su propia línea.

Algo a tener cuidado al usar las secuencias de escape en strings de CSS es poner fin a la secuencia de escape en el que se proponen. Observen lo que ocurre si nuestro texto "Hello world" ha cambiado a "Hello boy".

Ahora, en lugar de una nueva línea (punto de código \A), nuestra secuencia de escape es una marca de citación de doble ángulo que apunte a la izquierda, o (punto de código \ AB). Nuestro contenido generado ahora dice "Hello « Oy". Esto sucede porque la "B" en el "boy"se interpreta como un dígito hexadecimal. La secuencia de escape termina en el siguiente carácter, la "O", ya que la letra no es también como un dígito.

De forma explícita, se puede concluir una secuencia de escape en una de dos maneras. En primer lugar, se puede especificar la secuencia en su totalidad utilizando los seis dígitos hexadecimales (incluyendo los ceros iniciales, si los hay). En segundo lugar, puedes añadir un espacio. Las dos reglas CSS siguientes, por lo tanto son equivalentes:

Sabiendo esto, ahora podemos dividir nuestro ejemplo anterior de la imagen a través de dos líneas justo donde queremos. Presten mucha atención a la adición del espacio en blanco en la declaración white-space: pre;.

Ya que estamos generando espacios en blanco y en la mayoría de las situaciones todos los espacios en blanco en HTML se acoplan en un único espacio, la declaración de white-space es necesaria para interpretar literalmente el salto de línea (como si todo el contenido se generará dentro de un elemento <pre>).

Debido a la diversidad de navegadores y las diferencias entre versiones es muy útil hacer uso de algunos hacks si queremos que la apariencia de nuestras páginas en Internet Explorer, sea igual que en el resto de los navegadores que soportan los estándares.

A continuación mostramos algunos hacks útiles, que podremos utilizar en nuestros archivos CSS para solucionar problemas que nos suceden a diario con nuestros diseños web cuando se muestran con Internet Explorer.

Para detectar la versión que está utilizando nuestro visitante, de este navegador, debemos usar los llamados comentarios condicionales.

Estos fueron creados por Microsoft para su navegador y sólo son soportados por éste. Como comienzan con <!– cualquier otro navegador asumirá que es un comentario y no ejecutará el código que hay dentro.

Este tipo de hack se sitúa entre las etiquetas <head> y </head>. Utilizándolo podremos detectar la versión del navegador y cargar el archivo CSS necesario.

En la condición podremos utilizar cualquiera de las que siguen. Pudiendo sustituir X por las versiones de Internet Explorer disponibles hasta el momento (5,5.5,6 o 7).

A continuación mostramos un ejemplo del uso de este hack:

Para el resto de los navegadores una propiedad con un guión bajo, u otro carácter alfanumérico delante es algo que no existe, y por tanto no la interpretan, pero Internet Explorer las asimila sin problemas. Esto es algo que podemos utilizar para definir propiedades en los estilos, destinadas sólo a este navegador.

Este hack funciona para todas las versiones de Internet Explorer que existen hasta la fecha, pero es posible que deje de funcionar en las próximas.
Teniendo en cuenta que los navegadores sobrescriben las propiedades si éstas se definen más de una vez, dejando establecida la que se define última; mostramos un ejemplo donde se muestran estos dos hacks que hemos descrito anteriormente.

En el ejemplo que mostramos anteriormente el color de fondo de la página se verá blanco para Firefox, negro para Internet Explorer 7 y gris para IE 6.

Buenas gente, hoy les traigo un pequeño truco para aquellos que están comenzando con el Diseño Web o para aquellas personas que todavía no lo conocían.

Muchas veces cuando estamos diseñando le damos estilos a cada elemento HTML y casi siempre tenemos muchos elementos con mismas características, por ejemplo tenemos un párrafo que esta en Negrita, y otro párrafo que también esta en Negrita pero con un Color diferente.

Asi como ven en el código de arriba, pero como se habrán dado cuenta tenemos dos veces escrita el código para la negrita, que en realidad no seria ningún problema si fuera algo básico, pero en grandes proyectos es necesario usar lo menos código posible para que la pagina cargue mas rápido, para que halla menor uso de banda de ancha entre otras cosas.

Ahora les mostraré una manera sencilla de reutilizar cada clase para ahorrarnos todo ese código innecesario.

Y ahora vemos como quedaría nuestro código HTML:

Como pueden observar dejando un espacio entre ambas clases se pueden ingresar todas las clases que queremos utilizar.

Esto seria muy útil ya que podemos reutilizar todas las clases que quisiéramos y nos ahorraríamos mucho Bodigo. A continuación les voy a dejar otro Ejemplo:

Codigo CSS:

Codigo HTML:

Les dejo el ejemplo para ver el resultado.

Una lista de errores comunes de principiante que suelen aparecer al aprender CSS:

1. Ignorar la compatibilidad con los navegadores.
Uno de los peores errores que podemos cometer es el de no querer ver la web o el blog en los navegadores más usados para ver como queda. Esto tiene que ver con la validación de W3 Consortium, así que si tienes tu sitio web correctamente validado, cumpliendo así los estandares, debería verse bien en todos los navegadores que cumplan a los estándares. Aunque también se pueden realizar hacks para Internet Explorer usando los comentarios condicionales.

Hay muchos sitios para ver la web en otro navegador de forma online, por ejemplo, en IE Net renderer podremos ver como queda nuestra web en IE 5, 6, 7 y 8, sin tener que abrir el navegador de Internet Explorer, de forma online.

2. Ignorar las resoluciones mínimas
Debemos adaptar nuestro sitio web hasta el formato de resolución mínima, que en la actualizad es de 1024 por 768. Es vital que adaptemos la web a las resoluciones más usadas porque si no perderemos muchas visitas.

3. Ignorar los frameworks
No debemos ignorar los frameworks, ya que estos nos ayudan a agilizar 960.gs hay muchos frameworks probados y testeados, funcionan a la perfección.

4. No utilizar clases genéricas
Debemos utilizar clases genéricas siempre que sea posible. Estas 3 clases mostradas a continuación debería usarse en todo el sitio, cada vez que quisieramos hacer un float. Un ejemplo sería:

El div sería:

5. No validar el HTML
Una de las peores cosas que podemos hacer es no validar nuestro código HTML. Validarlo nos evitará muchos problemas, ya que estaremos cumpliendo los estándares y, aplicado al punto nº 1, nuestra web se tendrá que ver en todos los navegadores que cumplan los estándares.

6. No validar el CSS
Esto por supuesto es un pecado tan grave como el mencionado en el punto nº 5, deberemos validar nuestro código CSS para cumplir los estándares.

7. Usar imágenes de fondo pesadas
Debemos evitar, por muy tentativo que parezca, usar imágenes de fondo que contengan muchos KB, es decir, que pesen mucho, ya que hará la carga eterna al visitante y abandonará la página o blog.

8. Usar CSS para todo
Tampoco tenemos que caer en el error de usar CSS para todo, por muy liviano que parezca, también hay que usar otras alternativas para tener una buena accesibilidad hacia nuestros lectores.

9. No usar CSS como clase
Debemos utilizar CSS siempre que podamos, haciendo la llamada desde el elemento hacia una clase, y no poniendo el código CSS ya dentro del elemento. Un ejemplo INCORRECTO sería este:

Debería ser así:

10. Usar demasiados archivos CSS
No se debe sobrepasar el límite de archivos CSS de 12, pero a partir de 5 ya empieza a ser malo. Lo correcto sería tener solo dos archivos CSS en las que ubicar nuestro código.

Esta lista de errores nos ayudará a ver que estamos haciendo mal, pudiendo aprender de nuestros propios errores.

Cada uno al aprender tiene sus errores, que va corrigiendo a lo largo del tiempo.

A continuación se detallan los peores errores mientras aprende CSS:

1. * { font-size:11px; }
No es recomendable poner asterisco al lado de la línea de código CSS. Se debe evitar siempre que se pueda.

2. * { color:#000; }
Lo mismo que con la fuente, no es recomendable poner asterisco al lado de la línea.

3. Declaraciones CSS largas

En vez de poner las declaraciones como he dicho arriba, podríamos hacer así:

4. Colores CSS largos

En vez de poner el código de los colores largo, podríamos ponerlo como muestra en el ejemplo, es decir, en vez de #FFFFFF, poner #FFF, el resultado será el mismo.

5. Declaraciones CSS multilínea
Según algunas opiniones, prefieren tener las declaraciones en una sola línea, en vez de tenerlas en varias líneas, es decir, en vez de esto:

Desde un sitio interesante les traigo un tutorial para crear un encabezado al que, al pasar el mouse sobre él, le aparezca un fondo a través de un efecto de desvanecimiento. Para esto se usará XHTML básico, CSS y algo de Javascript no obstrusivo mediante JQuery. El efecto final puedes observarlo aquí.

La imagen que utilizan en el ejemplo puedes verla debajo de este párrafo. Como verás se encuentran tanto la imagen normal como la que aparecerá con el efecto en un mismo archivo. De esta forma nos aseguramos de que cargue más rápidamente.

Es importante que las partes repetidas en ambas imágenes coincidan totalmente ya que cualquier diferencia, aunque sea de sólo unos pocos pixeles se notará bastante.

El HTML que utilizaremos es muy simple, tan sólo la siguiente línea:

De esto debemos ajustar las propiedades width con el ancho de nuestra imagen, height con su altura y en background debemos sustituir header.jpg por la ruta y el nombre del archivo.

Por último nos queda incrustar el Javascript. Antes que nada debemos enlazar nuestra página a JQuery mediante el código que dejo a continuación:

Si aún no tienes esta librería puedes descargarla de su sitio oficial.

Luego de esto colocamos la siguiente función en el sector head del sitio:

Con esto ya habremos terminado y tendremos nuestro header listo para usar.

¿Alguna vez te has preguntado porqué algunas web tienen el “don” de poder seleccionar el texto de manera distinta, es decir, con otro color? Pues es muy fácil, ¡aquí tienes la solución!

Para seleccionar el texto con el color que queramos, solo tendremos que pegar este código CSS. Usaremos la propiedad moz-selection en Firefox:

Obviamente, los colores de selección del párrafo se pueden cambiar por lo que queramos.Después deberemos seguir esta estructura en nuestro documento HTML:

Se puede ver un ejemplo en funcionamiento.

Los bocadillos de texto (tooltip) son un recurso muy interesante a la hora de mostrar textos informativos. En esta entrada aprenderemos a crearlos usando HTML, CSS y 3 imágenes. Estos bloques de información quedarán ocultos y únicamente se mostrarán al mover el ratón encima de un enlace.

Antes que nada es necesario mostrar las imágenes con las que ilustraremos y daremos forma a nuestro bloque oculto. Podéis descargarlas haciendo click aquí.

Código CSS
Daremos estilo a los enlaces junto con la etiqueta <span>. Esta etiqueta, es la que nos ayudará, mediante el atributo :hover, a mostrar el bloque de información cuando nos posicionemos encima de un enlace. Cabe destacar la línea display: block; para darle una disposición de bloque al contenido oculto.

Código HTML
El contenedor tiene asignado un ancho específico, aunque esto es opcional y puede ser eliminado. Dentro del enlace se insertan varias etiquetas con las que conseguiremos asignarle una forma y estructura al tooltip por medio de imágenes. Se añade una para la parte superior, otra para el fondo, el cual varía su altura según la cantidad de texto que haya dentro del bocadillo de texto (tooltip), y otra para la parte inferior, anidadas unas con otras.

Estandarización
CSS 2.1 válido.
XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento
Ver ejemplo del funcionamiento sobre el Tooltip oculto mediante CSS