Propiedades no estándar

Por qué se desaconsejan las propiedades no estándar

Las propiedades no estándar son propiedades de las hojas de estilo CSS que no forman parte de ninguna recomendación o borrador y que funcionan únicamente en un navegador específico.

Las propiedades no estándar son un arma de doble filo:

En principio, las propiedades no estándar deberían utilizarse de forma experimental y minoritaria, de manera que resulte fácil dejar de utilizarlas una vez se haya creado una propiedad estándar que funcione en todos los navegadores.

Pero si un navegador tiene un uso mayoritario en un segmento del mercado y las propiedades no estándar se utilizan de forma generalizada, puede resultar imposible dejar de utilizarlas puesto que los mercados cautivos tiene una inercia al cambio muy grande. Eso le puede venir muy bien a la empresa que desarrolla el navegador mayoritario, pero es nefasto para los usuarios y desarrolladores.

Entre 1999 y 2006 la web sufrió el dominio de Internet Explorer (véase el apartado sobre Microsoft y el cumplimiento de las recomendaciones del W3C) y en los últimos está sufriendo el dominio de Google y Apple en la informática móvil.

Por ello, aunque el W3C ha permitido siempre la existencia de propiedades no estándar por sus posibles beneficios, periódicamente surgen debates para replantear el uso de las propiedades no estándar.

En 2011, Henri Sivonen planteó unas interesantes reflexiones sobre este tema, contestadas por David Baron o Daniel Glazman. El tema sigue sin ser resuelto, aunque la propuesta de Mozilla es que las propiedades no estándar sólo estén activadas en las versiones experimentales o de prueba, pero no en las versiones finales.

Una solución curiosa para este problema lo proporciona la biblioteca JavaScript -prefix-free (comentada en este artículo), que permite utilizar las propiedades con los nombres de las recomendaciones pero las convierte en caso necesario a las propiedades no estándar en el navegador.

Nombres de las propiedades no estándar

Si los borradores de las recomendaciones ya incluyen una propiedad con las mismas características, los navegadores suelen utilizar el nombre de la propiedad precedido de un prefijo. El prefijo que utiliza Firefox es -moz-, el que utiliza Internet Explorer es -ms-, el que utilizan Chrome y Safari es -webkit- y el que utiliza Opera es -o-.

Hay que tener en cuenta que las propiedades precedidas de un prefijo sólo funcionan en el navegador correspondiente y en cualquier momento pueden dejar de funcionar, por lo que deben utilizarse sólo en caso necesario.

Algunas propiedades no estándar

Se comentan aquí algunas propiedades no estándar que no tienen equivalentes en las recomendaciones del W3C. En general se desaconseja su uso puesto que sólo son admitidas por el navegador correspondiente y su uso contribuye a la fragmentación de la web, aunque pueden tener su interés como curiosidad (y porque si la propiedad es realmente interesante puede acabar formando parte de alguna recomendación)

Bordes de varios colores: -moz-border-XXX-colors

Las propiedades -moz-border-bottom-colors, -moz-border-top-colors, -moz-border-left-colors y -moz-border-right-colors permiten aplicar varios colores a un mismo borde. Hay que indicar una lista de colores y a cada pixel del borde se aplica un color (de afuera hacia dentro).

Los ejemplos siguientes sólo funcionan en Firefox.

Con las propiedades actuales de los bordes, este efecto puede conseguirse acumulando bordes.

blockquote {
  padding: 3px 10px;
  border: black 10px solid;
  -moz-border-bottom-colors: #FFA8FF #FFB0FF #FFB8FF #FFC0FF
    #FFC8FF #FFD0FF #FFD8FF #FFE0FF #FFE8FF #FFF0FF;
  -moz-border-top-colors: #FFA8FF #FFB0FF #FFB8FF #FFC0FF
    #FFC8FF #FFD0FF #FFD8FF #FFE0FF #FFE8FF #FFF0FF;
  -moz-border-left-colors: #FFA8FF #FFB0FF #FFB8FF #FFC0FF
    #FFC8FF #FFD0FF #FFD8FF #FFE0FF #FFE8FF #FFF0FF;
  -moz-border-right-colors: #FFA8FF #FFB0FF #FFB8FF #FFC0FF
    #FFC8FF #FFD0FF #FFD8FF #FFE0FF #FFE8FF #FFF0FF;
  background-color: #FFF0FF;
}

Si algo puede ir mal, irá mal.

Murphy

blockquote {
  padding:3px 10px;
  border:black 10px solid;
  -moz-border-bottom-colors: black black white white
    black black white white black black;
  -moz-border-top-colors: black black white white
    black black white white black black;
  -moz-border-left-colors:black black white white
    black black white white black black;
  -moz-border-right-colors:black black white white
    black black white white black black;
  background-color:#FFF0FF;
}

Si algo puede ir mal, irá mal.

Murphy

Interpolación de imágenes en Internet Explorer: -ms-interpolation-mode

img { -ms-interpolation-mode:bicubic; } (visto en https://www.joelonsoftware.com/2008/12/22/from-the-department-of-badly-chosen-defaults/)

Por escribir