Novedades de Chrome 99

Pete LePage

Tenga en cuenta lo siguiente:

• Faltan solo unas semanas para el lanzamiento de la versión 100 de Chrome y Firefox.
• Las capas en cascada de CSS te brindan más control sobre tu CSS y ayudan a evitar conflictos de especificidad de estilo.
• El método showPicker() te permite mostrar de forma programática un selector de navegador para elementos <input>, como date, color y datalist.
• Hay mucho más.

Soy Pete LePage. Profundicemos y veamos las novedades para desarrolladores en Chrome 99.

Chrome 100 y Firefox 100

Chrome 100 se lanzará a fines de marzo de 2022 y Firefox 100 poco después, a principios de mayo. Ambos son un hito importante en el número de versión principal y se transfieren a tres dígitos. Sin embargo, si esperas dos dígitos, el número de versión nuevo podría causarte problemas.

Se debe verificar cualquier código que compruebe los números de versión o analice la cadena de usuario-agente para asegurarse de que no tenga ningún problema.

En Chrome, la marca #force-major-version-to-100 cambiará el número de versión actual a 100.

Además, en el menú Configuración de Firefox Nightly, puedes habilitar la opción "Firefox 100 User-Agent String". Te recomendamos que pruebes tu sitio para asegurarte de que todo funcione como se espera.

Consulta Chrome y Firefox pronto para llegar a la versión principal 100 y obtener detalles completos.

Capas de CSS en cascada

La compatibilidad con las capas en cascada de CSS y la regla @layer de CSS llegará a Chrome 99. Proporcionan un control más explícito de tus archivos CSS para evitar conflictos de especificidad del estilo. Esto es especialmente útil para bases de código grandes, sistemas de diseño y cuando se administran estilos de terceros en aplicaciones.

Presentan una nueva capa a la cascada de CSS. En el caso de los diseños en capas, la prioridad de una capa siempre supera la especificidad de un selector.

Si intentas diseñar un vínculo, en un .card, dentro de un .post, verás que se aplicará el selector más específico. Cuando usas la regla @layer, puedes ser más explícito sobre la especificidad del diseño de cada uno y asegurarte de que el diseño del vínculo en la tarjeta anule el diseño del vínculo en la publicación.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

Esto se debe a la prioridad en cascada. Los diseños en capas crean nuevos planos en cascada.

Las capas en cascada que usan la regla @layer de CSS son compatibles con Chrome 99, Firefox 97 y Safari 15.4 Beta. Consulta Las capas en cascada llegarán a tu navegador para obtener más información.

showPicker() para elementos de entrada

Durante mucho tiempo, tuvimos que recurrir a bibliotecas de widgets personalizados o hacks para mostrar un selector de fecha. Hay un nuevo método showPicker() en HTML InputElements. Es la forma canónica de mostrar un selector de navegador, no solo para date, sino también para time, color y otros elementos <input> con selectores.

Para usarlo, llama a showPicker() en el elemento <input>. En este ejemplo, lo uní en un bloque try…catch. Eso me permite proporcionar un resguardo si el navegador no admite la API o no puede mostrar el selector. De esta manera, se garantiza que los usuarios tengan una buena experiencia.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Consulta Muestra un selector del navegador para fecha, hora, color y archivos para obtener detalles completos y todos los diferentes tipos de <input> para los que puedes usar showPicker().

Y mucho más.

Por supuesto, hay mucho más.

Se actualizó la API de Canvas2D y se agregaron nuevas funciones, como las siguientes:

• Dos eventos nuevos para ContextLost y ContextRestored
• Una opción willReadFrequently
• Mayor compatibilidad con modificadores de texto de CSS
• Y mucho más.

Hay una nueva prueba de origen para permitir que las AWP proporcionen colores alternativos en el manifiesto de la aplicación web para el modo oscuro.

Y la API de reconocimiento de escritura a mano ya está disponible.

Lecturas adicionales

Esto solo abarca algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para ver cambios adicionales en Chrome 99.

• Novedades de las Herramientas para desarrolladores de Chrome (99)
• Salidas de servicio y eliminaciones de Chrome 99
• Actualizaciones de ChromeStatus.com para Chrome 99
• Lista de cambios del repositorio de código fuente de Chromium
• Calendario de lanzamientos de Chrome

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y apenas se lance Chrome 100, estaré aquí para contarte las novedades de Chrome.