Durante muchos años, los desarrolladores web trabajaron sobre la premisa de que la enorme mayoría de los usuarios entraba a sus sitios desde Internet Explorer, a través de una computadora de escritorio. Con la aparición de nuevos navegadores, que podían presentar diferencias enormes al mostrar la misma página, muchos optaron por desarrollar versiones alternativas de sus sitios o, peor aun, exigir la instalación del browser de Microsoft como condición excluyente para una buena experiencia de usuario. Hoy, que la diversidad de navegadores y dispositivos parece crecer sin límite, no hay mejor opción que el enfoque cross-browser: intentar que el mismo sitio funcione bien, y de manera uniforme, en la mayor cantidad de plataformas posible.

Las diferencias visuales entre navegadores vienen dadas por sus motores de renderizado: piezas de software que se encargan de representar las páginas web interpretando el código escrito en lenguajes de marcas (HTML, XML, etc.) y de estilos (CSS, XSL, etc.), además de cargar otros tipos de contenido (como archivos de imagen, sonido u otros, para los cuales puede ser necesario un plug-in). Estos motores están programados en lenguajes con características de bajo nivel y se comunican, generalmente a través de alguna aplicación intermedia, con el sistema operativo sobre el cual se ejecuta el browser.

Algunos browsers diferentes utilizan el mismo motor de renderizado, lo que determina que muestren las páginas de manera similar. Por ejemplo, Chrome y Opera usan el motor Blink, que a su vez es un desprendimiento del motor WebKit, utilizado actualmente por Safari. Sin embargo, esto no es razón para confiarse, ya que los browsers principales tienden a desarrollar sus propios motores. Así, Firefox usa Gecko e Internet Explorer, Trident.

Cada motor suele introducir características de CSS no aceptadas oficialmente, o bien todavía en fase experimental. Sin embargo, otro motor puede no haber introducido estas características, o bien haberlas implementado de manera totalmente diferente. Para evitar conflictos es necesario aclarar, en la sintaxis, para qué motor en particular estamos escribiendo la regla. Esto se logra anteponiéndole a cada propiedad un prefijo que indique el browser o el motor de destino. Estos prefijos son conocidos como vendor prefixes. Por ejemplo, cuando los navegadores todavía no habían adoptado ampliamente los bordes redondeados, era indispensable usar esta propiedad de la siguiente manera:

-moz-border-radius: 12px 6px;              /* Sólo Firefox */
-webkit-border-top-left-radius: 12px;      /* Sólo Webkit */
-webkit-border-top-right-radius: 6px;           /* Sólo Webkit */
-webkit-border-bottom-right-radius: 12px;       /* Sólo Webkit */
-webkit-border-bottom-left-radius: 6px;    /* Sólo Webkit */
border-radius: 12px 6px;             /* sintaxis correcta */

Hoy, a cualquier navegador le basta con la última línea, que no tiene ningún prefijo, para representar bordes redondeados. Sin embargo, muchas propiedades todavía no han sido estandarizadas, y siempre habrá usuarios que ingresen desde navegadores desactualizados. Por eso, en el próximo artículo comentaremos algunos métodos para facilitar el agregado de vendor prefixes.