domingo, 24 de junio de 2012

Cómo ordenar las propiedades de CSS con prefijos específicos de vendedor

Hace unos meses escribí la entrada Cada vez que llamas a una característica propietaria "CSS3", un gatito muere, que recibió bastantes visitas, seguramente por lo de "un gatito muere". En esa entrada se hablaba de las propiedades de CSS con prefijos de vendedor, como -moz para Mozilla y -o para Opera, que son propietarias del vendedor, es decir, que no forman parte de la especificación oficial, pero que mucha gente cree que sí que forman parte de la especificación. La entrada terminaba con este consejo:
La regla de oro es fácil: evita por completo las características propietarias. No las uses, no las evangelices, y sin duda alguna, no dependas de ellas.
Sin embargo, hay otras propiedades de CSS que forman parte de la especificación oficial (que quizás todavía no ha alcanzado el nivel de recomendación) y aún así también se utilizan con prefijo porque algunos navegadores las soportan de forma experimental o porque no está clara cuál será la forma correcta de usarla (ya que aún no es recomendación oficial).

Cuando se usan estas propiedades, se aconseja escribirlas también sin prefijo, por compatibilidad con los navegadores futuros que sí que la soportaran. Y aquí es donde surge la duda:

¿En qué orden se deben escribir las propiedades con prefijo y sin prefijo?

Siempre he pensado que la propiedad sin prefijo debe ir la última, para que sea la que al final predomine cuando se aceptada por todos los navegadores. Pero alguna vez he discutido con alguna persona por este tema.

Ahora acabo de encontrar el artículo Ordering CSS3 Properties, del año 2010, que explica de una forma muy clara cuál es el problema de escribirlo de una forma u otra y, por tanto, señala cuál es la forma correcta: la propiedad sin prefijo debe ir siempre la última.

Por ejemplo, la forma correcta de utilizar la propiedad border-radius es:

.not-a-square {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
Y si un artículo no te convence de que esta es la forma correcta, ahí va otro que dice lo mismo: Remember non-vendor-prefixed CSS 3 properties (and put them last).

5 comentarios:

jPedro dijo...

Esto me recuerda a las declaraciones CSS que se repiten y sobre-escriben a las anteriores, ya sea por herencia o al pertenecer a un mismo selector. Gracias por despejar mi duda Sergio. Saludos.

Pie Izquierdo dijo...
Este comentario ha sido eliminado por el autor.
Guzmán dijo...

Como siempre, la regla de oro es la ideal; gracias por el artículo.

El problema viene siendo cuando, por exigencias del guión (o contrato), la aplicación web debe ser 100% compatible con navegadores que no interpretan ciertas propiedades CSS y tu diseñador dice que esos bordes son redondos para Firefox 3, para el otro y para el de la moto y que te busques la vida.

Creo que estos parch... prefijos están para eso, pero no está de más saber organizarlos.

Muy buen artículo. Salud.

Sergio Luján Mora dijo...

A tu diseñador yo le diría lo que aconseja Jakob Nielsen: Con pocas excepciones, la gente visita la Web por su utilidad, no por su belleza.

Dile al diseñador que asuma cuál es su papel, que no se crea "el Rey del Mambo" (es fácil de decir, afortunadamente casi nunca he tenido que "torear" con diseñadores).

Rubén Martínez Candela dijo...

Usando less la vida del desarrollador web será mucho más feliz, y si además te basas en un buen web framework como Bootstrap de Tiwitter ya ni te cuento :D

http://lesscss.org/
http://twitter.github.com/bootstrap/index.html