Novedades de Chrome 118

Adriana Jara

Tenga en cuenta lo siguiente:

• Declara estilos específicos dentro de un componente con la regla de CSS @scope.
• Hay una nueva función multimedia: prefers-reduced-transparency.

• DevTools tiene mejoras en el panel Sources.

• Y hay mucho más.

Soy Adriana Jara. Analicemos las novedades para desarrolladores en Chrome 118.

Regla @scope de CSS

La regla de línea @scope permite a los desarrolladores definir el alcance de las reglas de diseño en una raíz de alcance determinada y aplicarles diseño a los elementos según la proximidad de esa raíz de alcance.

Con @scope, puedes anular los estilos en función de la proximidad, lo que es diferente de los estilos de CSS habituales que se aplican solo en función del orden y la especificidad de la fuente. En el siguiente ejemplo, hay dos temas.

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

sin alcance, el estilo aplicado es el último declarado.

.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

Con el alcance, puedes tener elementos anidados, y el estilo que se aplica es el del ancestro más cercano.

@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

El alcance también te evita escribir nombres de clases largos y complicados, y facilita la administración de proyectos más grandes y evita conflictos de nombres.

<div class="first-container">
  <h1 class="first-container__main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1>
</div>

.first-container__main-title {
  color: grey;
}

.second-container__main-title {
  color: mediumturquoise;
}

<div class="first-container">
  <h1 class="main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="main-title"> I'm the main title, but somewhere else</h1>
</div>

@scope(.first-container){
  .main-title {
   color: grey;
  }
}
@scope(.second-container){
  .main-title {
   color: mediumturquoise;
  }
}

Con el alcance, también puedes aplicar diseño a un componente sin aplicarlo a ciertos elementos anidados dentro. En cierto modo, puedes tener "huecos" en los que no se aplica el estilo centrado.

Como en el siguiente ejemplo, podríamos aplicar estilo al texto y excluir los controles, o viceversa.

<div class="component">
  <div class="purple">
    <h1>Drink water</h1>
    <p class="purple">hydration is important</p>
  </div>
  <div class="click-here">
    <p>not in scope</p>
    <button>click here</button>
  </div>

  <div class="purple">
    <h1 class="purple">Exercise</h1>
    <p class="purple">move it move it</p>
  </div>

  <div class="link-here">
    <p>Excluded from scope</p>
    <a href="#"> link here </a>
  </div>
</div>

@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

Consulta el artículo Limita el alcance de tus selectores con la regla @scope de CSS para obtener más información.

prefers-reduced-transparency función multimedia

Usamos consultas de medios para proporcionar experiencias del usuario que se adapten a sus preferencias y condiciones del dispositivo. Esta versión de Chrome agrega un valor nuevo que se puede usar para adaptar la experiencia del usuario: prefers-reduced-transparency.

Un valor nuevo que puedes probar con consultas de medios es prefers-reduced-transparency, que permite a los desarrolladores adaptar el contenido web a la preferencia seleccionada por el usuario para reducir la transparencia en el SO, como el parámetro de configuración Reducir transparencia en macOS. Las opciones válidas son reduce o no-preference.

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

Además, puedes comprobar cómo se ve con Herramientas para desarrolladores:

Para obtener más información, consulta la documentación de prefers-reduced-transparency.

Corrección: Una versión anterior de este artículo hacía referencia a una nueva función multimedia de scripting que se incluye en esta versión. En realidad, será la versión 120.

Mejoras en el panel de fuentes de DevTools

DevTools tiene las siguientes mejoras en el panel Sources: la función workspace mejoró la coherencia, en particular, cambiando el nombre del panel Sources > Filesystem a Workspace junto con otro texto de la IU. Sources > Workspace también te permite sincronizar los cambios que realices en DevTools directamente con tus archivos fuente.

Además, ahora puedes reorganizar los paneles del lado izquierdo del panel Sources arrastrando y soltando, y el panel Sources ahora puede mostrar un formato de texto mejorado de JavaScript intercalado dentro de los siguientes tipos de secuencias de comandos: module, importmap y speculationrules, y destacar la sintaxis de los tipos de secuencias de comandos importmap y speculationrules, que contienen JSON.

Consulta Novedades de Herramientas para desarrolladores para obtener más información sobre las actualizaciones de Herramientas para desarrolladores de Chrome 118.

Y mucho más.

Por supuesto, hay mucho más.

• La API de WebUSB ahora está expuesta a los service workers registrados por extensiones del navegador, lo que permite que los desarrolladores usen la API cuando respondan a eventos de extensión.

• Para ayudar a los desarrolladores a reducir los problemas en los flujos de solicitud de pago, quitaremos el requisito de activación del usuario en Payment Request y Secure Payment Confirmation.

• El ciclo de lanzamientos de Chrome se acorta, y las versiones estables se lanzarán cada tres semanas, a partir de Chrome 119, que estará disponible en tres semanas.

Lecturas adicionales

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

• Novedades de las Herramientas para desarrolladores de Chrome (118)
• Bajas y eliminaciones de Chrome 118
• Actualizaciones de ChromeStatus.com para Chrome 118
• 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 Adriana Jara y, en cuanto se lance Chrome 119, estaré aquí para contarte las novedades.