Cuando el suavizado de fuentes mediante ClearType está habilitado en Windows o el suavizado de fuentes está desactivado por completo, Internet Explorer muestra algunas fuentes embebidas mediante @font-face con un aspecto pixelado. Si el tamaño de fuente es pequeño se empeora la legibilidad.

Suavizado de texto desactivado

Suavizado de texto mediante ClearType

Este problema no ocurre cuando está activado el suavizado estándar.

Suavizado de texto estándar de Windows

Este efecto pixelado se puede corregir mediante una técnica algo sucia. Consiste en la utilización de un filtro CSS para desactivar el suavizado de texto. Funciona porque Internet Explorer no aplica el suavizado de texto mediante ClearType a los elementos con filtros CSS propietarios.

Código CSS:

.suavizado{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
min-height: 0;
color: green;}

Utilizando este filtro el resultado es el que se puede ver en las siguientes capturas:

Suavizado de texto desactivado. Texto verde con filtro CSS

Suavizado mediante ClearType. Texto verde con filtro CSS.

Sin embargo esta técnica tiene otro problema, y es que al hacer zoom para aumentar el tamaño de fuente, aparecen bordes negros alrededor de la fuente que nuevamente dificultan su legibilidad. Eso sí, sobre fondo negro no se aprecia este fallo, pero sobre fondo blanco nos encontramos con este aspecto:

Zoom sobre texto con filtro CSS. Legibilidad empeorada.

Si decidimos utilizar esta técnica sería recomendable ofrecer también un método para desactivarla a petición del usuario, por ejemplo mediante la adición o eliminación de una clase CSS a los elementos afectados.

Quizá con Internet Explorer 9 tengamos más suerte.

Más información en Smoother @font-face embedding in IE 7 & 8

De todas sus posibilidades, las dos que me resultan más interesantes y que voy a comentar son el uso de variables y las operaciones.

Instalación de LESS

En Mac OS X, que ya tiene instalado ruby y ruby-gems, es tan sencillo como escribir esta línea en la consola:

$ sudo gem install less

En Windows y Linux hay que instalar primero ruby y ruby-gems.

Una vez instalado podemos utilizar LESS escribiendo nuestro CSS en un archivo .less tal y como lo haríamos con un archivo .css, con la diferencia de que es necesario compilarlo.

Compilación de LESS

Para compilar un archivo .less escribimos lo siguiente en la consola:

lessc style.less style.css

Si no se especifica el archivo de destino, se creará uno con el mismo nombre pero con la extensión .css. Es decir, la siguiente línea generaría un archivo style.css

lessc style.less

Compilación automática

Afortunadamente, no es necesario compilar el archivo manualmente cada vez que hacemos cambios, ya que es posible detectar los cambios en el archivo .less y compilar automáticamente. Para hacer esto utilizamos la instrucción –watch sobre el archivo que queremos compilar:

lessc style.less --watch

Uso de variables y operaciones

Sobre las ventajas del uso de variables en CSS sobran las explicaciones. A todos nos gustaría poder definir unas variables para colores de enlaces, texto, encabezados, fondos, etc. y poder usarlas cuando sea necesario sin tener que rebuscarlas en la CSS. También a la hora de hacer un cambio global resulta mucho más cómodo cambiar solamente el valor de una variable que todas las coincidencias. (Sí, conozco el buscar y reemplazar).

Para mí, el uso de variables no es su punto más fuerte, ya que se pueden usar varibles en CSS mediante PHP u otro lenguaje o incluso creando atajos de teclado personalizados en tu editor de texto, de manera que cada vez que tecleas, por ejemplo, colorLink seguido de tabulador, se escribe un color hexadecimal definido previamente. Esta última opción se puede usar con Coda (Mac).

Lo que más me ha gustado de LESS es la posibilidad de realizar operaciones, algo que ahorra bastante trabajo cuando se utilizan diseños elásticos.

Operaciones CSS en diseños elásticos

En los diseños elásticos, una unidad es relativa al elemento al que se refiere. Por ejemplo, si tenemos un encabezado de 20px de tamaño de fuente, con un margen inferior de 7px, esos 7px deben calcularse respecto a los 20 del encabezado, de manera que tenemos que hacer una división (7 / 20).

h2{font-size: 2em; margin-bottom: .35em;}

Con LESS podemos escribir esta división en la CSS.

h2{font-size: 2em; margin-bottom: 7 / 20em;}

Se añade el em al 20 para conservar la unidad de medida. De otra forma el resultado sería 0.35 en vez de 0.35em;

Además de ahorrarnos la operación, ya sea mediante calculadora o cabeza (siempre supone un esfuerzo), podemos ver inmediatamente qué unidad en píxeles estamos manejando en cada momento, es decir, nos ahorramos la multiplicación correspondiente o la ojeada al Firebug.

Inconvenientes de LESS

Agrupación de selectores

Si escribimos algo como h2 a, h3 a, h4 a{font-weight: normal;} el resultado al compilar es
h2 a{font-weight: normal;}
h3 a{font-weight: normal;}
h4 a{font-weight: normal;}

Saltos de línea

Al compilar, cada declaración se escribe en una línea dando lugar a archivos más pesados.

@import y @media

Simplemente, no funcionan. Las variables en LESS van precedidas del signo arroba.

Transformación de colores en formato hexadecimal a palabras clave.

#fff se convierte en white.

Estos inconvenientes se pueden solucionar con la ayuda de alguna herramienta de compresión como Clean CSS, que permite agrupar selectores, eliminar saltos de línea, utilizar las formas cortas de códigos de color, etc.

Otra herramienta útil es MinifyMe, una aplicación en Adobe AIR que se limita a eliminar comentarios y dejar todo el código en una sola línea. También sirve para comprimir Javascript.

Más información sobre uso e instalación en la documentación oficial de LESS

Son muchos los que apuestan por el método utilizado en la CSS Reset de Eric Meyer en lugar del selector universal asterisco, al que suelen acusar de requerir un rendimiento excesivo para el navegador. Otro de los argumentos para evitar este selector es su efecto sobre elementos de formulario. Cito a Eric Meyer sobre esta cuestión:

This is why so many people zero out their padding and margins on everything by way of the universal selector. That’s a good start, but it does unfortunately mean that all elements will have their padding and margin zeroed, including form elements like textareas and text inputs. In some browsers, these styles will be ignored. In others, there will be no apparent effect. Still others might have the look of their inputs altered.

Después de hacer unas pruebas incluyendo todos los elementos de formulario que se me han ocurrido, he comprobado que Firefox aplica un padding-right y padding-left a los elementos OPTION que queda anulado al usar el selector asterisco, mientras que el resto de navegadores sigue mostrando ese espacio, por lo que en este caso el selector universal no ayuda a eliminar diferencias entre navegadores sino todo lo contrario.

Aunque es cierto que es un “derroche” aplicar margin y padding 0 a todos los elementos, incluso a los que por defecto no lo tienen, la regla del asterisco es facilísima de recordar y ocupa menos bytes que la tira de elementos HTML utilizados en la CSS Reset de Eric Meyer. Por otra parte, en cuanto al rendimiento, yo estoy en el punto de “si no lo veo no lo creo” y creo que en cualquier caso, tiene que ser imperceptible para el usuario final.

A pesar de estas ventajas me he decidido a probar el Reset de Eric Meyer.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{  margin: 0; padding: 0; font-size: 100%; }

No ha sido hasta este momento cuando he podido observar un efecto que no había visto usando el selector universal. En el HTML cargo las CSS en este orden: reset, 960.css (sistema de retícula de 960.gs) y por último la CSS específica de la página.

<link rel="stylesheet" type="text/css" media="screen" href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

Al cargar la página, durante unos segundos me aparecía el contenido de forma lineal, lo que quiere decir que por alguna razón se estaba retrasando la carga de 960.css, que define la anchura y posicionamiento de los bloques. Logicamente le he echado la culpa al Reset de Eric Meyer, que ha sido la única modificación hecha en mi CSS inicial, aunque la verdad es que no puedo demostrarlo.

Si observamos los elementos HTML incluidos en el Reset de Eric Meyer, vemos que hay unos cuantos que no tienen margen ni relleno, como SPAN, A, SMALL, etc., por lo que podemos prescindir tranquilamente de ellos.

En Perishable Press hay un post dedicado a las múltiples técnicas de reseteado que podemos usar, en el que aparece una versión reducida del Reset de Eric Meyer bastante aceptable.  Al final he decidido quedarme con una combinación, ni tan escasa como la que sólo aplica el margen y relleno a los elementos HTML y BODY, ni tan amplia como la versión completa de Eric Meyer.

html, body, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, th, td, pre, blockquote,
form, fieldset, legend, input, select, textarea, button{ margin: 0; padding: 0; font-size: 100%; }

La razón por la que añado el font-size: 100%, es porque algunos elementos de formulario no heredan el tamaño de fuente del body, como tampoco heredan la familia tipográfica.

Lo he probado en un par de proyectos en los que había usado el asterisco y no he observado ningún cambio, así que, hasta que no me encuentre con ningún inconveniente me voy a quedar con esta lista de selectores en lugar del asterisco.

Información relacionada y opiniones variadas

• Why “Reset” Style Sheets Are Bad
• Eric’s Archived Thoughts: Reset Reasoning
• Is Your CSS Reset Doing More Harm Than Good?
• Optimize browser rendering (Google Code)

Es ideal para páginas con galerías lineales de imágenes, en las que la carga de imágenes a petición (al hacer scroll) puede reducir considerablemente el tiempo inicial de carga de la página.

Existe un plugin para jQuery y también uno para Prototype, pero no acababa de encontrar uno que funcionara exactamente igual para Mootools, aunque existe uno, así que me he decidido a hacerlo basándome en el de Prototype.

Es un script bastante sencillo que no contempla otras opciones como ancho y alto mínimo de las imágenes o extensión (gif, jpg, etc). Su funcionamiento se basa en reemplazar el atributo src de las imágenes que no están en el área visible de la pantalla por el de una imagen de peso muy reducido (43 bytes) y utilizar el atributo src original cuando esta imagen pasa a estar en el área visible de la pantalla. La posición de la imagen se detecta con el evento scroll de la página.

Para saber si la imagen está en el área visible de la pantalla he utilizado el método explicado en otro post para hacer lo mismo con Prototype.

Archivos requeridos

• Mootools Core
• Imagen transparente de 1×1px

Uso

Se inicializa con el evento ‘domready’ del objeto window. En la demo se utilizan todas las imágenes, pero se podría utilizar cualquier selector, sólo las imágenes con una determinada clase, o las imágenes que estén dentro de una capa, etc.

window.addEvent('domready', function(){
   $$('img').each(function(el){
      new Kcmr.MooLazyLoad(el);
   });
});

Como única opción se puede pasar la ruta a la imagen de 1×1px que se utiliza como sustitución de la imagen original. La ruta por defecto es “images/blank.gif”

Ejemplo con otros selectores y ruta personalizada a la imagen de sustitución:

window.addEvent('domready', function(){
   $$('.clase img.clase').each(function(el){
      new Kcmr.MooLazyLoad(el, {
         blank: 'directorio/imagen.gif'
      });
   });
});

Demo y descarga

• Demo
• Descargar lazyload.js (1,61 KB)

Este script es especialmente útil para utilizar fuentes embebidas mediante @font-face, ya que la calidad del resultado depende muchísimo de si el suavizado de fuentes está o no habilitado en el SO del usuario. También es útil a la hora de decantarse por unas u otras fuentes de sistema, como por ejemplo, la Lucida Sans Unicode, que sin suavizado resulta de mala legibilidad en Windows.

Información relacionada (@font-face)

Bulletproof @font-face syntax

La mejor forma de utilizar @font-face.
Existe una traducción al español en CSSBlog

Font Squirrel

Kits de fuentes para usar mediante @font-face

@font-face generator

Nos permite subir una fuente y descargar el paquete completo para usar mediante @font-face

TTF to EOT Font Converter

Para convertir fuentes TrueType a OpenType (EOT), el formato usado por Internet Explorer

En Mac se puede conseguir escribiendo lo siguiente en la consola:

Machine:~ user$ sudo su
Password: (tu contraseña...)
sh-3.2# echo '/usr/local/mysql/bin' >> /etc/paths.d/mysql
sh-3.2#
exit

La primera vez que hice esto funcionó, pero después de la actualización a Snow Leopard (realmente no sé si tiene algo que ver) me he encontrado con la sorpresa de que el directorio /usr/local/mysql no existe:
/usr/local/mysql no such file or directory

Para los que utilicen MAMP y se hayan encontrado con este mismo problema, esta solución es la que me ha funcionado (utilizar el directorio de MAMP):

sh-3.2# echo '/Applications/MAMP/Library/bin/mysql' >> /etc/paths.d/mysql

Imágenes redimensionadas en Explorer 7

En el blog de ZURB, que por cierto, me encanta, nos muestran un pequeño truco para suavizar las imágenes en Internet Explorer entre otras técnicas para mejorar la presentación visual en varios navegadores

img{-ms-interpolation-mode: bicubic;}

Este método no funciona en Internet Explorer 6, para el que proponen usar algo un poco más sucio que lo anterior:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/path/to/image.jpg', sizingMethod='scale');

Afortunadamente, Internet Explorer 8 no tiene este problema.

Demo suavizado de imágenes (sólo para IE 7)

Actualización: script para aplicar el filtro a las imágenes redimensionadas

En este comentario proponen el uso de un pequeño script en jQuery para detectar si una imagen está redimensionada y en ese caso aplicarle el estilo correspondiente para IE 7 y el filtro para IE 6. De esta forma evitamos tener código no válido en la CSS y aplicamos estos estilos sólo a las imágenes que lo requieran. Ya que el código no aparece muy bien formateado en los comentarios, lo pego aquí.

Gracias por la aportación!

jQuery.each($('img'), function() {
   ancho_forzado = $(this).width();

   img = new Image();
   img.src = $(this).attr('src');
   ancho_real = img.width;

   if (ancho_forzado != ancho_real) {
      if ($.browser.version.substr(0,1) == '7') {
         this.style.msInterpolationMode = "bicubic";
      } else if ($.browser.version.substr(0,1) == '6') {
         $(this).attr('width', ancho_forzado);
         this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='scale')",
         this.runtimeStyle.paddingTop = this.height,
         this.runtimeStyle.height = 0;
      }
   }
});

Esta propiedad es útil para fijar un ancho máximo de página (bloque contenedor) en diseños fluidos, evitando que los bloques de texto sean demasiado largos y dificulten su lectura.

La solución quizá llega un poco tarde ahora que, ¡por fin!, el porcentaje de uso de IE 6 es menor que el de sus hermanos mayores, IE 7 y 8, y poco a poco vamos dejando de dar soporte (teniendo siempre en cuenta aquello de la degradación elegante) a este navegador.

La técnica varía según la alineación de página que se use. Para un contenedor centrado de 960 pixeles de ancho máximo, el código HTML y CSS a usar sería similar a este:

HTML

<div class="leftpad"></div>
<div class="rightpad"></div>
<div id="contenedor">
... bla bla bla ...
</div>

CSS

.leftpad{
width: 50%; float: left;
margin-right: -480px; height: 1px;
}
.rightpad{
width: 50%; float: right;
margin-left: -480px; height: 1px;
}
#contenedor{overflow: hidden;}
* html #contenedor{float: left;}

• El alto de los bloques con el margen negativo debe ser una unidad. No funciona un porcentaje o el valor auto.
• El margen negativo es igual a la mitad del ancho máximo del bloque contenedor, que no se declara en ningún otro sitio.

Existen otras soluciones para conseguir un ancho máximo en IE 6, basadas en Javascript o en el uso de expresiones propietarias de Microsoft.

Gracias al “modo coherencia” de Parallels, para abrir un archivo que tengamos en Mac en una aplicación de Windows, basta con arrastrar y soltar. Así de sencillo.

Ahora bien, cuando necesitamos usar un virtual host para algún proyecto y tenemos que acceder a él desde Windows, la cosa se complica un poco.

Este sería el caso de las aplicaciones web que usan rutas absolutas para vincular hojas de estilo, scripts, imágenes…, de manera que no nos sirve utilizar la dirección IP para acceder a ellas.

Necesitamos instalar Rinetd, concrétamente una versión modificada para Windows que podemos descargar en esta página.

Descomprimimos el archivo en C y modificamos el archivo rinetd.conf con los datos correspondientes a nuestro equipo. La segunda IP que aparece en la captura es la de nuestro equipo. Podemos encontrarla en Preferencias del Sistema > Compartir.
Si estamos utilizando MAMP y no hemos cambiado los puertos por defecto de MAMP, en lugar del puerto 80 tendríamos que usar el 8888.

Ejemplo de configuración de Rinetd.conf

Después instalamos WAMP en Windows y creamos el virtual host que necesitemos usar en el archivo httpd-vhosts.conf, que se encuentra en wamp\bin\apache\apacheX(*)\conf\extra
* X se corresponde a la versión de Apache

Configuración del virtual host en Windows

En el archivo hosts de Windows, añadimos el virtual host que acabamos de crear (línea destacada en la captura). En Windows XP este archivo está en C:\WINDOWS\System32\drivers\etc

Configuración del archivo hosts de Windows

Iniciamos WAMP o reiniciamos si estaba iniciado y ejecutamos Rinetd mediante la consola de Windows escribiendo:
C:\rinetd\rinetd.exe -c C:\rinetd\rinetd.conf

Captura de la consola de Windows

No veremos ningún mensaje en la consola, es lo normal. La dejamos abierta y ya podemos acceder a nuestro virtual host en Mac.

Internet Explorer accediento a un virtual host en Mac

La principal ayuda para llegar a esta solución: Access a local Mac server from Windows in Parallels

Para estos casos es útil crear un objeto en el que almacenamos todos los literales según el código del idioma.

Mediante una función que devuelva el valor del atributo xml:lang o lang del tag HTML, estableceremos el idioma del sitio y los literales a usar.

Ejemplo completo usando Mootools:

var MiClase = new Class({
  Implements: Options,
  // literales a usar
  options: {
    literales: {
      ES: {
        titleMostrar: 'Mostrar álbum',
        titleOcultar: 'Ocultar álbum'
      },
      EN: {
        titleMostrar: 'Show album',
        titleOcultar: 'Hide album'
      }
    }
  },
  initialize: function(element, options){
    this.setOptions(options);
    this.element = element;
    ...
    // llamamos a la función encargada de obtener el valor del atributo lang del tag HTML
    this.getDocumentLang();
    // según el valor de this.lang (devuelto por la función anterior) asociamos los literales de uno u otro idioma a una propiedad "literales" de nuestra clase "MiClase"
    this.lang == 'es' ? this.literales = this.options.literales.ES : this.literales = this.options.literales.EN;
  },
  getDocumentLang: function(){
    // obtengo el valor de xml:lang o de lang si xml:lang no se ha usado en el HTML
    this.lang = $$('html')[0].get('xml:lang') || $$('html')[0].get('lang');
    if(!this.lang) this.lang = 'es'; // idioma por defecto si no se ha declarado el idioma principal del documento
    return this.lang;
  },
  // uso de la propiedad literales en otras funciones
  funcionEjemplo: function(){
    var miElemento = ...;
    miElemento.set('title', this.literales.titleMostrar);
  }
});

En el caso de más de dos idiomas, en lugar del condicional usado dentro del método initialize en el ejemplo anterior, podríamos usar una estructura switch case.
Ejemplo:

initialize: function(element, options){
  ...
  this.getDocumentLang();
  switch(this.lang){
    case 'es':
      this.literales = this.options.literales.ES;
      break;
    case 'en':
      this.literales = this.options.literales.EN;
      break;
    case 'fr':
      this.literales = this.options.literales.FR;
      break;
    default:
      this.literales = this.options.literales.ES;
  }
}