Fecha de publicación: 31 de marzo de 2025
Pasó otro mes y, desde el último resumen mensual de Baseline, ocurrieron muchos cambios. En esta edición, repasaremos algunas publicaciones que publicamos aquí en web.dev, algunas funciones nuevas de Baseline que se lanzaron y algunas actualizaciones de herramientas de la comunidad.
Se lanzó ESLint 0.6.0
Recientemente, publicamos información sobre el lanzamiento de la compatibilidad de ESLint con la limpieza de CSS. Parte de este lanzamiento incluyó una nueva regla de ESLint (require-baseline) para lintear las funciones de CSS que usas en tu proyecto y determinar si alcanzan un umbral específico de Baseline.
Recientemente, ESLint lanzó la versión 0.6.0 del paquete @eslint/css, que incluye una actualización nueva importante que cambia el nombre de la regla require-baseline a use-baseline. Si bien esta actualización parece ser pequeña, mejora la legibilidad de la regla. También hay algunas otras funciones importantes y correcciones de errores en esta versión, como la capacidad agregada de la regla use-baseline para lintear bloques de CSS anidados. Si usas una versión anterior de @eslint/css, consulta esta actualización.
Cómo consultar el panel de la plataforma web
A principios de este mes, publicamos una publicación sobre cómo consultar el panel de la plataforma web. Este panel se puede consultar en su frontend, así como a través de una API de HTTP. Esto puede ser potencialmente útil para las herramientas de Baseline, ya que puedes consultar la API para encontrar atributos que hayan alcanzado un umbral específico de Baseline.
Esta API puede ser útil para herramientas en las que necesitas obtener información rápidamente sobre funciones específicas. Por ejemplo, puedes usar este tipo de herramientas para escribir una secuencia de comandos que te indique en algún intervalo qué funciones se volvieron recientemente disponibles para el modelo de referencia o de forma general. Si crees que esto puede serte útil, lee la publicación.
Cómo pensar en Baseline y los polyfills
La misión del modelo de referencia es aclarar qué funciones puedes usar de forma segura, pero incluso con esa mayor claridad, debes pensar en cómo adoptar las funciones de una manera que tenga sentido para tus aplicaciones web. Los rellenos son una parte importante de ese proceso. El modelo de referencia no considera los polyfills en función de si las funciones están disponibles recientemente o de forma general, y no intenta indicarte si debes usarlos. Esa decisión es específica de tu aplicación, pero es una consideración importante.
Recientemente, publicamos una publicación sobre cómo pensar en Baseline y los polyfills, y creemos que proporciona un marco de trabajo útil para pensar en cómo usarlos. La esperanza con las funciones que se vuelven disponibles recientemente o ampliamente en el modelo de referencia es que los polyfills dejen de ser una necesidad. No hay duda de que los polyfills son herramientas útiles en tu kit de herramientas de desarrollo, pero tienen desventajas: pueden tener un impacto negativo en el rendimiento de tu sitio web y, en algunos casos, incluso pueden generar problemas de accesibilidad. Esperamos que esta guía te ayude a resolver esta difícil pregunta.
contenteditable="plaintext-only" ahora está disponible como modelo de referencia
El atributo contenteditable en un elemento HTML permite que el usuario cambie su contenido como si fuera un campo de texto. Esto significa que, por ejemplo, puedes colocar el atributo en un elemento <p> y el usuario puede interactuar con él como un <textarea>. En algunos casos de uso, usar contenteditable ofrece ventajas sobre los elementos de formulario típicos.
Sin embargo, los usuarios pegan contenido en elementos editables, y el contenido que pegan puede contener formato de texto enriquecido, lo que puede proporcionar una experiencia frustrante para los usuarios que solo quieren pegar texto sin formato en un campo. La combinación de atributo/valor contenteditable="plaintext-only" evita que esto suceda y, recientemente, se convirtió en el modelo de referencia recientemente disponible. Para obtener más información, lee la publicación del anuncio y descubre cómo puedes ofrecer una mejor experiencia de edición a los usuarios que solo quieren pegar texto en elementos sin todo el relleno.
Intl.DurationFormat ahora está disponible como modelo de referencia
Es probable que hayas estado en un sitio web en algún momento de tu vida y hayas visto un texto que indica la duración del tiempo hasta o después de un evento, a menudo en una cadena como "2 días, 6 horas y 3 minutos". Estos datos son útiles para comunicar cualquier cantidad de elementos oportunos, pero a menudo los proporciona una biblioteca. Además, es posible que desees mostrar esta información en varios idiomas.
Ingresa Intl.DurationFormat, una función de internacionalización que recientemente se convirtió en Baseline Newly available. Con la clase Intl.DurationFormat, puedes pasar un objeto a su constructor que contenga las unidades de tiempo que deseas con formato de cadena y en casi cualquier idioma que puedas imaginar:
const duration = {
years: 1,
hours: 20,
minutes: 15,
seconds: 35
};
// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
Lo interesante de esto es que, si tu aplicación se basa en una biblioteca para dar formato a cadenas como esta, pronto podrás hacerlo sin una biblioteca, lo que ahorrará kilobytes para tus usuarios. Para obtener más información, lee la publicación de anuncio sobre Intl.DurationFormat y descubre cómo puedes aprovechar esta nueva y práctica función.
Modelo de referencia en el W3C Breakouts Day 2025
Recientemente, el W3C celebró la edición de 2025 de su Breakouts Day, en la que los miembros presentaron varios temas y se ofreció una sesión útil sobre Baseline el 26 de marzo.
Si es la primera vez que usas Baseline, esta sesión te brinda una descripción general rápida. En ella, se abordan los aspectos básicos del modelo de referencia, como los conceptos de disponibilidad reciente y amplia, pero también se explica cómo los datos determinan esas definiciones, desde browser-compat-data hasta los datos de web-features que nos ayudan a determinar qué atributos se encuentran en qué umbral de modelo de referencia.
Si te perdiste esta sesión, no te preocupes. Las diapositivas de la sesión ya están disponibles, así que échales un vistazo si la curiosidad te gana.
¡Eso es todo!
Esta edición del resumen mensual no solo marca el final del mes, sino también del trimestre. Si te perdiste las versiones anteriores del resumen, consulta las ediciones de enero y febrero para ponerte al día con todo lo que sucedió con Baseline en el primer trimestre de este año. Como de costumbre, avísanos si nos faltó algo relacionado con Baseline y nos aseguraremos de incluirlo en una edición futura. ¡Nos vemos en un mes!