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

1 Respuesta a El hack definitivo para tus CSS

Avatar

Fresqui.com

3 de Marzo de 2007 a las 10:05 am

[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...]

Avatar

Anónimo

8 de Septiembre de 2007 a las 5:14 am

a mi entender ese uso de los hacks. Si te has fijado //#hack {} no valida. de acuerdo con que el tema de la validación en este caso sería más bien un consejo que una prioridad, pero existiendo hacks que validan, como el uso del asterísco o del condicional, no me parece que este sea “el hack definitivo”.
En mi caso uso siempre una convibación del condicional con el asterísco.
Si te interesa puedes ver una análisis del mismo en este enlace
Seguro que al final tu tb optas por usarlo.

Avatar

Anónimo

12 de Septiembre de 2007 a las 9:39 am

Sinceramente no me atrajo en nada tu solución, ya que como comentaban anteriormente, si recurrimos a esos hacks, nuestras hojas de estilos no validan, y si NO VALIDA esta malo.

Lo mejor es usar comentarios condicionales[1] para IE que es el que mas da problemas, ya teniendo una hoja de estilos limpia no debería porque tener errores en la mayoría de los navegadores, además hacer un reset[2] inicial de estilos ayudaría bastante.

De seguro estas opciones son mucho mas profesional que la que haz planteado

Saludos
Víctor San Martín
http://questchile.wordpress.com

[1] = http://www.disenorama.com/tutoriales/comentarios-condicionales-para-ie
[2] = http://rudeworks.com/blog/css-inicial-by-rudeworks/

Avatar

Anónimo

16 de Septiembre de 2007 a las 8:37 pm

Pues sí… esto no es más que un ejemplo de los diseñadores de la vieja escuela: hacks, hacks y más hacks, marcado propietario y a nuestro pesar marcado basura.
Si nos fijamos bien el problema está desde el enunciado hasta la definición:
En CSS no hay “trucos”, esto no es el Counter :P , o se hacen las cosas bien o no se hacen y no es cuestión de engañar a “algo”. Es decir, hay “soluciones” reales y válidas… chapuzas las hace cualquiera ^^

Enunciado:
No se hace un diseño para uno u otro navegador, eso es lo típico de nuevo de la vieja escuela… Se usa marcado estándar (el de Firefox p.ej.) y se solucionan los problemas en los navegadores que no los respetan o no los entienden, ahora sí son los “hacks”. No es un diseño para Mozilla, Firefox… es un diseño para navegadores que respetan los estándares solo que IE hace lo que le sale de los coj****, lo habitual en M$ vamos.

Respecto al código de la web lo dejaremos estar… pffff y el código que se propone al menos se salvaría si se indica que es HTML, el uso de etiquetas como B o I solo muestra el poco conocimiento del nuevo rumbo de los documentos web. Quién no ha oído hablar de semántica, separación de contenido, estructura y presentación????…: El autor del artículo.

Lo peor… es que los estándares proponen un uso razonablemente lógico del marcado web pero es extensible a cualquier lenguaje o a cualquier técnica de desarrollo, por eso estas cosas solo son chapuzas.

Un ejemplo???:
IE7… si usas códigos de este estilo puedes tener que volver a cambiar tu marcado con la nueva versión si no se comporta como esperas (el ejemplo en un enlace de los anteriores comentarios)… o la nueva de Fx, de Opera, de Konqueror de Safari…
Eso pasaba antes y el derroche de recursos era enorme.

Si diseñas en base a los estándares NUNCA pasará esto, si un navegador se actualiza se hace MÁS compatible a los estándares, no al revés. Hackeas para los navegadores antiguos y poco a poco te olvidarás de ello porque cada vez serán más compatibles.

En fin… un saludo.

Avatar

TBS

12 de Abril de 2008 a las 5:22 pm

Si pero las medidas va genial…

Avatar

Nazgulillo

28 de Diciembre de 2007 a las 4:44 am

El hack, además de los motivos que han comentado antes de que no valida, es malo porque se mezcla presentación con contenido. En el momento en que se le quita la hoja de estilos al navegador, ambos div son visibles. Hay que tener siempre en cuenta que los navegadores no son sólo los que usamos nosotros, y algunos no usan hojas de estilos ;)

Avatar

hack pro pro

18 de Enero de 2008 a las 12:04 pm

10101010101011010101101

Avatar

Delacrushi

30 de Junio de 2008 a las 1:11 am

Desconosco que es lo que acontece con esta pagina.

http://www.siemprejovenes.innovasistems.com.mx

en Firefox se ve de maravilla

pero en Internet Explorer se distorsiona en gran medida la barra de anuncios de google , mi sistema de inscripción, asi como la busqueda de la pagina , ruego me indiquen como usas los hacks para solucionar estos problemas.

Avatar

Alfonso Marcos Vidal do O

2 de Octubre de 2008 a las 7:00 am

Podemos utilizar, en lugar de una librería js que puede ser algo pesada y con mucho código que igual no nos es necesario, una CSS diferente para meter los hacks de IE6.

Luego ponemos el conditional comment (CC) en nuestro html invocando a esta css y listo.

El validador CSS del W3C ignora el CC y tanto nuestras CSS como el XHTML pasarán los test.

Avatar

nacho

20 de Enero de 2009 a las 1:34 pm

hola mira tengo un blogs y en firefox bien pero en en micromierda nada para conseguir que se vea bien en explores si copio todo eel css y le añado las dos barras y copia el css otra vez corrijo todos los descuadres contestame porfavor gracias.Un saludo.

Dejar un comentario

Patrocinadores

¿Interesado en patrocinar TuFunción?

Suscripción

Primera División