A pesar de su gran documentación online o los libros sobre la librería publicados, puede que su sintaxis resulte un tanto extraña para un novato, además de no saber muy bien cuáles son las posibilidades reales de jQuery. Para ello, es muy útil este artículo de DotNetStacklers (es la primera parte, espero que pronto publiquen la segunda). Y por cierto, los desarrolladores en .NET pueden aprovechar para darle una oportunidad a jQuery ahora que se integrará con el Intellisense en Visual Studio...

La solución tradicional a este problema solía ser la de crear los textos necesario mediante imágenes. La ventaja de esto es que el aspecto en cada navegador sería exactamente el esperado, y no hay límites en cuanto a los efectos o fuentes que se quieran usar... Pero es muy poco flexible, ya que para cada texto hay que crear la imagen correspondiente.

La siguiente solución es la creación las imágenes mediante flash. Esta solución es bastante versátil, pero tiene el problema de la accesibilidad del texto de cara a su indexación por los motores de búsqueda (aunque mitigada con las últimas actualizaciones de Google, esto sigue siendo un problema de cara a la optimización del contenido para los buscadores).

Aquí es donde entra typeface.js: nos permite de una manera sencilla (ver el código a continuación), multiplataforma (no importa el navegador) y flexible (permite aplicar diversos efectos que los navegadores no implementan de una manera uniforme) dar estilo a los textos de la página. Con algo como esto ya se dibujarían los textos...

<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
 
<div class="myclass typeface-js" style="font-family: Helvetiker">
	Text here in Helvetiker font...
</div>

Y uno de los resultados de uso podría ser el siguiente, sacado de su web...

Aunque evidentemente, esto no es tan maravilloso. El renderizado aún no es del todo eficiente, y aunque funciona bien para títulos y apartados concretos, dibujar toda la web mediante typeface.js es muy costoso. En cualquier caso, si os interesa no dudeis en echar un ojo a los ejemplos y a la explicación de su uso...

Más información | Typeface.js
Vía | Delicious Popular.

Además, es multinavegador y compatible con CSS3. Sin duda, una opción interesante para incorporar un motor de selectores a los proyectos web propios en los que no se quiera incluir una librería más pesada, ya que su tamaño (10Kb) lo hace ideal para ello.

Eso sí, el motor está aún en la versión 0.1 así que es probable que vaya saliendo que otro bug...

Más información | Noticia del lanzamiento
Vía | Ajaxian.

Los problemas que han recopilado son los siguientes:

1. Establecer alturas iguales.
2. Solución al problema de IE6 con los PNG transparentes.
3. Cambiar clases CSS con Javascript
4. Selectores basados en el navegador en CSS (tan simple como: $('html').addClass($.browser);)
5. Dar soporte a alturas y anchos mínimos/máximos
6. Centrar elementos (vertical y horizontalmente)
7. Mostrar etiquetas Q en Internet Explorer
8. Aumentar el tamaño de los elementos clickeables (en los enlaces)
9. Carga perezosa
10. bgiframe: alivia el problema de trabajar con los z-index en Internet Explorer.
11. ieFixButtons: arregla el comportamiento lleno de bugs de los botones en Internet Explorer (6 y 7)
12. Arreglar el "overflow"

Sin duda, un post que conviene tener a mano.

jQuery("div").hide("slow", function(){
  jQuery(this)
    .addClass("done")
    .find("span")
      .addClass("done")
    .end()
    .show("slow", function(){
      jQuery(this).removeClass("done");
    });
});

Tras unas modificaciones realizadas a modo de prueba por el equipo de desarrollo de jQuery, el código anterior se transformaría en el siguiente, sin ser necesario hacer mención explícita al objeto this:

jQuery("div").chain("hide", "slow")
  .addClass("done")
  .find("span")
    .addClass("done")
  .end()
  .chain("show", "slow")
    .removeClass("done")
  .end()
.end();

A Jonh Resig no le acaba de gustar, porque pasa como argumento una cadena a la segunda función, porque no le convence el nombre del método ("chain") y por último, porque si modifican jQuery para que acepte este "ultraencadenamiento", se pierde la posibilidad de invocar a funciones nativas de Javascript, como en este ejemplo:

jQuery(this).html( jQuery(this).attr("href") )

Así que, de momento, la modificación se está debatiendo. A mi sí me gusta, porque puedes seguir accediendo a las funciones de Javascript mediante funciones de jQuery, y entiendo que ahorraría más líneas de código de las que costaría usarlo, pero en cualquier caso coincido con John Resig en que es un hack bastante interesante...

Vía | Blog de Jonh Resig.

La función en cuestión es la siguiente:

function cambiarHojaDeEstilos(title) {
	            var i, a, main;
	            for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		            if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
			            a.disabled = true;
			            if(a.getAttribute("title") == title) a.disabled = false;
		            }
	            }

Para usarla, basta tener varias hojas de estilos cargadas en la página...

<link title="hoja1" href="ejemplo1.css" rel="stylesheet" type="text/css">
<link title="hoja2" href="ejemplo2.css" rel="stylesheet" type="text/css">
<link title="hoja3" href="ejemplo3.css" rel="stylesheet" type="text/css">

... e invocar a la función. Por ejemplo, para cambiar al hacer click en un enlace:

<a href="#" onclick="cambiarHojaDeEstilos('hoja1');">Cambia el CSS</a>

A continuación podéis descargar un pequeño ejemplo con una demostración simple: Cambiar Hoja de Estilos con JS

Vía | A List Apart.