Posts Tagged ‘ CSS

Javascript: obtener estilos tal cual son mostrados

Existe una forma de obtener los estilos de un elemento del DOM en Javascript tal cual son mostrados por el navegador. Como pasa usualmente, Firefox, Opera, Chrome y Safari lo hacen de una forma e Internet Explorer de otra.

En el blog de Robert Nyman encuentro el siguiente código:

function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm,"")

.getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}

La función getComputedStyle (todos los navegadores menos IE) devuelve un objeto con los todos los estilos que tiene el elemento oElm pasado por parametro.

En el caso de IE, currentStyle tiene los estilos en mayusculas, por lo que es necesaria la conversión a las mismas.

En mi caso, probando en Firefox 3 en Ubuntu, getPropertyValue me devolvía el valor de la propiedad que buscaba vacio. Corroboré que la misma existía y tenía un valor distinto de vacio.

Para solucionarlo, usé el getter de las propiedades del objeto de estilos (reemplazando la línea correspondiente en el código anterior):
str = "strValue = document.defaultView.getComputedStyle(oElm, '')."+strCssRule;
eval(str);

Supongo que esta forma también funciona en versiones anteriores de Firefox.

Bug en IE6 con overflow-x: scroll

Otro problema en IE6. Al querer utilizar este código CSS, para que selector tenga 400px de ancho y si su contenido es más ancho aparezca una barra de desplazamiento o scrollbar:

selector{
width: 400px;
overflow-x: scroll;
}

IE6 no respeta el overflow-x y selector toma el ancho de su contenido. Para solucionarlo hay que poner el siguiente código, que funciona en todos los navegadores:

selector{
width: 400px;
overflow: auto;
overflow-y: hidden;
overflow-x: scroll;
}

Solución a min-height en IE6

La propiedad min-height de CSS no funciona en Internet Explorer 6 y esto puede traer complicaciones a la hora de maquetar (como generalmente ocurre con IE6).

Sin embargo, existe una forma muy sencilla de solucionarlo:

selector {
min-height:500px;
height:auto !important;
height:500px;
}

Esta simple solución da a selector una altura mínima de 500px y funciona en IE6/7, Mozilla, Safari 1.2+, Opera 7.x+, etc.

Cómo diferenciar estilos para distintos navegadores en un mismo CSS

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.

Input dentro de Span en IE

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.

Estandarización del código

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