14 de Abril del 2008
Siempre que se maqueta una página con CSS hay que probarla en distintos navegadores, ya que no todos interpretan los estilos de la misma forma. Generalmente, los problemas aparecen con Internet Explorer en sus versiones 6 y 7 (ni hablar de las anteriores).
Para establecer distintos atributos a los estilos para cada navegador se puede utilizar lo siguiente:
.estilo1 {
width: 100px !important; /* Firefox, Safari, Opera, etc */
*width: 101px !important; /* IE7 */
*width: 102px; /* IE6 */
}
El CSS siempre privilegia la última lÃnea que contiene un atributo en caso de que se encuentre duplicado. Pero en este caso, sólo los navegadores IE reconocen los atributos que comienzan con asterisco. AsÃ, todos los demás navegadores interpretarán que el ancho de estilo1 es 100px.
Al usar !important, se indica al navegador que privilegie ese atributo por sobre otros que vengan a continuación y se refieran a lo mismo. Todos los navegadores reconocen esta expresión, salvo IE6. De esta forma, IE7 leerá las dos lÃneas que comienzan con asterisco, pero privilegiará la de ancho 101px.
Por último, IE6 sólo reconocerá la última lÃnea e interpretará que el ancho de estilo1 es 102px.
2 de Noviembre del 2007
A diferencia de Firefox, cuando se tiene un campo input dentro de un span en IE, el input hereda los valores de márgenes del span.
Esto puede generar problemas en la visualización, ya que el span tendrá más altura y más ancho. La solución es simplemente agregar margin: 0px a los estilos del campo input.
24 de Mayo del 2007
Algo que no hay que dejar de tener en cuenta a la hora de hacer una página de internet, es que el código cumpla con los estándares establecidos. Esto sirve, a parte de para hacer las cosas correctamente, para que la mayorÃa de los navegadores pueda mostrar correctamente la página (salvo IE que cumple con sus propios estándares).
También es importante para el SEO (search engine optimization), ya que Google da privilegio (aunque no mucho, se ve en los resultados) a las páginas que cumplen con los estándares.
World Wide Web Consortium, o W3C, es la organización que se encarga de estandarizar el código web. En su página se encuentran las especificaciones que indican de que manera se debe usar cada propiedad, cada tag, etc.
También es su web, hay herramientas destinadas a verificar que las páginas cumplan con los estándares y, de no ser asÃ, mostrar los errores.
Las herramientas de verificación o validación son las siguientes:
También hay una herramienta que busca enlaces (links) rotos: http://validator.w3.org/checklink