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 a Política de Permisos.
• 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.
• Además, hay mucho más.

Me llamo Pete LePage y tengo la versión 411 para desarrolladores en Chrome 90, con el estilo de los años 90.

Evita el desbordamiento con overflow: clip

¡CSS es todo eso y una bolsa de papas fritas! Sin embargo, creo que todo desarrollador web vio y experimentó algo que desbordaba de manera incómoda en algún momento. Hay una excelente publicación sobre los trucos de CSS sobre las diferentes maneras 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 por el cuadro, incluido el desplazamiento programático. Esto significa que el cuadro no se considera un contenedor de desplazamiento y no inicia un nuevo contexto de formato. Si lo necesitas, puedes aplicar el recorte a un solo eje mediante overflow-x y overflow-y.

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

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

Observa a 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 selectivamente el comportamiento de ciertas APIs y funciones web en el navegador. Estas políticas constituyen un contrato entre tú y el navegador. Informan al navegador cuál es tu intent.

Si tu código o alguna de las bibliotecas de terceros que usas infringen tus reglas preseleccionadas, el navegador anula el comportamiento con una mejor UX o solo dice “habla con la mano” y bloquea la API por completo.

A partir de Chrome 90, se cambiará el nombre de la API de Feature Policy a Política de Permisos y se cambiará el nombre del encabezado HTTP junto con esta. Al mismo tiempo, la comunidad estableció una nueva sintaxis, basada en valores de campo estructurados para HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

Si te interesa saber cómo usarla en tu sitio, consulta Introducción a la política de funciones.

Shadow DOM declarativo

Shadow DOM, que forma parte del estándar de Web Components, proporciona una manera de definir el alcance de los estilos de CSS para un subárbol específico del DOM 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 tan bien para la renderización del servidor, en la que no hay una forma compilada para expresar Shadow Roots en el HTML generado por el servidor. Sin embargo, a partir de Chrome 90, con el Shadow DOM declarativo, estará todo listo. Puedes crear shadow roots solo con HTML.

Una Shadow Root declarativa es un elemento <template> con un atributo shadowroot. El analizador de HTML lo detecta y se aplica de inmediato como la shadow root de su elemento superior.

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

La carga del lenguaje de marcado HTML puro genera el siguiente árbol del DOM:

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

Esto nos brinda los beneficios de la encapsulación de Shadow DOM y la proyección de ranuras en HTML estático. No se necesita JavaScript para producir el árbol completo, incluida Shadow Root.

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, y hasta las velocidades de carga para los usuarios que visitan sitios compatibles con HTTPS, la barra de direcciones de Chrome usará https:// de forma predeterminada. Si no has configurado un redireccionamiento automático de HTTP a HTTPS, este sería un buen momento para hacerlo.

Además, se enviará un codificador AV1 en la versión de escritorio de Chrome que está optimizado específicamente para videoconferencias con integración de WebRTC.

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

• Novedades de las Herramientas para desarrolladores de Chrome (90)
• Bajas 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 día con nuestros videos, suscríbete al canal de YouTube de Chrome Developers. 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 de Chrome.

Un saludo especial

Me divertí mucho filmando este episodio de New in Chrome con temática de los 90. Muchas gracias a Sean Meehan por la idea y por reunir a las increíbles personas que ayudaron a abrir la guerra del tiempo hasta 1990.

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