Novedades de Chrome 118

Adriana Jara

Tenga en cuenta lo siguiente:

Soy Adriana Jara. Profundicemos y veamos las novedades para desarrolladores en Chrome 118.

Regla de CSS @scope.

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

Con @scope, puedes anular los estilos en función de 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; }

Hay dos vínculos; en el primero, se lee: Soy rosa claro&quot;. el segundo dice &quot;diferente rosa&quot;, ambos enlaces son de color rosa claro y, debajo de los vínculos, el texto dice el estilo de declaración de orden de 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;
    }
}

Hay dos vínculos, el primero dice “¡Soy rosa claro!” el segundo dice &quot;diferente rosa&quot;, el segundo es un rosa más oscuro, debajo del texto de los vínculos de estilo principal más cercano y tiene una marca de verificación verde al lado.

El alcance también te ahorra la necesidad de 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 aplicar diseño a un componente sin aplicar diseño a ciertos elementos que están anidados. De una manera, puede haber "agujeros" en los que 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 en el alcance junto al primer y tercer div, y la palabra excluida al lado del segundo y el 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;
  }
}

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

prefers-reduced-transparency función multimedia

Usamos las consultas de medios para ofrecer experiencias del usuario que se adapten a sus preferencias 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 las consultas de medios es prefers-reduced-transparency, que permite a los desarrolladores adaptar el contenido web a las preferencias seleccionadas por el usuario para reducir la transparencia en el SO, como el parámetro de configuración Reduce la 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, estará en la versión 120.

Mejoras en el panel de fuentes en Herramientas para desarrolladores

Herramientas para desarrolladores tiene las siguientes mejoras en el panel Sources: la función workspace mejoró la coherencia, sobre todo cuando cambió el nombre de Sources > Filesystem al Workspace Workspace junto con otro texto de la IU, el menú Sources > Workspace 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 Sources arrastrando y soltando elementos. El panel Sources ahora puede imprimir 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.

Antes y después de la impresión con formato estilístico y el resaltado de sintaxis del tipo de secuencia de comandos de las reglas de especulación.

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.

Lecturas adicionales

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

Suscribirse

Para mantenerte al día, 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.

Yo soy Adriana Jara. Apenas se lance Chrome 119, estaré aquí para contarte las novedades de Chrome.