Nouveautés de Chrome 118

Adriana Jara

Voici les informations à retenir :

Je m'appelle Adriana Jara. Voyons ce que Chrome 118 propose aux développeurs.

Règle CSS @scope.

La règle at-@scope permet aux développeurs de définir le champ d'application des règles de style sur une racine de champ d'application donnée et de styliser les éléments en fonction de la proximité de cette racine de champ d'application.

Avec @scope, vous pouvez remplacer les styles en fonction de la proximité, ce qui est différent des styles CSS habituels qui sont appliqués en fonction de l'ordre et de la spécificité de la source uniquement. Dans l'exemple suivant, il existe deux thèmes.

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

sans portée, le style appliqué est le dernier déclaré.

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

Deux liens, le premier indique &quot;Je suis rose clair !&quot; et le second &quot;rose différent&quot; (rose clair)

Avec la portée, vous pouvez avoir des éléments imbriqués et le style qui s'applique est celui de l'ancêtre le plus proche.

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

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

Deux liens, le premier indique &quot;Je suis rose clair !&quot;, le second &quot;Un autre rose&quot;. Le second lien est de couleur rose plus foncé, se trouve sous le style d&#39;ancêtre le plus proche du texte des liens et est associé à une coche verte.

Le champ d'application vous évite également d'écrire des noms de classe longs et complexes, et vous permet de gérer facilement des projets plus importants et d'éviter les conflits de noms.

Sans @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;
}
Avec @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;
  }
}

La portée vous permet également de styliser un composant sans appliquer de style à certains éléments imbriqués. D'une certaine manière, il peut y avoir des "trous" où le style cloisonné ne s'applique pas.

Comme dans l'exemple suivant, nous pouvons appliquer un style au texte et exclure les commandes, ou inversement.

Représentation du code HTML ci-dessus, avec les mots inclus à côté de la première et de la troisième div, et le mot exclu à côté de la deuxième et de la quatrième 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;
  }
}

Pour en savoir plus, consultez l'article Limiter la portée de vos sélecteurs avec la règle @scope CSS.

Fonctionnalité multimédia prefers-reduced-transparency

Nous utilisons des requêtes multimédias pour offrir des expériences utilisateur qui s'adaptent aux préférences et aux conditions de l'appareil de l'utilisateur. Cette version de Chrome ajoute une nouvelle valeur permettant d'adapter l'expérience utilisateur: prefers-reduced-transparency.

Vous pouvez tester une nouvelle valeur avec les requêtes multimédias : prefers-reduced-transparency. Elle permet aux développeurs d'adapter le contenu Web aux préférences de l'utilisateur en termes de transparence réduite dans l'OS, comme le paramètre "Réduire la transparence" sur macOS. Les options valides sont reduce ou no-preference.

.translucent {
  opacity: 0.4;
}

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

Vous pouvez également vérifier l'apparence de la page avec DevTools:

Pour en savoir plus, consultez la documentation sur prefers-reduced-transparency.

Correction: Une version précédente de cet article faisait référence à une nouvelle fonctionnalité multimédia scripting disponible dans cette version. Il s'agira de la version 120.

Améliorations apportées au panneau "Sources" dans les Outils de développement

Les Outils de développement ont apporté les améliorations suivantes au panneau Sources: la fonctionnalité Workspace (Espace de travail) a amélioré la cohérence, en particulier en renommant le volet Sources > Filesystem (Sources > Système de fichiers) en Workspace (Espace de travail) et en modifiant d'autres textes de l'interface utilisateur ; l'option Sources > Workspace (Sources > Espace de travail) vous permet également de synchroniser les modifications que vous apportez dans les Outils de développement directement avec vos fichiers sources.

De plus, vous pouvez désormais réorganiser les volets sur la gauche du panneau Sources par glisser-déposer. Le panneau Sources peut désormais imprimer correctement le code JavaScript intégré dans les types de scripts suivants: module, importmap et speculationrules, et mettre en surbrillance la syntaxe des types de scripts importmap et speculationrules, qui contiennent tous deux des scripts JSON.

Avant et après l&#39;affichage soigné et la mise en surbrillance de la syntaxe du type de script de règles de spéculation.

Pour en savoir plus sur les mises à jour des outils pour les développeurs de Chrome 118, consultez Nouveautés concernant les outils pour les développeurs.

Et bien plus !

Bien sûr, il y a bien d'autres choses.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires dans Chrome 118.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Adriana Jara. Dès que Chrome 119 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.