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 principal y se transfieren a 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 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 según lo esperado.

Consulta Chrome y Firefox pronto alcanzarán la versión principal 100 para 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 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.

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 prioridad 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.

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, 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 app web para el modo oscuro.

También se lanzó la API de reconocimiento de escritura a mano.

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)
• Dar de baja y quitar funciones en 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, en cuanto se lance Chrome 100, estaré aquí para contarte las novedades.