Novedades de Chrome 90

Pete LePage

Tenga en cuenta lo siguiente:

• Hay un nuevo valor para la propiedad overflow del CSS.
• Se cambió el nombre de la API de Feature Policy por Permissions Policy.
• Además, hay una nueva forma de implementar y usar Shadow DOM directamente en HTML.
• Tenía varias chaquetas casi exactamente como esta en la década de 1990.
• Sin embargo, hay mucho más.

Soy Pete LePage, y tengo 411 para desarrolladores en Chrome 90, al estilo de 1990.

Evita el desbordamiento con overflow: clip

El CSS es todo eso y más. Sin embargo, creo que todos los desarrolladores web han visto y experimentado algo que se desborda de forma incómoda en algún momento. Hay una gran publicación en CSS Tricks sobre diferentes formas de controlar el desbordamiento, por ejemplo, con overflow: hidden o auto.

En la especificación de desbordamiento de CSS, hay una nueva propiedad clip que funciona de manera similar a hidden.

.overflow-clip {
  overflow: clip;
}

El uso de overflow: clip te permite evitar cualquier tipo de desplazamiento del cuadro, incluido el desplazamiento programático. Eso significa que el cuadro no se considera un contenedor de desplazamiento; no inicia un nuevo contexto de formato. Si lo necesitas, puedes aplicar el recorte a un solo eje a través de overflow-x y overflow-y.

Además, ten en cuenta que también hay overflow-clip-margin, que te permite expandir el borde del clip. Esto es útil para los casos en los que hay un desbordamiento de tinta que debería ser visible.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

Consulta overflow: clip en acción en https://petele-css-is-awesome.glitch.me/.

La política de funciones ahora se llama Política de permisos

En Chrome 74, presentamos la API de Feature Policy, que te permite habilitar, inhabilitar y modificar de forma selectiva el comportamiento de ciertas APIs y funciones web en el navegador. Estas políticas son un contrato entre tú y el navegador. Le informan al navegador cuál es tu intención.

Si tu código o alguna de las bibliotecas de terceros que usas incumplen las reglas preseleccionadas, el navegador anula el comportamiento con una mejor UX o simplemente dice "habla con la mano", lo que bloquea la API por completo.

A partir de Chrome 90, se cambiará el nombre de la API de Feature Policy a Permissions Policy, y el encabezado HTTP también cambiará de nombre. Al mismo tiempo, la comunidad se decidió por una nueva sintaxis, basada en los valores de campo estructurados para HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

Si te interesa saber cómo usar esta función en tu sitio, consulta la Introducción a la Política de funciones.

Shadow DOM declarativo

Shadow DOM, que forma parte del estándar de componentes web, proporciona una forma de asignar estilos CSS a un subárbol de DOM específico y aislarlo del resto del documento. Hasta ahora, la única forma de usar shadow DOM era construir una shadow root con JavaScript.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

Esto funciona bien para la renderización del cliente, pero no tanto para la renderización del servidor, en la que no hay una forma integrada de expresar las raíces de sombra en el HTML generado por el servidor. Sin embargo, a partir de Chrome 90, con el Shadow DOM declarativo, puedes crear raíces de sombra con solo HTML.

Un Shadow Root declarativo es un elemento <template> con un atributo shadowroot. El analizador de HTML lo detecta y lo aplica de inmediato como la raíz de sombra de su elemento superior.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Carga los resultados del lenguaje de marcado HTML puro en este árbol de DOM:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

Esto nos brinda los beneficios del encapsulamiento y la proyección de ranuras de Shadow DOM en HTML estático. No se necesita JavaScript para producir el árbol completo, incluida la raíz paralela.

Consulta Shadow DOM declarativo en web.dev para obtener más detalles.

Y mucho más

Y, por supuesto, hay mucho más.

Para ayudar a mejorar la privacidad, e incluso las velocidades de carga de los usuarios que visitan sitios compatibles con HTTPS, la barra de direcciones de Chrome usará https:// de forma predeterminada. Si aún no configuraste un redireccionamiento automático de HTTP a HTTPS, este es el momento ideal para hacerlo.

Y se envía un codificador AV1 en el escritorio de Chrome que está optimizado específicamente para videoconferencias con integración con WebRTC.

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

• Novedades de las Herramientas para desarrolladores de Chrome (90)
• Depresiones y eliminaciones de Chrome 90
• Actualizaciones de ChromeStatus.com para Chrome 90
• Novedades de JavaScript en Chrome 90
• Lista de cambios del repositorio de código fuente de Chromium

Suscribirse

Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de Desarrolladores de Chrome 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 91, estaré aquí para contarte las novedades.

Mención especial

Me divertí mucho filmando este episodio de Novedades de Chrome con temática de los años 90. Muchas gracias a Sean Meehan por la idea y por reunir a las personas increíbles que ayudaron a abrir el portal de tiempo a 1990.

Y, por supuesto, Loren Borja, Lee Carruthers y Lukas Holcek, quienes trabajan en todos mis videos de la sección Novedades de Chrome y me hacen ver mucho mejor de lo que en realidad soy. ¡GRACIAS!