Plantilla de página de propiedad CSS

Nota: Elimina este bloque de nota antes de publicar.

Metadatos de la página:

La información al inicio de la página se utiliza para definir "metadatos de la página". Los valores deben actualizarse apropiadamente para la propiedad particular.

---
title: NombreDeLaPropiedad
slug: Web/CSS/NombreDeLaPropiedad
page-type: css-property O css-shorthand-property
status:
  - experimental
  - deprecated
  - non-standard
browser-compat: css.properties.NombreDeLaPropiedad
---

title: El valor de title se muestra en la parte superior de la página. El formato del título es NombreDeLaPropiedad. Por ejemplo, la propiedad background-color tiene un título de background-color.
slug: El valor de slug es el final de la ruta URL después de https://developer.mozilla.org/es/docs/. Esto se formateará como Web/CSS/NombreDeLaPropiedad. Por ejemplo, el slug para la propiedad background-color es Web/CSS/background-color. Para un componente de varias palabras como Getting_started en un slug, el slug debería usar un guión bajo como en /es/docs/Learn/HTML/Getting_started.
page-type: El valor de page-type para las propiedades CSS es css-property. Para una propiedad CSS abreviada, el valor es css-shorthand-property. Por ejemplo, el valor de page-type para la propiedad animation es css-shorthand-property porque es una propiedad abreviada, mientras que el valor de page-type para la propiedad animation-delay es css-property.
status: Si corresponde, el valor de la clave de tecnología status puede ser experimental, deprecated y/o non-standard (si no está en una pista de estándares).
browser-compat: Reemplace el valor de marcador de posición css.properties.NombreDeLaPropiedad con la cadena de consulta para la propiedad en el repositorio de datos de compatibilidad del navegador. Consulte la sección Otros macros en la página de este bloque de nota para ver cómo se utiliza esta clave-valor para generar contenido para las secciones Especificaciones y Compatibilidad con el navegador.

Macros en la parte superior de la página

Aparecen varias llamadas de macros en la sección de contenido (inmediatamente debajo de los metadatos de la página). Debe actualizarlos o eliminarlos según el consejo a continuación:

{{SeeCompatTable}}: Esta macro genera un banner Experimental, que indica que la tecnología está experimental. Si la tecnología que está documentando no es experimental, puede eliminar esta macro. Si la tecnología es experimental y está oculta detrás de una preferencia en Firefox, también debe completar una entrada para ella en la página Características experimentales en Firefox.
{{Deprecated_Header}}: Esta macro genera un banner Deprecated, que indica que el uso de la tecnología está desaconsejado. Si no lo está, entonces puede eliminar la llamada a la macro.
{{CSSRef}}: Esta macro debe estar presente en cada página de propiedad de CSS. Genera una barra lateral de CSS adecuada, dependiendo de las etiquetas incluidas en la página. Recuerde eliminar la macro {{MDNSidebar}} cuando use esta plantilla.

Se muestran ejemplos de los banners Experimental y Deprecated justo después de este bloque de nota.

Otras macros en la página

Sección de sintaxis formal: El contenido de la sección Sintaxis formal se genera utilizando la macro {{CSSSyntax}}. Esta macro obtiene datos de las especificaciones utilizando el paquete npm @webref/css.
Sección de definición formal: El contenido de la sección Definición formal se genera utilizando la macro {{CSSInfo}}. Para que esta sección tenga datos, debe asegurarse de que se haya completado una entrada adecuada para la propiedad correspondiente en el archivo de datos properties.json en el repositorio mdn/data. Consulte la página Properties para obtener más información.
Secciones de Especificaciones y Compatibilidad con el navegador: La herramienta de compilación utiliza automáticamente el par clave-valor browser-compat de los metadatos de la página para insertar datos en las secciones Especificaciones y Compatibilidad con el navegador (reemplazando las macros {{Specifications}} y {{Compat}} en esas secciones, respectivamente).

Tenga en cuenta que puede que primero necesite crear/actualizar una entrada para la propiedad y su especificación en nuestro repositorio de datos de compatibilidad con navegadores. Consulte nuestra guía de tablas de compatibilidad para obtener información sobre cómo agregar o editar entradas.

Recuerde eliminar este bloque de nota antes de publicar.

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Obsoleto: Esta característica ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, probablemente ya se ha eliminado de los estándares web relevantes, está en proceso de eliminación o solo se conserva por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad en la parte inferior de esta página para orientar su decisión. Tenga en cuenta que esta característica puede dejar de funcionar en cualquier momento.

Comienza el contenido de la página con un párrafo introductorio que nombre la propiedad y diga qué hace. Idealmente, esto debería ser una o dos frases cortas.

Pruébalo

Este título es generado automáticamente por la macro {{EmbedInteractiveExample}}.

Esta sección es para ejemplos interactivos agregados usando la macro {{EmbedInteractiveExample}}. Puedes crear estos ejemplos en el repositorio mdn/interactive-examples. Consulta la sección Ejemplos interactivos en nuestras Guías de escritura para obtener más información.

Propiedades constituyentes

Agrega esta sección solo para propiedades abreviadas, como animation, para listar todas las propiedades con descripción completa relacionadas.

Sintaxis

Incluye los casos de uso comunes como un bloque de código y describe los subvalores del componente que forman un valor completo.

css

/* Insertar bloque de código mostrando casos de uso comunes */
/* o categorías de valores */

Valores

Incluye un término y una definición para cada subvalor.

subvalor1: Incluye una descripción del subvalor, su tipo de datos y lo que representa.
subvalor2: Incluye una descripción del subvalor, su tipo de datos y lo que representa.

Descripción

Esta es una sección opcional para incluir una descripción de la propiedad y explicar cómo funciona. Usa esta sección para explicar términos relacionados y agregar casos de uso para la propiedad.

Definición formal

{{CSSInfo}}

Para usar esta macro, elimina las comillas invertidas y la barra invertida en el archivo markdown.

Sintaxis formal

{CSSSyntax}}

Para usar esta macro, elimina las comillas invertidas y la barra invertida en el archivo markdown.

Ejemplos

Nota que usamos el plural "Ejemplos" incluso si la página solo contiene un ejemplo.

Agregar un título descriptivo

Cada ejemplo debe tener un título H3 (###) que nombre el ejemplo. El título debe ser descriptivo de lo que está haciendo el ejemplo. Por ejemplo, "Un ejemplo simple" no dice nada sobre el ejemplo y por lo tanto, no es un buen título. El título debe ser conciso. Para una descripción más larga, usa el párrafo después del título.

Consulta nuestra guía sobre cómo agregar ejemplos de código para obtener más información.

Nota: A veces querrás enlazar a ejemplos dados en otra página.

Escenario 1: Si tienes algunos ejemplos en esta página y algunos más en otra página:

Incluye un título H3 (###) para cada ejemplo en esta página y luego un título H3 (###) final con el texto "Más ejemplos", debajo del cual puedes enlazar a los ejemplos en otras páginas. Por ejemplo:

## Ejemplos

### Usando la API fetch

Ejemplo de Fetch

### Más ejemplos

Enlaces a más ejemplos en otras páginas

Escenario 2: Si solo tienes ejemplos en otra página y ninguno en esta página:

No agregues ningún título H3; simplemente agrega los enlaces directamente debajo del título H2 "Ejemplos". Por ejemplo:

## Ejemplos

Para ejemplos de esta API, consulta [la página sobre fetch()](https://example.org).

Preocupaciones de accesibilidad

Esta es una sección opcional. Puedes incluir cualquier advertencia aquí para las preocupaciones de accesibilidad que los desarrolladores deben tener en cuenta al usar esta propiedad. También puedes incluir soluciones alternativas para estas preocupaciones de accesibilidad si las hay.

enlace1
enlace2
external_link (año)