El hack definitivo para tus CSS

Por el 2 de marzo de 2007

en: Sin categoría

Un problema habitual con el uso de CSS es la falta de estandarización por parte de los diferentes navegadores por lo que hacer un diseño para Explorer no es lo mismo que hacer uno para Firefox.

Para poder aplicar diferentes diseños en una misma hoja de estilo tendremos que usar los Hacks, que no es otra cosa de utilizar reglas que únicamente las entiendan uno de los dos navegadores.

Ejemplo

Este es uno de los trucos CSS más interesantes que he visto en mucho tiempo, el truco nos permitirá mostrar un div u otro dependiendo del navegador que utilizemos o mejor dicho de si tuilizamos Internet Explorer o Mozilla y todo esto sin utilizar Javascript.

El truco está en una de las características de IE que es el no aceptar los comentarios formados por doble barra (//), por lo que cualquier cosa seguida por // lo entenderá como parte del código.
Ej:

// display: hidden;

Una buena combinación nos permitirá mostrar diferentes cosas dependiendo del navegador cómo en el siguiente ejemplo:

Tu no estas utilizando Internet Explorer.
Tu estas utilizando Internet Explorer.




Para probarlo es muy sencillo si te ha salido el cuadro rojo es porque estas utilizando un navegador que no es IE cómo Mozilla o Opera.

Y si te ha salido el cuadro verde es porque estas utilizando Internet Explorer.

Código Fuente

Este la hoja de estilos necesarias para este pequeño truco (No necesita explicación)

#nonie, #iebased{
margin: auto;
margin-top: 20px;
width: 400px;
padding: 10px;
background-color: #f8e6e6;
border: 1px solid #d2a2a2;
//background-color: #dbecd3;
//border: 1px solid #b1d2a2;
}

#nonie{
//display: none;
}

#iebased{
display: none;
//display: visible;
}

… y estos los dos div que se obtendrían dependiendo del navegador:

<div id=”nonie”> Tu no estas utilizando Internet Explorer. </div>
<div id=”iebased”> Tu estas utilizando Internet Explorer. </div>

El hack definitvo

Imaginemos que no sólo nos basta con aplicar diferentes diseños para Internet Explorer 6 y Mozilla, y que necesitamos tambien aplicar uno diferente para Opera y Internet Explorer 7.

Por poner un caso práctico, queremos usar un margen izquierdo que tiene 5px en Firefox y en Opera y 6px para IE6 y 7px para IE7:

margin-left: 5px; /* Margen izquierdo para todos los navegadores */
.margin-left: 7px; /* Margen izquierdo de 7px para IE6 y IE7, los demas navegadores todavia seguiran manteniendo el margen de 5px inicial */
_margin-left: 6px; /* Sólo IE6 leerá y entendera este estilo y aplicará el valor */

Enlaces Relacionados

Generar passwords accesibles con Php
Codigo Fuente del generador de passwords en PHP
Ejemplo de ejecución del script
PHP y MySql una estrecha relación
5 cosas que no sabías hacer con PHP
Generar documentos OpenOffice con PHP
Nueva versión de Notepad++
Hola Mundo!
Identificar las consultas más lentas de MySql
Crea sencillas gráficas con MySql
Programar un script PHP para saber quién está en línea
Consejos para optimizar PHP
Editando en Opera páginas web en tiempo real

  • Entradas relacionadas:
  • No hay coincidencias

Dejar un comentario