EntradaCSS: degradado radial para el fondo. Gradiente radial (): gradiente radial Usando múltiples paradas de color
Los degradados radiales se representan de forma diferente a los lineales. Si los colores de los lineales se ubican perpendiculares a la línea que define la dirección, entonces los colores radiales divergen del centro dado y el degradado puede tomar la forma de un círculo o una elipse.
Para obtener el degradado más simple, simplemente configure los colores:
Fondo: degradado radial (dorado, rojo anaranjado);
De forma predeterminada, el centro del degradado está centrado y el degradado es elíptico:
Además de los colores, el degradado se puede dar forma, posicionar y dimensionar. Las opciones se combinan y se comportan de manera más compleja que los gradientes lineales.
La forma(la forma de degradado final) puede ser un círculo y una elipse. El valor predeterminado es una elipse, el degradado tiende a ocupar todo el espacio libre del elemento, estirándose si es necesario.
Para que el degradado tenga la forma de un círculo, esto debe especificarse explícitamente usando la palabra clave circle.
Si no se especifica la forma, pero se especifica el tamaño (un valor establece el radio del círculo, si hay dos valores) el degradado adquiere la forma de una elipse. La especificación explícita de la forma del degradado se ignora cuando hay dimensiones.
Posición determina dónde se ubicará Centrar degradado. Se utilizan las mismas palabras clave que para el degradado lineal, pero con el prefijo arroba: en la parte superior, a la derecha, en la parte inferior, a la izquierda y en el centro es el valor predeterminado.
También se pueden combinar entre sí para colocar el degradado en un lado determinado, por ejemplo: en la parte superior derecha, en la esquina superior derecha.
A continuación puedes ver cómo funcionan las diferentes posiciones:
Primer código cuadrado:
Fondo: degradado radial (arriba a la izquierda, morado, carmesí, rojo anaranjado, dorado);
También puede establecer la posición exacta del degradado, por ejemplo, en 20% 50% o en 10px 150px.
El tamaño determina las dimensiones de la forma de degradado final. Para gradientes elípticos, los valores se pueden especificar como un porcentaje, para los redondos, no.
Si se da un valor, se considera el radio del gradiente circular. Si se especifican dos valores, el primero se considera el radio horizontal de la elipse y el segundo, vertical.
A continuación se muestran ejemplos de gradientes redondos y elípticos. La forma de la figura está determinada por las dimensiones dadas:
También puede utilizar palabras clave:
Lado más cercano: el degradado termina en el borde del elemento más cercano al centro del degradado. Si es una elipse, el degradado toca todos los bordes del elemento. Lado más lejano: el degradado termina en el borde más lejano del elemento. Si es una elipse, el degradado toca todos los bordes del elemento. esquina más cercana: la forma final se estira para que pase por la esquina del elemento más cercano al centro del degradado. Si la forma de destino es una elipse, el degradado se estira para llenar toda la forma. Con este parámetro, el degradado llena toda la forma, yendo parcialmente más allá de sus límites. esquina más lejana: similar a la esquina más cercana, solo la forma final atraviesa la esquina más alejada del centro del degradado. Valor por defecto.
Se agregó una posición en la parte inferior a algunos de los degradados para que pueda ver mejor la acción del código:
El gradiente radial también puede repetirse, esto es, gradiente radial repetitivo.
Código de muestra:
Fondo: gradiente radial repetido (círculo, caqui oscuro, caqui oscuro .5em, transparente .5em, transparente 1.5em);
Al igual que con el degradado lineal, el degradado repetido no se procesa de forma muy ordenada.
Al combinar varios fondos con diferentes parámetros, puede obtener cosas asombrosas:
Si usa unidades relativas (em,%) y no absolutas (px) al crear patrones, el tamaño de los patrones resultantes se puede ajustar fácilmente cambiando solo el tamaño de la fuente.
Cuando hablamos de degradados, vale la pena comenzar con el hecho de que los degradados son un reemplazo de la imagen en CSS. Esa es una forma elegante de decir que la creación de un degradado en CSS proporciona al navegador instrucciones para pintar una imagen en la pantalla en lugar de le proporciona al navegador la URL de origen de un archivo que creó en una aplicación de edición de imágenes, como Photoshop o Sketch. Es una forma nativa de CSS para hacer lo mismo en el código y, como tal, los degradados se incluyen en la especificación de valores de imagen CSS y contenido reemplazado.
Puedes ver cómo ese degradado asume que la forma es elipse. Eso es porque el elemento en sí no es un cuadrado perfecto. En ese caso, habría asumido un círculo en su lugar. ¡Muy inteligente! Esto es lo que sucedería si hubiéramos declarado explícitamente círculo como el valor de la forma:
Gradiente (imagen de fondo: radial-gradiente (círculo, amarillo, # f06d06);)
Observe que el degradado es circular, pero solo se desvanece hasta el color final a lo largo del borde más lejano. Ahora podemos declarar explícitamente el valor de la posición para asegurarnos de que el desvanecimiento termine en el "lado más cercano" de la forma, así:
Gradiente (imagen de fondo: radial-gradiente (círculo del lado más cercano, amarillo, # f06d06);)
Los valores posibles son: esquina más cercana, lado más cercano, esquina más lejana, lado más lejano. Puedes pensar en ello como: "Quiero que este degradado radial se desvanezca desde el punto central hasta el __________, y en cualquier otro lugar se rellene para adaptarse a eso".
Un degradado radial tampoco tiene que comenzar en el centro predeterminado, puede especificar un cierto punto usando "en ______" como parte del primer parámetro, como:
Gradiente (imagen de fondo: gradiente radial (círculo en la parte superior derecha, amarillo, # f06d06);)
Lo haré más obvio aquí haciendo que el ejemplo sea un cuadrado y ajustando una parada de color:
Soporte del navegador
El soporte del navegador para radial-gradient () es básicamente el mismo que. La excepción es una versión muy antigua de Opera. Justo cuando comenzaron a soportar gradientes, solo contabilizaron lineales y no radiales.
Pero de manera similar a linear-gradient (), si el soporte de su navegador necesita ser muy profundo, entonces podría considerar usar una herramienta similar que maneje los prefijos de proveedores por usted en lugar de tener que administrarlos usted mismo.
Los datos de soporte de este navegador son de
La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.
Composición de un degradado radial
Un gradiente radial está definido por un punto central, un forma final y dos o más puntos de parada de color.
Para crear un degradado suave, la función radial-gradient () dibuja una serie de formas concéntricas que irradian desde el centro hacia el forma final(y potencialmente más allá). La forma final puede ser un círculo o una elipse.
Los puntos de parada de color se colocan en un rayo de gradiente virtual que se extiende horizontalmente desde el centro hacia la derecha. Las posiciones de parada de color basadas en porcentajes son relativas a la intersección entre la forma final y este rayo de degradado, que representa el 100%. Cada forma es de un solo color determinado por el color del rayo de degradado que cruza.
Sintaxis
/ * Un degradado en el centro de su contenedor, comenzando en rojo, cambiando a azul y terminando en verde * / radial-gradient (círculo en el centro, rojo 0, azul, verde 100%)Valores
(o| Palabra clave | Descripción |
|---|---|
| lado más cercano | La forma final del degradado se encuentra con el lado del cuadro más cercano a su centro (para círculos) o con los lados vertical y horizontal más cercanos al centro (para elipses). |
| esquina más cercana | La forma final del degradado se dimensiona para que coincida exactamente con la esquina más cercana del cuadro desde su centro. |
| el lado más lejano | Similar al lado más cercano, excepto que el tamaño de la forma final se ajusta al lado de la caja más alejado de su centro (o lados vertical y horizontal). |
| esquina más lejana | El valor predeterminado, la forma final del degradado, tiene un tamaño que coincide exactamente con la esquina más alejada del cuadro desde su centro. |
Nota: Las primeras implementaciones de esta función incluían otras palabras clave (cubrir y contener) como sinónimos de la esquina más lejana estándar y el lado más cercano, respectivamente. Utilice únicamente las palabras clave estándar, ya que algunas implementaciones ya han eliminado esas variantes más antiguas.
Sintaxis formal
gradiente radial ([[círculo ||Tenga en cuenta que negativo
Ejemplos de
Gradiente simple
Gradiente radial (imagen de fondo: gradiente radial (cian 0%, transparente 20%, salmón 40%);)
Gradiente no centrado
.radial-gradient (ancho: 240px; alto: 120px;)
Gradiente radial (imagen de fondo: gradiente radial (esquina más lejana a 40px 40px, # f35 0%, # 43e 100%);)
Especificaciones
| Especificación | Estado | Comentario |
|---|---|---|
| Módulo de Imágenes CSS Nivel 3 La definición de "radial-gradients ()" en esa especificación. |
Recomendación candidata | Definición inicial. |
Compatibilidad del navegador
La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte https://github.com/mdn/browser-compat-data y envíenos una solicitud de extracción.
Actualizar datos de compatibilidad en GitHub
| Escritorio | Móvil | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Cromo | Borde | Firefox | explorador de Internet | Ópera | Safari | Vista web de Android | Chrome para Android | Firefox para Android | Opera para Android | Safari en iOS | Internet de Samsung | |
| gradiente radial () | Chrome Soporte completo 26 Soporte completo 26 Soporte completo 13 Prefijado Prefijado | Soporte completo de Edge 12 | Soporte completo de Firefox 16 Notas Soporte completo 16Notas Notas Antes de Firefox 36, los degradados no se aplicaban en el espacio de color pre-multiplicado, lo que provocaba que aparecieran sombras de gris inesperadamente cuando se usaba con transparencia. Soporte completo 3.6Prefijado Notas PrefijadoPrefijado PrefijadoPrefijado Discapacitado Prefijado | IE Soporte completo 10 Notas Soporte completo 10Notas Notas Internet Explorer 5.5 a 9.0 admite gradientes a través de un filtro propietario :. | Opera Soporte completo 12.1 Soporte completo 12.1 Sin soporte 11.6 - 15 Prefijado Prefijado Soporte completo 15Prefijado Prefijado Implementado con el prefijo de proveedor: -webkit- | Safari Soporte completo 6.1 Soporte completo 6.1 Soporte completo 5.1 Prefijado Notas Prefijado -webkit-gradient (radial, ...) | WebView Android Soporte completo ≤37 Soporte completo ≤37 Soporte completo ≤37 Prefijado Prefijado Implementado con el prefijo de proveedor: -webkit- | Chrome Android Soporte completo 26 Soporte completo 26 Soporte completo 18 Prefijado Prefijado Implementado con el prefijo de proveedor: -webkit- | Compatibilidad total con Firefox Android 16 Notas Soporte completo 16Notas Notas Antes de Firefox 36, los degradados no se aplicaban en el espacio de color pre-multiplicado, lo que provocaba que aparecieran sombras de gris inesperadamente cuando se usaba con transparencia. Soporte completo 4Prefijado Notas Prefijado Implementado con el prefijo de proveedor: -moz- Notes Desde Firefox 42, la versión prefijada de degradados se puede desactivar configurando layout.css.prefixes.gradients en false. Soporte completo 49Prefijado Prefijado Implementado con el prefijo de proveedor: -webkit- Soporte completo 44Prefijado Discapacitado Prefijado Implementado con el prefijo de proveedor: -webkit- Disabled A partir de la versión 44: esta función está detrás de la preferencia layout.css.prefixes.webkit (debe establecerse en true). Para cambiar las preferencias en Firefox, visite about: config. | Opera Android Soporte completo 12.1 Soporte completo 12.1 Sin soporte 12 - 14 Prefijado Prefijado Implementado con el prefijo de proveedor: -o- Soporte completo 14Prefijado Prefijado Implementado con el prefijo de proveedor: -webkit- | Safari iOS Soporte completo 6.1 Soporte completo 6.1 Soporte completo 6 Prefijado Notas Prefijado Implementado con el prefijo de proveedor: -webkit- Notes Safari 4 soportaba una función experimental -webkit-gradient (radial, ...). Esta antigua sintaxis obsoleta todavía se admite por motivos de compatibilidad. | Samsung Internet Android Soporte completo 1.5 Soporte completo 1.5 Soporte completo 1.0 Prefijado Prefijado Implementado con el prefijo de proveedor: -webkit- |
| en sintaxis | Soporte completo de Chrome 26 | Soporte completo de Edge 12 | Soporte completo de Firefox 16 Notas Soporte completo 16Notas Notas Antes de Firefox 36, los degradados no se aplicaban en el espacio de color pre-multiplicado, lo que provocaba que aparecieran sombras de gris inesperadamente cuando se usaba con transparencia. Soporte completo 10Prefijado Notas Prefijado Implementado con el prefijo de proveedor: -moz- Notes Desde Firefox 42, la versión prefijada de degradados se puede desactivar configurando layout.css.prefixes.gradients en false. Soporte completo 49Prefijado Prefijado Implementado con el prefijo de proveedor: -webkit- Soporte completo 44Prefijado Discapacitado Prefijado Implementado con el prefijo de proveedor: -webkit- Disabled A partir de la versión 44: esta función está detrás de la preferencia layout.css.prefixes.webkit (debe establecerse en true). Para cambiar las preferencias en Firefox, visite about: config. | IE Soporte completo 10 | Opera Soporte completo 15 Soporte completo 15 Sin soporte 11.6 - 15 Prefijado Prefijado Implementado con el prefijo de proveedor: -o- | Safari Sin soporte No | Soporte completo de WebView Android ≤37 | Compatibilidad total con Chrome Android 26 | Firefox Android Soporte completo 16 Soporte completo 16 Soporte completo 10 Prefijado Prefijado Implementado con el prefijo de proveedor: -moz- | Opera Android Soporte completo 14 Soporte completo 14 Sin soporte 12 - 14 Prefijado Prefijado Implementado con el prefijo de proveedor: -o- | Safari iOS Sin soporte No | Samsung Internet Android Soporte completo 1.5 |
| Topes de color de doble posición | Soporte completo de Chrome 71 | Soporte completo de Edge 79 | Soporte completo de Firefox 64 | IE Sin soporte No | Opera Soporte completo 58 | Safari Soporte completo 12.1 | WebView Android Soporte completo 71 | Compatibilidad total con Chrome Android 71 | Compatibilidad total con Firefox Android 64 | Opera Android Soporte completo 50 | Safari iOS Soporte completo 12.2 | Samsung Internet Android Soporte completo 10.0 |
| Sugerencias de interpolación / puntos medios de degradado | Soporte completo de Chrome 40 | Soporte completo de Edge 79 | Soporte completo de Firefox 36 | IE Sin soporte No | Opera Soporte completo 27 | Safari Soporte completo 6.1 | WebView Android Soporte completo 40 | Compatibilidad total con Chrome Android 40 | Compatibilidad total con Firefox Android 36 | Opera Android Soporte completo 27 | Safari iOS Soporte completo 6.1 | Samsung Internet Android Soporte completo 4.0 |
Leyenda
Apoyo total Apoyo total Sin soporte Sin soporte Ver notas de implementación. Ver notas de implementación. El usuario debe habilitar explícitamente esta función. El usuario debe habilitar explícitamente esta función. Requiere un prefijo de proveedor o un nombre diferente para su uso.Notas CSS cuánticas
Gecko solía tener un error de larga data por el cual los gradientes radiales como el gradiente radial (círculo dorado, rojo) funcionarían, aunque no deberían hacerlo debido a la falta de una coma entre el círculo y el oro. Además,
Un degradado radial se extiende desde el punto central del degradado en todas las direcciones en un círculo o forma elíptica (forma predeterminada), demostrando transición suave de un tono de color a otro. Se crea un degradado radial usando la función radial-gradient (). La función crea una imagen que es un degradado radial entre los tonos de color especificados. De forma predeterminada, el tamaño del degradado coincide con el tamaño del elemento al que se aplica.
La función radial-gradient () toma los siguientes argumentos separados por comas:
- El primer argumento son palabras clave y / o unidades CSS que definen la forma final, el tamaño y la posición inicial del degradado. Argumento opcional.
- Una lista separada por comas de dos o más colores, cada uno de los cuales puede ir seguido de una posición de parada.
El degradado radial más simple solo requiere dos argumentos para especificar un color inicial y final:
Div (imagen de fondo: degradado radial (cian, índigo); ancho: 400 px; alto: 100 px;) Pruébalo "
Al igual que con los degradados lineales, un degradado radial puede incluir una lista de más de dos colores y se puede especificar una posición de parada para cualquier color.
Div (ancho: 400px; alto: 100px; margen: 10px;) #one (imagen de fondo: radial-degradado (cian, amarillo, índigo, blanco);) #two (imagen de fondo: radial-degradado (cian, amarillo 10%, índigo 30%, blanco 50%);) Pruébalo "
La forma del degradado radial se puede definir utilizando las palabras clave círculo y elipse, especificando una de ellas como primer argumento:
Div (ancho: 400px; alto: 100px; margen: 10px;) #one (imagen de fondo: radial-degradado (elipse, cian, índigo);) #dos (imagen de fondo: radial-degradado (círculo, cian, índigo) );) Tratar "
De forma predeterminada, el navegador coloca el punto central del degradado radial en el centro del elemento. El centro del degradado se puede colocar usando la palabra clave at seguida de palabras clave (arriba, izquierda, derecha, abajo, centro) o valores en unidades CSS especificadas:
| Sentido | Descripción |
|---|---|
| arriba a la izquierda centro izquierdo abajo a la izquierda Justo arriba centro derecho boton derecho parte superior central centro centro centro inferior | Si solo especifica uno palabra clave, el segundo será "centro". |
| x% y% | El primer valor es la posición horizontal, el segundo valor es vertical. La esquina superior izquierda es la posición 0% 0%. La esquina inferior derecha es la posición 100% 100%. Si solo especifica un valor, el otro valor será del 50%. |
| posición x posición y | El primer valor es la posición horizontal, el segundo es la vertical. La esquina superior izquierda es la posición 0 0. Las unidades pueden ser píxeles (0px 0px) o cualquier otra unidad de medida CSS. Si solo especifica un valor, el otro valor será del 50%. Puede mezclar% y unidades. |
El posicionamiento del degradado se especifica antes de los valores de tono, pero después de la palabra clave que define la forma del degradado (si se especifica):
Div (ancho: 400px; alto: 100px; margen: 10px;) #one (imagen de fondo: radial-gradient (a la derecha, cian, índigo);) #two (imagen de fondo: radial-gradient (círculo a 300px 50px , cian, índigo, amarillo);) #three (imagen de fondo: degradado radial (círculo en la parte superior izquierda, cian, índigo, amarillo);) Pruébelo "
El tamaño del gradiente (qué tan grande debe ser la forma final del gradiente) se puede determinar usando una de las cuatro frases clave o especificando el radio usando unidades CSS (no puede usar porcentajes para determinar el radio).
| Palabras clave | Descripción | |
|---|---|---|
| El tamaño final del degradado depende de la distancia entre el centro del degradado y el lado más cercano del elemento (para un círculo) o la distancia entre el centro y los dos lados del elemento más cercano (para una elipse). | ||
| El tamaño final del degradado depende de la distancia entre el centro del degradado y la esquina del elemento más cercano a él. |
 |
|
| El tamaño final del degradado depende de la distancia entre el centro del degradado y el lado más alejado del elemento (para un círculo) o la distancia entre el centro del degradado y los dos lados más alejados de él (para una elipse). |
 |
|
| El tamaño final del degradado depende de la distancia entre el centro del degradado y la esquina del elemento más alejado de él. Se utiliza de forma predeterminada para una forma de círculo o elipse. |
 |
Las palabras clave que definen el tamaño del gradiente o el radio se especifican antes o después de la palabra clave que define la forma y siempre antes de definir la posición.
Div (ancho: 400px; alto: 100px; margen: 10px;) #one (background-image: radial-gradient (círculo más cercano a la esquina a 100px, cian 50%, índigo);) #two (background-image: radial- degradado (círculo del lado más cercano, cian, rojo, índigo);) #three (imagen de fondo: radial-gradient (círculo de 100px a 200px, cian 50%, índigo);) #four (imagen de fondo: radial-gradient ( Elipse de 170px 50px a 175px, cian, # 90EE90, rgba (172,160,160,0));)
Arroz. 1. Gradiente radial y lineal
Se crea un degradado radial utilizando la propiedad background o background-image.
Sintaxis
imagen de fondo: gradiente-radial ([círculo ||<радиус>] [a<позиция>]? , | [elipse || [<радиус> | <проценты>] (2)] [en<позиция>]? , | [[círculo | elipse] ||<размер>] [a<позиция>]? , | a<позиция> , <цвет> [ , <цвет> ]*)
Designaciones
| Descripción | Ejemplo | |
|---|---|---|
| <тип> | Indica el tipo de valor. | <размер> |
| A && B | Los valores deben mostrarse en el orden indicado. | <размер> && <цвет> |
| A | B | Indica que solo se debe seleccionar uno de los valores sugeridos (A o B). | normal | letras minúsculas |
| A || B | Cada valor se puede utilizar solo o junto con otros en cualquier orden. | ancho || contar |
| Valores de grupos. | [cultivo || Cruz] | |
| * | Repita cero o más veces. | [,<время>]* |
| + | Repita una o más veces. | <число>+ |
| ? | El tipo, palabra o grupo especificado es opcional. | ¿recuadro? |
| (A, B) | Repita al menos A, pero no más de B veces. | <радиус>{1,4} |
| # | Repita una o más veces, separadas por comas. | <время># |
Los valores
circle Un degradado radial de forma circular. elipse Crea un degradado elíptico. Este formulario está configurado de forma predeterminada.<радиус>El radio del degradado en unidades CSS. Un valor indica el radio del círculo, dos valores indican el radio de la elipse a lo largo del eje xy su radio a lo largo del eje y. Si no se especifica explícitamente ningún radio, el degradado llenará todo el fondo del elemento.<позиция>
Especifica el punto de inicio donde se origina el degradado. La posición del punto se escribe de forma similar a los valores de posición de fondo utilizando palabras clave o unidades disponibles como píxeles o porcentajes; a continuación se muestran posibles combinaciones.
- arriba a la izquierda = arriba a la izquierda = 0% 0% (en la esquina superior izquierda);
- arriba = arriba centro = centro arriba = 50% 0% (centro arriba);
- arriba a la derecha = arriba a la derecha = 100% 0% (en la esquina superior derecha);
- izquierda = centro izquierda = centro izquierda = 0% 50% (izquierda y centro);
- centro = centro centro = 50% 50% (centrado) es el valor predeterminado;
- derecha = derecha centro = centro derecha = 100% 50% (derecha y centrada);
- abajo a la izquierda = abajo a la izquierda = 0% 100% (en la esquina inferior izquierda);
- inferior = centro inferior = centro inferior = 50% 100% (centro inferior);
- abajo a la derecha = abajo a la derecha = 100% 100% (esquina inferior derecha).
| Sentido | Código | Descripción | Vista |
|---|---|---|---|
| lado más cercano | background: radial-gradient (círculo del lado más cercano a 30px 20px, #fff, # 000); background: radial-gradient (lado más cercano a 30px 20px, #fff, # 000); | El gradiente coincide con el lado más cercano del bloque (para un círculo) o simultáneamente coincide con los lados horizontal y vertical más cercanos (para una elipse). |  |
background: radial-gradient (círculo de la esquina más cercana a 30px 20px, #fff, # 000); background: radial-gradient (esquina más cercana a 30px 20px, #fff, # 000); | La forma del gradiente se calcula en función de la información de la distancia a la esquina más cercana del bloque. |  |
|
background: radial-gradient (círculo del lado más alejado a 30px 20px, #fff, # 000); background: radial-gradient (lado más lejano a 30px 20px, #fff, # 000); | De efecto similar al lado más cercano, pero el degradado se extiende hasta el lado más alejado de la caja. |  |
|
| esquina más lejana | background: radial-gradient (círculo en la esquina más lejana a 30px 20px, #fff, # 000); background: radial-gradient (esquina más lejana a 30px 20px, #fff, # 000); | La forma del gradiente se calcula en función de la información de distancia hasta la esquina más alejada del bloque, |  |
Ejemplo
El resultado de este ejemplo se muestra a continuación.
Nota
Chrome antes del 26, Safari anterior a 6.1 y Android anterior a 4.4 son compatibles con -webkit-radial-gradient ().
Opera antes de la versión 12.10 admite -o-radial-gradient ().
Firefox hasta la versión 16 admite -moz-radial-gradient ().
Todas las propiedades con prefijo no utilizan la palabra clave at al especificar la posición del punto de inicio del degradado.
Especificación
Cada especificación pasa por varias etapas de aprobación.
- Recomendación: esta especificación está respaldada por el W3C y se recomienda como estándar.
- Recomendación candidata ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero se requiere la ayuda de la comunidad de desarrolladores para implementar el estándar.
- Recomendación propuesta ( Recomendación sugerida) - En este punto, el documento se envía al Consejo Asesor del W3C para su aprobación final.
- Borrador de trabajo: una versión más madura del borrador después de la discusión y revisión para la revisión de la comunidad.
- Borrador del editor ( Borrador editorial): una versión preliminar del estándar después de la edición por parte de los editores del proyecto.
- Borrador ( Proyecto de especificación) es el primer borrador de la norma.