¿Un buen framework de JavaScript que agrega soporte CSS3 a IE6-8 y falta CSS3 en IE9?

Question

Me sorprende que a la versión de lanzamiento de IE9 le falte soporte para algunos elementos más básicos de CSS3 como text-shadow e border-image.

¿Cuál es el marco de JavaScript más completo para agregar/emular elementos CSS3 a IE6-9 en lugar de utilizar un conjunto de marcos más pequeños como ie-css3, CSS3PIE, Modernizr, html5shiv, ... etc.?

Estoy seguro de que no hay un marco único que lo haga todo, pero estoy buscando el más cercano.

Answer 1

¿Qué? ¿Estás sorprendido de que IE no sigue los estándares? Cuándo aprenderá la gente ...

Pruebe Selectivizr. Desde el sitio web: "selectivizr es una utilidad JavaScript que emula las pseudo-clases de CSS3 y los selectores de atributos en Internet Explorer 6-8. Simplemente incluya la secuencia de comandos en sus páginas y selectivizr hará el resto". No sé cuál es el soporte de IE9, pero debería ser mucho más fácil que IE6, así que supongo que debería funcionar bien.

Aún necesitará algunos de esos "marcos más pequeños", porque hacen lo que hacen bien, son lo suficientemente pequeños, así que no tiene sentido reinventar la rueda solo por el hecho de tener un gran marco en lugar de algunos más pequeños. Es difícil hacer un marco único para todos, por eso tienes cierta diversidad, y creo que es algo bueno.

Pero no esperes que solo incluyas una biblioteca y todos los navegadores obtendrán un soporte impecable de CSS3 porque eso no sucederá en el corto plazo.

Si desea efectos avanzados que funcionen consistentemente en todos los navegadores desde IE6, le recomendaría usar Raphaël. Utiliza VML en IE y SVG en otros navegadores. La API también es más simple que CSS, pero eso es por supuesto una cuestión de gusto. Pero incluso si no es la API, es bastante difícil superar el argumento de que puedes tener esquinas redondeadas y otros objetos que se ven iguales en Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ e Internet Explorer 6.0+ sin usar imágenes.

Answer 2

Los elementos en su lista cada uno hace cosas diferentes. No creo que tenga sentido que un único marco implemente todas estas cosas.

Solo incluya los de su lista que realmente necesite.

• Debe (obviamente) utilizar solamente html5shiv si está utilizando elementos HTML5 en su página:

  <!--[if lt IE 9]> 
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
  <![endif]--> 
  

• Modernizr tiene la funcionalidad de html5shiv además una gran cantidad de detección de características:

  Modernizr no agrega la funcionalidad faltante a los navegadores; en su lugar, detecta la disponibilidad nativa de las características y le ofrece un modo de mantener un buen nivel de control sobre su sitio independientemente de las capacidades de un navegador.

  Use html5shiv si solo desea aplicar estilo a los elementos de HTML5 en IE.Utilice Modernizr si quieres hacer cosas diferentes dependiendo de si ciertas características son compatibles, por ejemplo:

  .my_elem { 
      border: 1px inset #666; 
  } 
  .borderimage .my_elem { 
      border: none; 
      border-image: url(fancy-border.png) 5 5 5 5 round; 
      -moz-border-image: url(fancy-border.png) 5 5 5 5 round; 
      -webkit-border-image: url(fancy-border.png) 5 5 5 5 round; 
  } 
  

• La idea detrás de CSS3PIE y Modernizr es muy diferente.

  La forma CSS3PIE se utiliza con mayor frecuencia es el interior de CSS:

  #myElement { 
      ... 
      behavior: url(PIE.htc); 
  } 
  

  Modernizr le permite usar la nueva funcionalidad de fantasía nativa mientras que ser seguro en el conocimiento que se puede proporcionar cualquier encargo de repliegue que desee para los navegadores que no es compatible con la funcionalidad específica.

  Considerando que CSS3PIE intenta emular perfectamente un conjunto limitado de propiedades de CSS3 para que funcione solo en las versiones anteriores de Internet Explorer, sin ningún trabajo adicional que no sea incluir la propiedad behavior en elementos relevantes.