Novedades de Chrome 99

Pete LePage

Tenga en cuenta lo siguiente:

• Solo faltan unas semanas para la cuenta regresiva hasta la versión 100 de Chrome y Firefox.
• Las capas de cascada de CSS te brindan más control sobre la CSS y ayudan a evitar conflictos de especificidad de diseño.
• El método showPicker() te permite mostrar de manera programática un selector de navegador para elementos <input>, como date, color y datalist.
• Además, hay mucho más.

Soy Pete LePage. Veamos las novedades para desarrolladores en Chrome 99.

Chrome 100 y Firefox 100

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

Se debe verificar cualquier código que verifique los números de versión o analice la string del usuario-agente para asegurarte 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.

En el menú Configuración nocturna de Firefox, puedes habilitar la opción "Firefox 100 User-Agent String". Es recomendable que pruebes tu sitio para asegurarte de que todo funciona como se espera.

Para obtener todos los detalles, consulta Chrome y Firefox pronto para llegar a la versión principal 100.

Capas de CSS en cascada

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

Agregan una capa nueva a la cascada de CSS. Con los diseños en capas, la prioridad de una capa siempre supera la especificidad de un selector.

Si intentas aplicar diseño a un vínculo, dentro de un .card, dentro de un .post, encontrarás que se aplicará el selector más específico. Si usas la regla @layer, puedes especificar de forma más explícita la especificidad del estilo de cada uno y asegurarte de que el estilo del vínculo de tu tarjeta anule el estilo del vínculo de 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 de Cascade llegan 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 trucos 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í a un bloque try…catch. Eso me permite proporcionar un resguardo en caso de que el navegador no sea compatible con la API o no pueda mostrar el selector. Esto nos permite garantizar 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 de 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 que hay mucho más.

Se actualizó la API de Canvas2D y agregó nuevas funciones, incluidas las siguientes:

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

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

Ya llegó la API de reconocimiento de escritura a mano.

Lecturas adicionales

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

• Novedades de las Herramientas para desarrolladores de Chrome (99)
• Bajas 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 día, 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 en cuanto se lance Chrome 100, estaré aquí para contarte las novedades de Chrome.