Comunidad para evacuar tus dudas sobre Joomla y para mostrarnos tu web en esta plataforma. +4000 miembros!!!!

Ver más
  • 4,813 Miembros
  • 4,003 Temas
  • 1,526 Seguidores
  • 0

Hacer compatible CSS3 en IE 6-8

Bueno, no vi este tema en la comunidad así que vendría a ser una suerte de aporte y pedido de ayuda al mismo tiempo. Encontré este sitio http://selectivizr.com/ que ofrece una utilidad de JavaScript que emula las clases CSS3 para que sean compatibles con IE 6-8.

El CSS3 ofrece muchas ventajas y herramientas útiles en el desarrollo de sitios, pero el gran problema es la falta de compatibilidad con las versiones de Internet Explorer mencionadas, que lamentablemente sigue utilizando un gran porcentaje de usuarios.

Mi pedido de ayuda viene por este lado. En un sitio desarrollado con Joomla, ¿dónde tengo que incluir el script para que funcione correctamente?

Muchas gracias por su ayuda y espero que les sea útil el aporte.

Saludos.
  • 0
  • 1Calificación
  • 1Seguidores
  • 3.415Visitas
  • 0Favoritos

19 comentarios

@tubo
hola @anfield
gracias, ese no lo conocía
justo estaba en eso, pero usando http://css3pie.com/
sencillo
agregando behavior: url(path/to/PIE.htc); en las clases del CSS, sin codigo javascript en html

lo elegí porque funciona en joomla, como puedes ver en sus sitios de ejemplo
http://css3pie.com/demos/
uno es joomla (decisivo para mí elección)
este: http://www.journeyoutreach.org/
también funciona en wordpress, y otros cms
tiene foro de soporte

entonces lo di por Aprobado =)
harto ya de crear divs con imagenes para los bordes redondeados
soporta lo siguiente: http://css3pie.com/documentation/supported-css3-features/

#59278B">Saludos
@tubo
tal cual, no es verdaderamente sencillo?
cuando usas una declaración de css3 por ejemplo:
border-radius:
declaras el borde usualmente para todos los navegadores, y luego agregas
behavior: url(path/to/PIE.htc); -->para IE
asi cada vez que uses declaraciones css3
solo te conviene usar url absolutas al archivo pie
cuando usas relativas tipo ../css/pie ó ../../css/pie
puedes no encontrarlo, con url absoluta te evitas este problema
Suerte!
@tubo
@anfield iba finalmente a responder tu pregunta e indicarte donde va el javascript
pero este http://selectivizr.com/ no funciona en absoluto
revisé cada demo site con IE8 y nada ocurre.
ni box-shadow, ni border-radius, ni caragua

la única esperanza es pie!
Hacer compatible CSS3 en IE 6-8
@tubo
te dejo un consejo para usar urls relativas
supongamos que tu template esta estructurado asi:
templates/nombre de la plantilla/css/archivos.css
en la misma estructura tienes imagenes, asi:
templates/nombre de tu plantilla/images/imagenes.jpg

pues te habrás fijado que los css tienen llamados relativos a las imagenes, por ejemplo
url (../images/bullet.gif)
y efectivamente funcionan, es decir tales imágenes logran verse en la plantilla.

pues el consejo es: imita esa estructura

templates/nombre de tu plantilla/pie/pie.htc

por consiguiente el llamado en los css debe figurar asi:
url (../pie/pie.htc)

tal como dice el consejo de pie en su explicación
"Note: this path is relative to the HTML file being viewed, not the CSS file it is called from"
no hay que confundir la posicion relativa del css y el archivo, sino considerar desde que archivo se ejecuta ese llamado
(en joomla ese llamado lo ejecuta siempre el index.php de la plantilla, estructuralmente el archivo pie (como las imagenes) es llamado desde "nombre de la plantilla" en el ejemplo anterior)

Saludos
@tubo
anfield dijo:Muchas gracias por las respuestas tubo. Te comento que puse en el ejemplo un text-shadow pero lo mismo iba para box-shadow y border radius.

Para la URL puse finalmente "behavior: url (http://www.midominio.com/templates/ja_purity_ii/pie/pie.htc)" pero aún no sucede nada. ¿Sigo haciendo mal algo?

¿Decís que simplemente ponga url (http://www.midominio.com)?


no queda claro que es "no sucede nada" o "no queda bien" trata de explicarte mejor.
estas diciendo que pie no te funciona en absoluto? o solo no funciona text-shadow?
las pruebas son en tu pc? o en servidor remoto?
@tubo
ok, en la respuesta anterior me olvidé de decir que pie no soporta text-shadow, por eso deje la alternativa de text-shadow para IE.

hay varias cosas para probar:

en esta página están algunos problemas conocidos que puede tener pie:
http://css3pie.com/documentation/known-issues/#content-type
uno de esos problemas es que el servidor remoto puede no permitir archivos .htc
una solución recomendada es ubicar el archivo pie.php (que viene en la descarga) en la misma carpeta que pie.htc y en los css llamar al archivo pie.php en vez de al .htc
o también agregar en el htaccess la siguiente indicación:

AddType text/x-component .htc



en cuanto a la url: http://www.midominio.com/templates/ja_purity_ii/pie/pie.htc esta bien indicada
se puede probar con comillas simples, o dobles:

behavior: url ('http://www.midominio.com/templates/ja_purity_ii/pie/pie.htc');



también se puede probar usar las declaraciones con prefijo pie

.miclase{
box-shadow: paratodoslos navegadores;
y
-pie-box-shadow: 10px 10px 7px green;
behavior: url ('http://www.midominio.com/templates/ja_purity_ii/pie/pie.htc');}


dice que es preferible no usar el prefijo cuando no sea necesario.
en el sitio de ejemplo, está usado al usar linear-gradient
-pie-background: linear-gradient(#333542, #4a4b5d);
@tubo
un detalle @anfield fijate que el archivo pie viene con el nombre en mayuscula PIE
cambiale a minuscula para asegurarte la coincidencia
@tubo
si, la verdad que si, funciona.
el box-shadow de http://www.journeyoutreach.org/ lo tienen los botones en el hover (aparece al pasar el mouse) viendolo con IE8 funciona.

y hace poco respondí un tema con una foto, es un sitio de pruebas de mi pc y si observas bien, un modulo de menu en el articulo,
tiene boxdhadow y funciona con IE
Hacer compatible CSS3 en IE 6-8

lo tengo escrito de esta manera:

.moduletable_menu {
position:absolute;
z-index:1;
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.80);
-moz-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.80);
-webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.80);
background:white;
behavior: url(http://localhost/sitio17-1/templates/ja_t3_blank/pie/pie.htc);
}
solo un detalle, si no le pones color de fondo, IE lo intrepreta como transparente
asi que background:white es el unico requisito en este caso para ie, los demas navegadores sobreentienden que el fondo el blanco.
suerte
@tubo
sitio de ejemplo:

.green-button:hover, .green-button:active, .right-column .readon:hover, .right-column .readon:active {
color: #FDF8ED;
background: -moz-linear-gradient(#436863, #3B5152);
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#436863), to(#3B5152));
background: linear-gradient(#436863, #3B5152);
-pie-background: linear-gradient(#436863, #3b5152);
-moz-box-shadow: 0px 0px 3px #101113;
-webkit-box-shadow: 0px 0px 3px #101113;
box-shadow: 0px 0px 3px #101113;
border-right: solid 1px #2E4243;
border-bottom: solid 1px #2E4243;
border-left: solid 1px #577A76;
border-top: solid 1px #577A76;
position: relative;
behavior: url('http://www.journeyoutreach.org/templates/journey/css/PIE.htc');
}

la diferencia con mi ejemplo, es que el archivo PIE tiene nombre en mayuscula
y el background es otra propiedad de css3, pero siempre tiene que estar declarada.
Tienes que ser miembro para responder en este tema