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:
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
Solicitar ayuda
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.
Para medidas
Si pero las medidas va genial...
10101010101011010101101
10101010101011010101101
El hack, además de los
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 ;)
Pues sí... esto no es más
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.
Victor San Martin
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/
No es una buena solución
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.
[Un problema habitual con el
[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...]
Enviar un comentario nuevo