top - linear gradient css tricks

¿Hay una sintaxis de gradiente CSS3 “oficial”/estándar?

Question

Sé que hay -webkit-gradient y -moz-linear-gradient . Pero, ¿cuál es la forma estándar de definir un gradiente?

Al igual que hay: -webkit-border-radius y -moz-border-radius y el estándar está destinado a ser border-radius .

Answer 1

Aún no, los dos ejemplos que proporcionó son los únicos gradientes codificados disponibles hasta ahora, que yo sepa. La mayoría de las mejoras de CSS3 están documentadas en CSS3.info

Answer 2

Es bueno que ningún navegador haya "estandarizado" todavía en una sintaxis de linear-gradient , ya que cambió entre febrero de 2011 y enero de 2012:

A partir de valores de imagen CSS y módulo de contenido reemplazado nivel 3

Borrador de Trabajo del W3C 17 de febrero de 2011

5.1.1. Sintaxis de ''gradiente lineal ()''

<linear-gradient> = linear-gradient(
[ 
  [ [top | bottom] || [left | right] ] 
  | 
  <angle>
,]? 
<color-stop>[, <color-stop>]+
);

Borrador de Trabajo del W3C 12 de enero de 2012 :

4.1.1. sintaxis de gradiente lineal ()

<linear-gradient> = linear-gradient(
  [ [ <angle> | to <side-or-corner> ] ,]? 
  <color-stop>[, <color-stop>]+
)

Para responder tu pregunta:

No, no hay una manera estándar de especificar gradientes.

Esto es porque no hay estándar

E incluso si asume que el "estándar" es el "estándar" que estaba vigente cuando hizo la pregunta, entonces ningún navegador admite el "estándar" porque el "estándar" cambió y ningún navegador es compatible con el nuevo estándar.

Answer 3

Una actualización para 2011, la sintaxis de Mozilla es ahora la "oficial", adopted por el borrador de trabajo de valores de imagen y contenido reemplazado de CSS3 . Webkit también se ha actualizado para utilizar esta sintaxis, y ahora se ha incorporado en las últimas versiones de Chrome y Safari.