Cette page a été traduite par l'API Cloud Translation.

Nouveautés de Chrome 118

Adriana Jara

Voici les informations à retenir :

Déclarez des styles spécifiques au sein d'un composant à l'aide de la règle CSS @scope.
Une nouvelle fonctionnalité multimédia est disponible: prefers-reduced-transparency.
Des améliorations ont été apportées au panneau Sources dans les outils de développement.
Et ce n'est pas tout : ce n'est pas tout.

Je m'appelle Adriana Jara. Découvrons ensemble les nouveautés de Chrome 118 pour les développeurs.

Règle CSS `@scope`.

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

Avec @scope, vous pouvez remplacer les styles en fonction de la proximité, qui diffère des styles CSS habituels appliqués uniquement en fonction de l'ordre et de la spécificité des sources. L'exemple suivant comporte 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 champ d'application, 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 "Je suis rose clair !" et le second indique "Rose différent". Les deux liens sont en fait rose clair, sous le texte des liens "sources order déclaration style".

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 "Je suis rose clair" et le deuxième "rose différent", le deuxième un rose plus foncé, sous le texte des liens dans le style de l'ancêtre le plus proche et une coche verte à côté.

Le champ d'application vous évite également d'écrire des noms de classe longs et compliqués, et facilite la gestion des projets plus importants et évite 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;
  }
}

Avec un champ d'application, vous pouvez également styliser un composant sans styliser certains éléments qui y sont imbriqués. D'une manière, vous pouvez avoir des "trous" auxquels le style de champ d'application ne s'applique pas.

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

une représentation du code HTML ci-dessus, avec les mots inclus dans le champ d'application à côté des premier et troisième div, et des mots exclus à côté des deuxième et 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 couverture de vos sélecteurs avec l'attribut CSS @scope at-rule.

`prefers-reduced-transparency` élément multimédia

Nous utilisons les requêtes média pour fournir des expériences utilisateur qui s'adaptent aux préférences de l'utilisateur et à l'état de son appareil. Cette version de Chrome ajoute une nouvelle valeur qui peut être utilisée pour adapter l'expérience utilisateur: prefers-reduced-transparency.

Vous pouvez tester la nouvelle valeur prefers-reduced-transparency avec les requêtes média. Elle permet aux développeurs d'adapter le contenu Web aux préférences sélectionnées par l'utilisateur pour réduire la transparence dans l'OS, comme le paramètre "Réduire la transparence" sous 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 leur apparence à l'aide des outils de développement:

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

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

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

Les outils de développement offrent les améliorations suivantes dans le panneau Sources: la fonctionnalité workspace a amélioré la cohérence, notamment en renommant le volet Sources > Filesystem (Sources > Système de fichiers) en Espace de travail, ainsi que d'autres textes d'interface utilisateur. Sources > Espace de travail vous permet également de synchroniser les modifications apportées dans les outils de développement directement avec vos fichiers sources.

Vous pouvez également réorganiser les volets situés à gauche du panneau Sources par glisser-déposer. Le panneau Sources peut désormais imprimer correctement le code JavaScript intégré pour les types de scripts suivants: module, importmap et speculationrules, et mettre en surbrillance la syntaxe des types de script importmap et speculationrules, qui contiennent tous deux JSON.

Avant et après l'impression élégante et la coloration syntaxique du type de script des règles de spéculation.

Consultez la page Nouveautés des outils de développement pour en savoir plus sur les mises à jour des outils pour les développeurs Chrome 118.

Et bien plus !

Bien sûr, ce n’est pas tout.

L'API WebUSB est désormais exposée aux Service Workers enregistrés par des extensions de navigateur, ce qui permet aux développeurs de l'utiliser pour répondre aux événements d'extension.
Pour aider les développeurs à simplifier les flux de demandes de paiement, nous supprimons l'obligation d'activation des utilisateurs dans Payment Request et Secure Payment Confirmation.
Le cycle de publication de Chrome se raccourcit, des versions stables seront publiées toutes les trois semaines, à partir de Chrome 119, qui sera disponible dans trois semaines.

Complément d'informations

Nous n'aborderons ici que certains points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 118.

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Adriana Jara, soja, et dès la sortie de Chrome 119, je serai là pour vous dire quelles nouveautés Chrome sont disponibles !

Nouveautés de Chrome 118

Règle CSS @scope.

prefers-reduced-transparency élément multimédia

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

Et bien plus !

Complément d'informations

S'abonner

Règle CSS `@scope`.

`prefers-reduced-transparency` élément multimédia