Novedades de Chrome 118

Adriana Jara

Tenga en cuenta lo siguiente:

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

Regla @scope de CSS.

La regla-at @scope permite a los desarrolladores definir el alcance de las reglas de estilo en una raíz de alcance determinada y diseñar elementos de acuerdo con la proximidad de esa raíz de alcance.

Con @scope, puedes anular estilos según la proximidad, 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.

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

Dos vínculos, el primero dice “Soy color rosa claro” y el segundo dice “Rosa diferente”, ambos son de color rosa claro debajo del texto de los vínculos, en el que se lee el estilo de declaración de orden de las fuentes.

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

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

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

Dos vínculos, el primero dice “Soy rosa claro!” el segundo dice “Rosa diferente”, el segundo es un rosa más oscuro, debajo del texto de los vínculos del estilo principal más cercano y tiene una marca de verificación verde a su lado.

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

Sin @scope
<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;
}
Con @scope
<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 diseñar un componente sin aplicar estilo a ciertos elementos que están anidados. De una manera, puedes tener "agujeros" donde no se aplique el estilo con alcance.

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

del código HTML anterior, con las palabras dentro del alcance junto al primer y el tercer div, y la palabra excluida junto al segundo y cuarto div.

<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;
  }
}

Para obtener más información, consulta el artículo Limita el alcance de tus selectores con el @scope at-rule de CSS.

Función multimedia de prefers-reduced-transparency

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

Un nuevo valor que puedes probar con consultas de medios es prefers-reduced-transparency, que permite a los desarrolladores adaptar contenido web a las preferencias seleccionadas 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;
  }
}

Puedes comprobar cómo se ve con las 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. De hecho, estará en la versión 120.

Mejoras en el panel Sources en Herramientas para desarrolladores

Herramientas para desarrolladores cuenta con las siguientes mejoras en el panel Fuentes: La función de lugar de trabajo mejoró la coherencia. En particular, cambió el nombre del panel Fuentes > Sistema de archivos a Espacio junto con otro texto de la IU. Fuentes > Espacio de trabajo también te permite sincronizar los cambios que realizas en Herramientas para desarrolladores directamente con tus archivos fuente.

Además, ahora puedes reordenar los paneles en el lado izquierdo del panel Fuentes si arrastras y sueltas, y el panel Fuentes ahora puede imprimir con facilidad el código JavaScript intercalado en los siguientes tipos de secuencias de comandos: module, importmap, speculationrules, y destacar la sintaxis de los tipos de secuencias de comandos importmap y speculationrules, ambos con JSON.

Antes y después de la impresión con tela y resaltado de sintaxis del tipo de script de reglas de especulación.

Consulte 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 que hay mucho más.

Lecturas adicionales

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

Suscribirse

Para mantenerte al día, 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 Adriana Jara. En cuanto se lance Chrome 119, estaré aquí para contarte las novedades de Chrome.