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.
  • Y hay mucho más.

Soy Pete LePage. Analicemos 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 y se transfieren a tres dígitos. Sin embargo, si tu código espera 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.

Página de funciones experimentales de Chrome en la que se destaca la nueva opción #force-major-version-to-100

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 según lo esperado.

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

Capas en cascada de CSS

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 de 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. Con los estilos en capas, la prioridad de una capa siempre supera la especificidad de un selector.

Ilustración de la demostración del proyecto de división de la IU

Si intentas aplicar diseño a un vínculo, dentro de 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 precedencia en cascada. Los estilos 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.

Capturas de pantalla de los selectores de navegadores
Selectores de fecha del navegador en Chrome para computadoras, Chrome para dispositivos móviles, Safari para computadoras, Safari para dispositivos móviles y Firefox para computadoras (julio de 2021).

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 Cómo mostrar un selector de navegador para la fecha, la hora, el color y los 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, incluidas 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 app web para el modo oscuro.

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

Lecturas adicionales

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

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, en cuanto se lance Chrome 100, estaré aquí para contarte las novedades.