1. El proyecto MDN
  2. Pautas de redacción
  3. Estructura de páginas
  4. Tipos de página
  5. Plantilla de página de función CSS

Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.

View in English Always switch to English

Plantilla de página de función CSS

Nota: Elimina este bloque de notas antes de publicar.

Front matter de la página:

El front matter en la parte superior de la página se utiliza para definir los "metadatos de la página". Los valores deben actualizarse adecuadamente para la función en particular. Ten en cuenta la presencia (o ausencia) de paréntesis.

md
---
title: nombreDeLaFuncion()
slug: Web/CSS/Reference/Values/nombreDeLaFuncion
page-type: css-function
status:
  - deprecated
  - experimental
  - non-standard
browser-compat: css.types.nombreDeLaFuncion
sidebar: cssref
---
title

El valor de title se muestra en la parte superior de la página. El formato del título es NombreDeLaFuncion(). Por ejemplo, la función pow() tiene el título pow().

slug

El valor de slug es el final de la ruta URL después de https://developer.mozilla.org/es/docs/. Esto tendrá el formato Web/CSS/Reference/Values/nombreDeLaFuncion. Ten en cuenta la ausencia de paréntesis en el slug. Por ejemplo, el slug para la función pow() es Web/CSS/Reference/Values/pow.

page-type

El valor de page-type para las funciones CSS es css-function.

status

Etiquetas que describen el estado de esta característica. Un array que puede contener uno o más de los siguientes valores: experimental, deprecated, non-standard. Esta clave no debe configurarse manualmente: se establece automáticamente según los valores en los datos de compatibilidad del navegador para la característica. Consulta "Cómo se añaden o actualizan los estados de las características".

browser-compat

Reemplaza el valor de marcador de posición css.types.NombreDeLaFuncion con la cadena de consulta para la función en el repositorio de datos de compatibilidad del navegador. Revisa la sección Otras macros en la página de este bloque de notas para ver cómo se utiliza esta relación clave-valor para generar contenido para las secciones de Especificaciones y Compatibilidad con navegadores.

Esto es cssref para todas las páginas de guía y referencia de CSS. Consulta Estructuras de página: Barras laterales para más detalles.

Macros de la parte superior de la página

En la parte superior de la sección de contenido aparecen varias llamadas a macros (inmediatamente debajo del front matter de la página). Estas macros son añadidas automáticamente por la cadena de herramientas (no hay necesidad de añadirlas o eliminarlas):

  • {{SeeCompatTable}}: Esta macro genera un banner de Experimental, que indica que la tecnología es experimental. Si la tecnología es experimental y está oculta detrás de una preferencia en Firefox, también debes rellenar una entrada para ella en la página de Características experimentales en Firefox.
  • {{Deprecated_Header}}: Esta macro genera un banner de Obsoleto (Deprecated), que indica que se desaconseja el uso de la tecnología.
  • {{Non-standard_Header}} — esto genera un banner de No estándar (Non-standard) que indica que la característica no forma parte de ninguna especificación.

No proporciones macros de encabezado de estado manualmente. Consulta la sección "Cómo se añaden o actualizan los estados de las características" para añadir estos estados a la página.

Muestras de los banners Experimental, Deprecated y Non-standard se muestran justo después de este bloque de notas.

Otras macros en la página

  • Sección de sintaxis formal: El contenido para la sección Sintaxis formal se genera utilizando la macro {{CSSSyntax}}. Esta macro recupera datos de las especificaciones utilizando el paquete npm @webref/css.

  • Secciones de Especificaciones y Compatibilidad con navegadores: La herramienta de construcción utiliza automáticamente el par clave-valor browser-compat del front matter de la página para insertar datos en las secciones Especificaciones y Compatibilidad con navegadores (reemplazando las macros {{Specifications}} y {{Compat}} en esas secciones, respectivamente).

    Ten en cuenta que primero es posible que necesites crear o actualizar una entrada para la función y su especificación en nuestro repositorio de datos de compatibilidad del navegador. Consulta nuestra guía de tablas de compatibilidad para obtener información sobre cómo añadir o editar entradas.

Recuerda eliminar este bloque de notas 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.

No estándar: Esta función no está estandarizada. No recomendamos usar funciones no estándar en producción, ya que tienen un soporte limitado en los navegadores y pueden cambiar o eliminarse. Sin embargo, pueden ser una alternativa adecuada en casos específicos donde no exista una opción estándar.

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

Pruébalo

Esta sección es generada por la macro InteractiveExample. Incluye el título de la sección "Pruébalo" y el editor de código. Consulta la sección de Ejemplos interactivos en nuestras Guías de escritura para más información.

Sintaxis

Incluye un bloque de código CSS para mostrar los principales casos de uso de la sintaxis, incluyendo ejemplos de parámetros que la función puede aceptar. Solo incluye la función en sí, no una declaración completa en la que ocurra. Por ejemplo, usa minmax(200px, 1fr), no grid-template-columns: minmax(min-content, 300px).

No termines las líneas de sintaxis con puntos y coma: esto debe enfatizar que no estamos mostrando código CSS válido completo, solo el uso de la sintaxis.

Muestra todos los patrones de invocación que puede tomar la función. Antes de cada caso, añade un comentario para describir el caso de uso y otro comentario para nombrar los parámetros y resaltar la puntuación de la sintaxis y el orden de los parámetros. Los nombres de los parámetros en el comentario deben coincidir con los parámetros enumerados en la sección "Parámetros".

El comentario que muestra cada patrón de invocación debe ir seguido de exactamente una línea vacía.

Por ejemplo:

css
/* Sin un valor alternativo (fallback) */
/* var( <nombre-de-propiedad-personalizada> ) */
var(--custom-prop)

/* Con un fallback vacío */
/* var( <nombre-de-propiedad-personalizada> , ) */
var(--custom-prop,)

/* Con un valor fallback */
/* var( <nombre-de-propiedad-personalizada> , <valor-de-declaracion> ) */
var(--custom-prop, initial)
var(--custom-prop, red)
var(--my-background, linear-gradient(transparent, aqua), pink)
var(--custom-prop, var(--default-value))
var(--custom-prop, var(--default-value, red))

Parámetros

Enumera los parámetros que la función puede aceptar como una lista de definiciones <dl>. Enumérelos en el orden en que aparecen en la sección Sintaxis formal. Indica si un parámetro es opcional utilizando la etiqueta optional_inline. Incluye un término y una definición para cada parámetro.

<nombre-de-propiedad-personalizada>

Incluye una descripción del parámetro, su tipo de datos y su valor predeterminado si lo hubiera.

<valor-de-declaracion> Opcional

Incluye una descripción del parámetro, su tipo de datos y su valor predeterminado si lo hubiera.

Advertencia: No añadas macros de estado en línea en las páginas de CSS.

Valor de retorno

Describe el valor devuelto por la función. Comienza la descripción con la palabra "Devuelve"; por ejemplo, "Devuelve un <number> o <dimension>."

Descripción

Esta sección es opcional pero recomendada. Contiene una descripción de la función y explica cómo funciona. Usa esta sección para explicar términos relacionados y añadir casos de uso para la función.

Sintaxis formal

No todas las funciones tienen sintaxis formal: si una función no la tiene, omite toda esta sección.

{{CSSSyntax}}

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

Accesibilidad

Esta es una sección opcional. Incluye pautas de accesibilidad, mejores prácticas y posibles preocupaciones que los desarrolladores deben tener en cuenta al usar esta propiedad. También puedes incluir alternativas o soluciones cuando corresponda.

Ejemplos

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

Añade un encabezado descriptivo

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

Consulta nuestra guía sobre cómo añadir ejemplos de código para 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 encabezado H3 (###) para cada ejemplo en esta página y luego un encabezado H3 final (###) con el texto "Más ejemplos", bajo el cual puedes enlazar a los ejemplos en otras páginas. Por ejemplo:

md
## Ejemplos

### Uso de la función polygon()

Ejemplo de polygon()

### 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:

No añadas encabezados H3; simplemente añade los enlaces directamente bajo el encabezado H2 "Ejemplos". Por ejemplo:

md
## Ejemplos

Para ver ejemplos de esta función, consulta [la página sobre basic-shape](https://example.org/).

Especificaciones

{{Specifications}}

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

Compatibilidad con navegadores

{{Compat}}

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

Véase también

Incluye enlaces a páginas de referencia y guías relacionadas con la función actual. Para más pautas, consulta la sección Véase también en la Guía de estilo de escritura.

  • enlace1
  • enlace2
  • enlace_externo (año)

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content