Dado un contenedor que contiene uno o más elementos flotando en su interior, siempre y cuando puedas definir un ancho fijo:
#container {
width: 600px;
display: inline-block;
}
.floto {
float: left;
}
Este método se comporta bien cuando el ancho de los elementos interiores que están flotando es menor que el del padre; las cosas comienzan a complicarse cuando aumentan:
Para contrarrestarlo, define también ancho fijo en los elementos flotantes:
#container {
width: 600px;
display: inline-block;
}
.floto {
width: 280px;
float: left;
}
Nada es perfecto… es un método más.
]]>
Google Chrome Frame es un plugin open source que trae la rapidez y versatilidad de Webkit (el motor por detrás de Chrome y Safari) directo a IE6. Con esto, podrás fácilmente utilizar todo lo que siempre quisiste sin preocuparte de este malogrado browser, incluyendo CSS3, HTML5 y Javascript.
Lo bueno es que utilizarlo es pan comido: basta con agregar una etiqueta dentro del <head></head> en todas tus páginas que detecta si el usuario -que utiliza IE6- tiene o no ya instalado Google Frame: si no lo tiene, lo redirecciona a una página para su instalación; si el usuario ya lo tiene instalado, comienza automáticamente a instalarse:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Alternativamente, tambien puedes utilizar un script que realiza la misma detección:
<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>
CFInstall.check({
destination: "http://www.misitio.com"
});</script>
<![endif]-->
Esto incluye un <iframe> en el sitio donde le indica al usuario las instrucciones para instalar Google Frame. Una vez instalado, el usuario es redireccionado a lo que hayas declarado en destination.
¿Y cómo funciona?
La primera vez que lo instalé en un PC con WinXP e IE6, realmente me sorprendió. Lo que hace es colocar un marco por sobre el browser mismo, sin que se note que es algo ajeno al navegador. Este marco funciona con todos los botones que por defecto el usuario típico de IE6 está ya acostumbrado (y los que son algunas de las razones por las que no se actualizan nunca). Se ve como IE6, pero su motor es Webkit, lo que más nos interesa. Atrévanse a utilizarlo en sus proyectos, y ojalá puedan tener más tiempo y libertad para crear y menos para arreglar defectos.
Links:
]]>Desarrollar pensando en 3 versiones de browser de una misma empresa, cada uno menos peor que el otro, es un problema grave. En este artículo, quiero compartir mi experiencia sobre cómo lograr los menos problemas posibles, creando un layout que se vea de manera similar en la mayoría de los navegadores disponibles en el mercado. Básicamente enunciaré algunos consejos prácticos que por mi experiencia ayudan en esta ardua tarea:
Usar un buen reseter CSS.
No pretendo difundir el mío, pero sinceramente no me ha dado problemas de ningún tipo y me acompaña siempre en mis grandes proyectos. Con él, me permito reescribir los estilos que defina como prioritarios, sin perder tiempo en arreglar los defectos de IE6. Un impresindible en grandes proyectos.
Entender cómo funciona IE6.
No basta con cabecearse cuando encuentras un descalce en tu layout que piensas funciona perfecto en todos los navegadores, hasta que lo pruebas en IE6. Deberías conocer -y prevenir- que IE6 tiene problemas posicionando relative/absolute/fixed, con el modelo de caja, doble margen a elementos flotados, utilizando z-index, soportando canal alpha para archivos PNG, con porcentaje como unidad de medida, con overflow, con pseudo-classes, con min-height, max-height, min-width, max-width… etc, etc, etc. Con eso en mente, puedes evitar muchos problemas desde el comienzo.
Tener mucho cuidado con IE7.
Microsoft lo presentó como una necesaria actualización a IE6, pero fue un gran FAIL. Arregló algunos bugs, pero sacó a luz otros nuevos; realmente me intriga qué sucede con el departamento de informática de esa compañía, cómo logran caer en los mismos errores una y otra vez. El principal problema de IE7 es el uso de position: relative/absolute aunque me he deparado con algunos errores menores por ahí.
Usar meta-tag para IE8.
Siento que Microsoft se apresuró mucho en lanzar IE8, probablemente presionada por las contínuas mejoras de sus compeditores Opera, Safari y Mozilla. A raíz de esto, he visto como de una actualización a la siguiente el comportamiento de este browser respecto al renderizado de HTML y CSS es muy diferente, muy pero my diferente; a tal nivel de que un cliente reclame que su nuevo y flamante sitio no se vea bien en este navegador, y antes que yo pudiera investigar qué estaba sucediendo el cliente me comenta:
Bah, ahora se ve bien… actualice IE8 anoche y se arregló.
Mi solución hasta ahora es una alternativa que viene de la misma casa de Redmont: una etiqueta <meta> que hace que IE8 se comporte como si fuera IE7; así de simple. Hace lo mismo que el Compatibility Button, pero lo ejecuta desde el comienzo de la carga del documento:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
Probar, probar, probar…
Aunque seas un master de las hojas de estilo y del HTML, no deberías dejar para el final probar en los principales browser, y menos aún confiarte del preview de Dreameaver (grave error); debes probar casi que a cada nueva definición de propiedad. El costo de volver atrás es muy alto como para arriesgarte, no pierdas tu tiempo por confiarte demasiado. Probando en Safari y Firefox primero, luego en IE7 e IE6 para los detalles menores… pero nunca, nunca maquetar para IE: lo más seguro es que tendrás que deshacer más de lo que ya hayas hecho.
Links
]]>
¡Ah, pero no es soportado por IE6!
Mmm súper bueno, pero IE6 no lo permite…
Mejor eso no, no se va a ver en IE6…
Paralelo a esa conciencia de la que les mencionaba, han surgido corrientes más duras que mantienen proyectos que pretenden enterrar IE6 de la faz del mundo, y hasta le han dado fechas a su obituario. Mediante banners ó scripts (me incluyo con killIE), se pretende hacer notar al usuario de IE6 que hay mejores opciones; porque precisamente esa es la principal razón de porqué IE6 aún es un browser a considerar: la gran mayoría de sus usuarios no saben que existen otros, ya que fue el navegador por defecto que venía instalado en sus PC’s. Esa ignorancia nos ha afectado, y es nuestro deber hacerles ver que existen otras opciones mucho mejores, que pueden afectar su experiencia de navegación.
Personalmente he tomado una desición y postura hace un poco más de 1 año respecto a este tema: Les explico a los clientes las razones, les doy los argumentos necesarios, pruebas, estudios, estadísticas a la fecha para justificar que ya no ofrezco soporte para Internet Explorer 6.
¿Locura, no? Pues me explico.
- Ya no me limito para crear nuevas experiencias a través del diseño. Por ejemplo, utilizo PNG’s transparentes, aunque agrego un PNGfix por deferencia sólo para usuarios de ese browser.
- No me limito con las pseudo-class y selectores avanzados. los estilos degradarán bien, pero no como se verá en mejores browsers.
- Como he adquirido a través del tiempo la experiencia y la virtud de maquetar sitios cross-browser casi sin diferencias, no utilizo hacks ni comentarios condicionales.
- Utilizo librerías JS para efectos varios, pero no puedo hacer que se comporte igual como se ve en Firefox ó Safari; IE6 simplemente no puede con algunos efectos y animaciones.
Como pueden haber entendido, el sitio se verá bien tanto en IE6 como en los browsers modernos (no hay esfuerzo extra en eso), pero no tan bien y no como quisiera; ése es el soporte que ya no ofrezco y esa es mi lucha por educar al cliente y al usuario de ello.
Espero cada uno pueda dar lo suyo para que podamos evolucionar a mejores tecnologías, donde con menos esfuerzos en solucionar problemas podamos poner más energía en entregar satisfacciones. ¡HTML5 se viene, le tengo fe!
Links:
]]>
En esta ocasión les presento killIE, un plugin para jQuery que al activarse despliega un glamoroso y atento mensaje que advierte al usuario que está navegando con un pésimo browser y que gentilmente invita a probar uno nuevo. Como todo buen plugin, tiene ciertos parámetros que son configurables y su peso es ínfimo, lo que invita a ser utilizado global y masivamente.
Instrucciones:
- Incluye tu librería jQuery favorita (recomiendo 1.2+)
- Incluye el plugin jquery.killIE.js
- Inícialo:
$(document).ready(function(){
$().killIE();
}); - Algunos parámetros:
text: "un texto diferente al propuesto",
style: "estilos CSS diferentes al propuesto",
browser: firefox (por defecto) / opera / safari / chrome,
version: ie6 (por defecto) / ie7
Ver demo (con IE6, claro).
Ver demo (ahora con IE7 y algunos parámetros).
Bajar jQuery killIE plugin (1.2kb .zip)
]]>Últimamente he logrado probar e implementar 2 soluciones diferentes para solucionar este drama que nos reúne. Ambas se implementan mediante Javascript y necesitan de leves retoques para funcionar (no se frustren si no se ve a la primera, basta con pensar denuevo cómo están las estructuras de tus archivos y colocar adecuadamente las rutas).
Twinhelix PNG Fix v2
Esta segunda versión está de lujo y me hizo volver a creer en el trabajo de Twinhelix. Lo que hace esto es a través de un behavior agrega soporte casi-nativo del canal alpha de PNG para IE5.5+ sin tener que hacer cambios en el documento HTML. Otras ventajas:
- Conversión configurable de elementos PNG.
- Soporta para imágenes llamadas a través de la etiqueta HTML <img /> y mediante la propiedad CSS background-image.
- Soporta la repetición del background mediante background-repeat.
- Las imágenes pueden ser llamadas dentro del mismo documento o mediante hojas de estilos externas.
- Soporta cambios de estado de la imagen mediante CSS o Javascript.
- Soporta links que sean llamados en capas superiores a la del PNG transparente.
- Muy pequeño y liviano.
- Gratis.
Modo de uso:
- Copiar iepngfix.htc y blank.gif a la estructura de tu sitio.
- Copiar esta sencilla línea de código CSS que define en cuáles elementos el .htc hará que las imágenes soporten transparencia. Ten cuidado de llamar a la ruta del .htc correctamente:
img, div { behavior: url(iepngfix.htc) }
- Ten el cuidado de además entregar la ruta correcta en iepngfix.htc en que tienes el blank.gif. Te recomiendo en esta hacerlo de forma absoluta:
var blankImg = ‘/imagenes/blank.gif’;
- Eso es. Cuando termines todo eso deberías de ver algo similar al ejemplo 1.
Ver ejemplo 1 (con IE6, claro).
Bajar Twinhelix IEPNGFix v2
Unit PNG Fix
Irrumpió en la web hace muy poco y la está rompiendo. Este método se aplica mediante el llamado de un Javascript, el que al igual que el anterior lee un archivo clear.gif y lo aplica a los PNG’s haciéndolos transparentes para IE6. Su plus es que pesa sólo 1kb y para su implementación sólo se requiere llamar el .js. Claro que se debe tener el cuidado de aplicar las rutas, tanto del .js como del .gif correctamente. Puedes llamar el unitpngfix.js mediante comentarios condicionales, de la siguiente manera:
<!–[if lt IE 7]>
<script src="js/unitpngfix.js" type="text/javascript"></script>
<![endif]–>
En la primera línea de código del unitpngfix.js, debes configurar la ruta desde dónde llamar clear.gif, y nuevamente recomiendo que sea absolutamente:
var clear="/imagenes/clear.gif"
Y ya. Si seteaste bien las rutas, deberías de ver algo similar al ejemplo 2.
Ver ejemplo 2 (con IE6, insisto).
Bajar Unit PNG Fix
Y: ¿Cuál es mejor? Hasta ahora, ambas me han funcionado perfecto, por lo que les dejo a uds. definir su favorito.
]]>Desde que cambié el diseño de este sitio al actual donde la home tiene un scroll horizontal, no pude solucionarlo para IE6. Como ese es mi browser más odioado, lo dejé para ‘luego lo veo‘. Pero ya era hora de darle una solución final, y comencé a buscar sobre overflow: hidden en IE6. Precisamente, ese browser tiene un bug muy específico, que se da cuando tienes una caja contenedora que envuelve otra caja, y esta última tiene un position (relative o absolute) definido. Lo que sucede es que la caja que contiene no aplica el overflow: hidden; como debería, sin razón aparente.
Maldito browser. No me canso de maldecirlo. 80% del mercado por puro monopolio. Bueno, la solución es demasiado simple, pero había que investigar un poco antes. Basta con aplicar position (relative o absolute) a la caja contenedora también y overflow funcionará para IE6.
Así que ya saben, si se dan esas condiciones y su caja no esconde el contenido como debería, probablemente esta es la solución. Pero cuidado, si tienen elementos flotando, quizás algún método de clearfix a la misma caja contenedora será necesario.
]]>Cuando defines un float para una caja contenedora hacia un lado y luego le das un margin en esa misma dirección, lo que hace IE6 es simplemente duplicarla. Así nomás, sin pedir permiso.
Bueno el HTML y CSS para este ejemplo será bastante básico:
#caja {
float: left;
margin-left: 100px;
}
Para esta #caja, lo que se hizo fue darle un float: left; y un margin-left: 100px; Pero IE6 lo que hace es interpretar 200px a esa caja de margin-left. Quién lo entiende…
Pero bueno, la idea es darle una solución a esa gracia de browser (y no mediante un hack). Para corregirlo, es sólo agregar un display: inline; a #caja y todo se resuelte.
#caja {
float: left;
margin-left: 100px;
display: inline;
}