Usuarios nuevos de la plataforma web en marzo

Descubre algunas de las funciones interesantes que se lanzaron en los navegadores web estables y beta durante marzo de 2022.

Rachel Andrew

Versiones estables del navegador

En marzo, Chrome 99, Chrome 100, Firefox 98 y Safari 15.4 se volvieron estables. Esto trajo un lote completo de funciones nuevas a la plataforma, y muchas de estas incorporaciones permitieron que la función estuviera disponible en los tres motores de navegador. En esta publicación, me concentré en las incorporaciones que nos brindan interoperabilidad entre navegadores, pero consulta las notas de la versión para ver todas las funciones que se agregaron a cada motor.

Chrome 99 y Safari 15.4 incluyeron capas en cascada. La regla de anidación @layer define una capa en cascada, lo que te ayuda a controlar la especificidad. Se unen a Firefox, por lo que las capas en cascada ahora están disponibles en los tres motores de navegador. Obtén más información sobre las capas en cascada en Las capas en cascada llegarán a tu navegador.

Navegadores compatibles

  • Chrome: 99.
  • Borde: 99.
  • Firefox: 97.
  • Safari: 15.4.

Origen

Chrome 100 incluye el nuevo valor de plus-lighter para la propiedad mix-blend-mode de CSS. Este valor es útil cuando se superponen dos elementos cuando todos los píxeles o un subconjunto de ellos tienen los mismos valores. Puedes obtener más información sobre el problema que resuelve en Por el momento, es imposible aplicar una transición entre dos elementos del DOM.

Navegadores compatibles

  • Chrome: 100
  • Edge: 100
  • Firefox: 99.
  • Safari: 9.1.

Safari 15.4 incluye la propiedad contain, que permite el confinamiento de CSS.

Navegadores compatibles

  • Chrome: 52.
  • Edge: 79.
  • Firefox: 69.
  • Safari: 15.4.

Origen

También en Safari 15.4, se incluye accent-color, que permite controlar el color de los elementos destacados que se usan en algunos controles de formulario.

Navegadores compatibles

  • Chrome: 93.
  • Edge: 93.
  • Firefox: 92.
  • Safari: 15.4.

Origen

Firefox 98 y Safari 15.4 lanzaron el elemento <dialog>, que representa un cuadro de diálogo.

Navegadores compatibles

  • Chrome: 37.
  • Edge: 79.
  • Firefox: 98.
  • Safari: 15.4.

Origen

Safari 15.4 también completó la compatibilidad con la pseudoclase :focus-visible. El trabajo de implementación correspondiente fue de Igalia.

Navegadores compatibles

  • Chrome: 86.
  • Borde: 86.
  • Firefox: 85.
  • Safari: 15.4.

Origen

Versiones beta del navegador

Las versiones beta del navegador te brindan una vista previa de lo que estará disponible en la próxima versión estable del navegador. Es un buen momento para probar funciones nuevas o eliminaciones que podrían afectar a tu sitio antes de que el resto del mundo obtenga esa versión.

Las nuevas versiones beta de marzo fueron Chrome 101 y Firefox 99.

La versión beta de Chrome 101 incluye la notación de colores hwb. Esto especifica el color según su tono, blancura y negritud. Al igual que con otras notaciones de colores, un componente alfa opcional especifica la opacidad.

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

Navegadores compatibles

  • Chrome: 101
  • Edge: Primeros pasos.
  • Firefox: 96.
  • Safari: 15.

Origen

Firefox 99 incluye la propiedad pdfViewerEnabled de la interfaz de Navigator. Esta propiedad indica si el navegador admite la visualización intercalada de archivos PDF.

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

Navegadores compatibles

  • Chrome: 94.
  • Borde: 94.
  • Firefox: 99.
  • Safari: 16.4.

Origen

Estas funciones beta pronto estarán disponibles en navegadores estables.

Parte de la serie de artículos para principiantes en la Web