Para salir del hoyo

miércoles, noviembre 16, 2011

La guía defitiva de hacks css

Años y años de probar uno y otro, fallar y acertar, utilizar javascript para corregir la visualización en los sitios en los diversos navegadores, me llevó a tener una colección de hacks (los cuales no son de mi autoría, sino que los he encontrado en diversos blogs) que hoy quisiera compartir para quienes se encuentran en ese momento, buscando y buscando por donde sea un código que nos haga hacer que el navegador muestre nuestra página tal y como la concebimos.
De entrada debo decir que usarlos todos al mismo tiempo es un error; seguramente nuestra hoja de estilos esta mal y es necesario replantearlo.
Los hacks aquí presentados son para ser usados en caso de REALES emergencias, de ser posible no usarlos ya que, la mayoría no pasan la validación en la W3C.
Pero cuando se dan esos casos en los que no sabemos qué sucedió, esta lista ayudará para salir avante de estas situaciones cuando el tiempo (que seguramente así es en todo momento) es crucial.
No son todos los que existen, pero estos son los que a mi me han funcionado, espero a alguien más le sirvan:

HACKS PARA FORZAR A NAVEGADORES A CUMPLIR LAS REGLAS (ESPECIALMENTE IE)
No todos estas reglas cumplen con los estándares de la W3C, por lo que la validación no pasará en algunos casos. Usarse sólo en caso muy necesario.

#selector: clase, id u objeto al que se requiera aplicar la regla (por ejemplo: #container, .main).
atributo: objeto css al que se haga referencia (margin, padding, float, etc.)
propiedad: propiedad del atributo css al que se haga referencia (left, right, 0px, etc.)

REGLA PARA IE6 Y ANTERIORES:
NOTA: Si los objetos se encuentran flotados (float), es necesario utilizar el atributo "zoom: 1" y "display: inline";

* html #selector { atributo: propiedad;}

Para el :hover, :active y :focus en IE6, es necesario incluir el archivo csshover3.htc, el cual se descarga de la página http://peterned.home.xs4all.nl/csshover.html
Descarga la versión 3 y ponla en tu sitio, y aqui corrige la dirección relativa hacia el archivo.

#selector { behavior: url(csshover3.htc);}

Para las transparencias en IE6, es necesario incluir los archivos iepngfix y blank.gif, los cuales se descargan de la página http://www.twinhelix.com/css/iepngfix/
Descarga los archivos y lee las instrucciones, y aqui corrige la dirección relativa hacia el archivo.

#selector { behavior: url(iepngfix.htc); }

Para los bordes redondeados en IE6, es necesario incluir el archivo border-radious.htc, el cual se descarga de la página http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Descarga la última versión y ponla en tu sitio, y aqui corrige la dirección relativa hacia el archivo.
NOTA: Este hack no funciona en los inputs.

#selector { behavior: url(border-radius.htc); }

REGLA PARA IE7 Y ANTERIORES

*:first-child+html #selector { atributo: propiedad; }

REGLAS PARA IE7 UNICAMENTE:

*+html #selector { tributo: propiedad; }

REGLAS PARA IE8, requiere los asteriscos, las diagonales entre el atributo y los dos puntos, así como la diagonal invertida y el 9 al final:

#selector { atributo /*\**/: propiedad \9; }

REGLAS PARA NAVEGADORES A PARTIR DE IE7 (Chrome, Firefox, Safari, IE8, etc.)

html>body #selector { atributo: propiedad; }

REGLAS PARA NAVEGADORES MODERNOS (Incluye IE8+)

html>**/body #selector { atributo: propiedad; }

REGLAS PARA CHROME:

body:nth-of-type(1) #selector { atributo: propiedad; }

REGLAS PARA FIREFOX:

@-moz-document url-prefix() {
#selector { atributo: propiedad; }
}

REGLAS PARA SAFARI:

html[xmlns*=""] body:last-child #selector { atributo: propiedad; }

REGLAS PARA SAFARI 3.0 Y OPERA 9:

@media screen and (-webkit-min-device-pixel-ratio:0) {
#selector { atributo: propiedad;}
}

UNICAMENTE OPERA 9:

html:first-child #selector { atributo: propiedad; }

OPERA 11:

@media not screen and (1) {
#selector { atributo: propiedad; }
}

lunes, octubre 31, 2011

jCarousel con controles externos

Siempre he elegido usar la librería jCarousel para implementar los carruseles, es una librería basada en el framework jQuery. En este ocasión tuve que implementarla poniéndole vínculos externos, es decir, con los links afuera, que cambiara automáticamente y que cuando se presionara algun vínculo, siguiera el orden. Este era para hacer un banner, de estos que son muy populares actualmente.

Tuve que hacer algunas implementaciones y tras algunos clicks en google, conseguí hacer que el carrusel hiciera lo esperado.

Aquí los pasos:

1. Descargar la última version del jCarousel (http://sorgalla.com/jcarousel/) y poner la última versión de jQuery al inicio del documento (http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js). Empezamos por construir de la forma habitual los elementos del carrusel, pero al principio construir también los enlaces los cuales más abajo les daremos funcionalidad:

      1
      2
      3
      4
      5
      6

Texto del banner 1

Texto del banner 2

Texto del banner 3

Texto del banner 4

Texto del banner 5

Texto del banner 6

2. Hacer una función que construya los vínculos externos para que puedan ser presionados en cualquier momento del banner:
function llamaCarrusel (carousel) {
$('.jcarousel-control a').bind('click', function() {
     var index = $(this).attr("id").split("_");
     carousel.scroll($.jcarousel.intval(index[1]));
     $(".jcarousel-control a").removeClass("active");
     $(this).addClass("active");
return false;
});
$('.jcarousel-scroll select').bind('change', function() {
carousel.options.scroll =            $.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
});
};
Donde .jcarousel-control es el elemento que pusimos al inicio de nuestro HTML. Lo que hace esta función será agregar una clase a cada elemento, la clase .active en el elemento cuando se haga click y al mismo tiempo removerla de todos los demás elementos.

3. Crear la función que hará posible saber en qué elemento se encuentra actualmente el script y a ése ponerle la clase .active y eliminarla del resto:
function activaBoton (c, o, i, s) {
var size = c.options.size;
i = (((i - 1) % size) + size) % size;
$('.jcarousel-control a').removeClass('active').addClass('inactive');
$('.jcarousel-control a:eq('+i+')').removeClass('inactive').addClass('active');
}
4. Por último hacer la llamada de ambos script en los eventos initCallback e itemVisibleInCallback, esto al inicio del documento:

$(document).ready(function() {
if ($("#bannerHome").length) {
$("#bannerHome").jcarousel({
scroll: 1,
auto: 4,
wrap: 'circular',
initCallback: llamaCarrusel,
itemVisibleInCallback: activaBoton,
});
}
});
Espero a alguien le sirva.