Nuevo en Chrome

Esto es lo que necesitas saber:

• Declarar estilos específicos dentro de un componente con la regla css @scope.

• Hay dos nuevas funciones de medios: scripting y prefers-reduced-transparency.

• DevTools tiene mejoras en el panel Fuentes.

• Y hay mucho más.

Yo soy Adriana Jara. Profundicemos y veamos las novedades para los desarrolladores en Chrome 118.

# Regla CSS @scope.

La regla @scope te permite aplicar reglas de estilo a una raíz de @scope determinada y diseñar elementos de acuerdo con la proximidad de esa raíz de @scope.

Con @scope puedes sobrescribir estilos basados ​​en la proximidad, lo cual es diferente de los estilos CSS habituales que se aplican basándose únicamente en el orden y la especificidad del origen. En el siguiente ejemplo, hay dos temas.

<div class="lightpink-theme">
  <a href="#">Soy rosado claro!</a>
  <div class="pink-theme">
    <a href="#">Un rosado diferente!</a>
  </div>
</div>

sin@scope, el estilo aplicado es el último declarado.

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

Con @scope 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;
    }
}

Scope también le evita tener que escribir nombres de clases largos y complicados, y facilita la gestión de proyectos más grandes al evitar 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 @scope también puedes diseñar un componente sin aplicar el estilo a ciertas cosas que están anidadas en su interior. En cierto modo, puede tener "agujeros" donde no se aplica el estilo del scope.

Como en el siguiente ejemplo, podríamos aplicar estilo al texto y excluir 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;
  }
}

Consulte la documentación de @scope para obtener más información.

# Funciones de medios scripting y prefers-reduced-transparency

Utilizamos consultas de medios (media queries) para proporcionar experiencias de usuario que se adapten a las preferencias del usuario y a las condiciones del dispositivo. Esta versión de Chrome agrega dos nuevos valores que se pueden usar para adaptar la experiencia del usuario: scripting y prefers-reduced-transparency

Podemos dar por sentada la presencia de scripting cuando nuestros usuarios acceden a la web, sin embargo, el scripting no siempre está habilitado. Ahora, utilizando la función scripting, puedes detectar si las secuencias de comandos están disponibles y aplicar estilos particulares para cada caso, los valores disponibles son : enabled, initial-only o none

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

Otro valor que puede probar con consultas de medios es "prefiere transparencia reducida", que permite a los desarrolladores adaptar el contenido web a las preferencias seleccionadas por el usuario para una transparencia reducida en el sistema operativo, como la 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;
  }
}

Y puedes comprobar cómo se ve con DevTools:

Para obtener más información, consulte la documentación de scripting y [prefers-reduced-transparency](https://developer.mozilla.org/docs /Web/CSS/@media/prefers-reduced-transparency).

# Mejoras en el panel de Fuentes en DevTools

DevTools tiene las siguientes mejoras en el panel Fuentes: la característica espacio de trabajo (workspace) mejoró la coherencia, en particular al cambiar el nombre del panel Fuentes > Sistema de archivos a Espacio de trabajo(workspace) junto con otros textos de la interfaz de usuario, Fuentes > Espacio de trabajo también le permite sincronizar los cambios que realiza en DevTools directamente con sus archivos fuente.

Además, ahora puede reordenar los paneles en el lado izquierdo del panel Fuentes arrastrando y soltando, y el panel Fuentes ahora puede imprimir JavaScript en línea dentro de los siguientes tipos de secuencias de comandos: [module] (https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules), [importmap](https://developer.mozilla.org/docs/Web/HTML/Element/script/type/ importmap), speculationrules y resalta la sintaxis de los tipos de script importmap y speculationrules, los cuales contienen JSON.

Consulte Novedades de DevTools para obtener más información sobre las actualizaciones de Chrome 118 DevTools.

# ¡Y más!

Por supuesto que hay mucho más.

• WebUSB API ahora está expuesta a Service Workers registrados por extensiones del navegador lo que permite a los desarrolladores usar la API al responder a eventos de extensiones.

• Para ayudar a los desarrolladores a reducir la fricción en los flujos de solicitudes de pago, estamos eliminando el requisito de activación del usuario en "Solicitud de pago" y "Confirmación de pago seguro".

• El ciclo de lanzamiento de Chrome se está acortando, las versiones estables se lanzarán cada tres semanas, comenzando con Chrome 119 que estará aquí en tres semanas.

# Otras lecturas

Esto cubre sólo algunos aspectos destacados clave. Consulte los enlaces a continuación para cambios adicionales en Chrome 118.

• Novedades de Chrome DevTools (118)
• Deprecations y eliminaciones de Chrome 118
• Actualizaciones de ChromeStatus.com para Chrome 118
• Lista de cambios del repositorio fuente de Chromium
• Calendario de lanzamientos de Chrome

# Suscríbete

Para mantenerse actualizado, suscríbase al Canal de YouTube para desarrolladores de Chrome, y recibirás una notificación por correo electrónico cada vez que lancemos un nuevo vídeo.

Yo soy Adriana Jara, y tan pronto como se lance Chrome 119, estaré aquí para contarles que hay de nuevo en Chrome!