Muestra el estado de Baseline en tus presentaciones y publicaciones de blog

Fecha de publicación: 23 de octubre de 2024

En esta publicación, aprenderás a usar el nuevo componente web <baseline-status> en tu propio sitio y los logotipos de Baseline en las presentaciones, cada vez que escribas o hables sobre las funciones de la plataforma web.

La mayoría de los desarrolladores han tenido la experiencia de buscar una solución a un problema de desarrollo web, encontrar un artículo que describa la solución perfecta y, al final, darse cuenta de que solo está disponible en un navegador. O bien, entusiasmarse con esa función que un presentador de conferencias describe y, luego, descubrir que es experimental. Esto era algo que queríamos mejorar en nuestros sitios para desarrolladores de Chrome y, durante los últimos dos años, agregamos datos de compatibilidad de MDN a nuestras publicaciones.

Sin embargo, el modelo de referencia lo hace aún más claro. En lugar de verificar versiones individuales del navegador, puedes comprobar si una función está disponible de forma general en el modelo de referencia y, por lo tanto, está lista para usarse sin preocupaciones. O bien, puedes saber que está disponible como Baseline recientemente y, por lo tanto, es interoperable, pero como una función nueva, tal vez quieras considerar estrategias de resguardo para ella. Aquí en web.dev, comenzamos a agregar un nuevo componente de estado del modelo de referencia a algunas de nuestras páginas. Puedes verlo en la entrada de blog sobre font-size-adjust de CSS.

El componente que muestra que font-size-adjust es Baseline Newly available.
El componente de la publicación font-size-adjust.

Agrega el componente a tu sitio

El componente web no es solo para nosotros. Nos complace compartir el componente <baseline-status> contigo. Ya puedes usarlo para mostrar el estado del modelo de referencia en el contenido que crees. El componente se puede instalar desde npm o se puede precompilar desde una CDN. Lee las instrucciones de instalación. Una vez instalada, muestra el estado de una función, como se indica en el siguiente código HTML para font-size-adjust.

<baseline-status featureId="font-size-adjust"></baseline-status>

Luego, el componente se actualizará automáticamente a medida que una función pase de la disponibilidad limitada a la disponibilidad nueva y, luego, a la disponibilidad de Wideline.

Busca featureId

El featureId que se pasa al componente es el nombre del componente en el repositorio web-features. El componente obtiene el estado de la función de los datos recopilados a través del proyecto de componentes web.

Agrega logotipos de Baseline

Si publicas algo impreso, en PDF o presentas en una conferencia, es probable que los logotipos sean útiles para mostrar el estado en ese momento. El panel Estado de la plataforma web puede ayudarte a verificar el estado del modelo de referencia de cualquier componente.

Dos logotipos verdes con la palabra Baseline, que se muestran sobre un fondo blanco y negro.
Marca denominativa Baseline en modo claro y oscuro.

Los logotipos de Baseline tienen licencia para que los uses en todos tus materiales. Descárgalos en formato PNG y SVG.

Dinos dónde usas Baseline

Nos encantaría ver dónde se usa Baseline. Crea una solicitud de cambios y agrega un vínculo al lugar donde la usaste para establecer un modelo de referencia en el entorno real.

¿Tienes otras ideas de integración?

¿Tienes alguna idea para integrar Baseline de otra manera? Tal vez tengas una herramienta para desarrolladores que pueda incluir esta información o un producto que se beneficiaría de poder compartir la versión del modelo de referencia que usa el panel de administración. Envía un problema con tus ideas y con gusto te ayudaremos.