La más común al hacer una página web es que en un navegador se vea bien y en otro se vea diferente, este fenómeno ocurre porque cada navegador interpreta los estándares de una manera diferente incluso en sus distintas versiones, sobre todo en Internet Explorer (IE). Es aqui cuando requerimos la aplicación de diferentes hacks o trucos para que nuestra página funcione bien en los diferentes navegadores.
A continuación veremos unos cuantos trucos, hacks y consejitos a la hora de trabajar con CSS que seguramente nos quitaran un dolor de cabeza en algún momento y nos mantendran dentro de los estándares web.
SELECTORES ESPECIFICOS PARA CADA NAVEGADOR
Estos son unos cuantos selectores que nos permiten cambiar un estilo en un navegador determinado, pero no en los demás.
IE 6 y anteriores:
* html {}
IE 7 y anteriores:
*:first-child+html {} * html {}
IE 7 solamente:
*:first-child+html {}
IE 7 y navegadores modernos solamente:
html>body {}
Navegadores modernos solamente (IE 7 NO):
html>/**/body {}
Versiones recientes de Opera y anteriores:
html:first-child {}
Safari:
html[xmlns*=”"] body:last-child {}
Para usar estos selectores, debes colocarlos despues del estilo que quieres modificar asi:
#cuadro-contenido{
width: 300px;
height: 150px;
}
* html #cuadro-contenido{
width: 250px;
}
Esto anula el estilo y cambia el ancho por 250px en IE6 y sus versiones anteriores
PNG’s TRANSPARENTES PARA IE6
Como bien sabemos IE6 no soporta la transparencia de las imagenes en formato PNG, generalmente saca un recuadro gris que daña todo nuestro diseño. Para que nos funcione la transparencia necesitamos usar un filtro que solo funciona para IE6 aplicando los selectores del punto pasado asi:
* html #estilo-imagen {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”nombreDeArchivo.png”, sizingMethod=”escala”);
}
REMOVER RECUADRO PUNTEADO EN LOS HIPERVINCULOS:
Firefox produce un recuadro punteado cuando hacemos click en un link o hipervinculo.
Esto es muy fácil de arreglar, simplemente agregamos la propiedad outline:none en la etiqueta a
a{
outline: none;
}
ANCHO A ELEMENTOS INLINE
Si le aplicas un ancho a un elemento inline, solo funcionará en IE6. Esto es una falla del navegador ya que los elementos inline no deberían necesitar tener un ancho asignado. Sin embargo el asignarselo es algo muy útil por ejemplo si quieres todos los labels de un formulario del mismo ancho.
Todos los elementos HTML son de algun tipo, block o inline. Los elementos inline son los span, a, strong, em, entre otros. Los elementos de tipo block son los div, p, h1, form, ul, etc.
Nosotros podemos cambiar el ancho de un elemento inline. El truco esta en cambiar el elemento de tipo inline a tipo block.
span {
width: 150px;
display: block
}
Aplicando la propiedad display:block convertimos el span de un elemento inline a uno de tipo block, permitiendonos asi cambiar su ancho. Lo unico que debemos tener en cuenta es que los elementos de tipo block comienzan en una nueva linea por su margen y relleno por defecto, aunque tenemos la ventaja tambien de usar flotaciones si lo requerimos.
CENTRAR UNA PAGINA CON ANCHO FIJO
Para centrar una página web dentro del navegador, aplicale una posición relativa al div contenedor de la página y colocale una margen automática.
#contenedor {
margin: auto;
position: relative;
}
TECNICA PARA REEMPLAZAR IMAGENES
Para cumplir los estándares, siempre es mejor usar texto en los encabezados en vez de imágenes. Pero la mejor practica para poner las imágenes a nuestros encabezados es ubicar la imágen en el fondo con un texto oculto dentro de un div. Esto es muy útil para los lectores de pantalla, para el SEO, lectores de feeds, dispositivos móviles, o si simplemente desactivan los estilos css de nuestra página ya que alli solo se verá el texto.
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 {
background: url(heading-image.gif) no-repeat;
}
h1 span {
position:absolute;
text-indent: -5000px;
}
Como pueden ver usamos html normal para la etiqueta h1, y con css reemplazamos el texto por la imágen poniendo el texto 5000px a la izquierda, haciendolo invisible al usuario, para probar el efecto visualiza tu página en el navegador y luego desactiva los estilos css.
ANCHO MINIMO
Otro error en IE es que no soporta el atributo min-width. Este es extremadamente útil, especialmente para plantillas flexibles que tienen un ancho de 100% y no queremos que el navegador las contraiga. Para todos los navegadores exceptuando IE6 solo necesitas especificar min-width:Xpx; asi:
.contenedor {
min-width:300px;
}
Para IE6 es un poco más complicado, para empezar nesecitamos crear dos divs, uno dentro del otro
<div class=”contenedor”>
<div class=”contenido”>Content</div>
</div>
Indicamos el min-width del div exterior
.contenedor {
min-width:300px;
}
Ahora viene el hack, nesecitamos insertar el siguiente código
* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}
Cuando la ventana del navegador es redimensionada, el ancho del div exterior se reduce junto con el ancho del borde que no permite que se encoja más de la medida. EL div interno hace lo mismo deteniendose igual a la medida. Asi pues el div exterior define el ancho mínimo para el div interior.
ESCONDER EL SCROLL HORIZONTAL
Para remover la barra de scroll horizontal, debemos insertar la propiedad overflow-x: hidden; en el body así:
body {
overflow-x: hidden;
}
Esto es muy útil cuando tenemos una imágen o una pelicula de flash con un ancho muy largo en el navegador.
Esperamos que pongas en práctica estos trucos cuando te sean necesarios y que te sean de mucha utilidad.
